Css Snippets » Navigation

Dik onderlijnde navigatie

Mark — Tue, 29 Dec 2009 07:02:01 +0000

Een navigatie kan zoveel vormen aannemen, hier een eenvoudige maar fraaie navigatie met onderlijning bij mouseover.

HTML


	Home
	CSS Codes
	Forums
	Webmaster Tools
	JavaScript
	Gallery

CSS

ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: right;
}
ul li{
display: inline;
}
ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}
ul li a:hover, ul li a.selected{
border-bottom-color: black;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Oplossing “trappen effect” in IE6

Mark — Sun, 29 Nov 2009 07:43:18 +0000

Bijna elke webdeveloper gebruikt lijsten om een navigatie te maken, in de lijst maken we dan links en deze floaten we dan en normaal gezien is alles in orde …. voor de moderne browsers. IE6 en IE7 zullen je het trappen effect tonen. Als je het gezien hebt, weet je waarover ik het heb:

Normale code

HTML

CSS

ul {
    list-style: none;
}
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

Fixed CSS voor Internet Explorer

CSS

ul li {
    float: left;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS Horizontaal drop-down (uitklap) navigatie

Mark — Sat, 24 Oct 2009 07:00:12 +0000

Een crossbrowser oplossing om een multi level drop down menu te maken, alhoewel er gebruik zal gemaakt worden van browser sniffer voor Internet Explorer 6, op basis daarvan zal een HTC bestand geladen worden om :hover ook op ander elementen te laten werken voor dit multi level drop down navigatie menu.

Download eerst deze bestanden

HTML IE6 sniffer

Plak volgende code je

HTML




	Item 1
		
			Sub 1:1
			Sub 1:2
			
				Sub 1:2:1
				Sub 1:2:2
				Sub 1:2:3
				Sub 1:2:4
			
			
			Sub 1:3
			Sub 1:4
			
				Sub 1:4:1
				Sub 1:4:2
				Sub 1:4:3
				Sub 1:4:4
			
			
			Sub 1:5
			
				Sub 1:5:1
				Sub 1:5:2
				Sub 1:5:3
				Sub 1:5:4
				Sub 1:5:5
			
			
			Sub 1:6
		
	


	Item 2
		
			Sub 2:1
			Sub 2:2
			
				Sub 2:2:1
				Sub 2:2:2
			
			
			Sub 2:3
			Sub 1:4
			
				Sub 2:4:1
				Sub 2:4:2
			
			
			Sub 2:5
			
				Sub 2:5:1
				Sub 2:5:2
				Sub 2:5:3
				Sub 2:5:4
				Sub 2:5:5
			
			
		
	


	Item 3
		
			Sub 3:2
			
				Sub 3:2:1
				Sub 3:2:2
				Sub 3:2:3
				Sub 3:2:4
			
			
			Sub 3:3
			
				Sub 3:3:1
				Sub 3:3:2
				Sub 3:3:3
				Sub 3:3:4
			
			
			Sub 3:4
			
				Sub 3:4:1
				Sub 3:4:2
				Sub 3:4:3
				Sub 3:4:4
				Sub 3:4:5
			
			
			Sub 3:5
		
	


	Item 4
		
			Sub 4:1
			Sub 4:2
			
				Sub 4:2:1
				Sub 4:2:2
				Sub 4:2:3
				Sub 4:2:4
			
			
			Sub 4:3
			Sub 4:4
			
				Sub 4:4:1
				Sub 4:4:2
				Sub 4:4:3
				Sub 4:4:4
				Sub 4:4:5
				Sub 4:4:6
				Sub 4:4:7
				Sub 4:4:8
				Sub 4:4:9
			
			
		
	


	Item 5

CSS

#menuh-container {
	position: absolute;
	top: 1em;
	left: 1em;
}
#menuh {
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	margin:2.0em;
	margin-top: 1.0em;
}
#menuh a {
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
}
/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active {
	color: white;
	background-color: royalblue;
	text-decoration:none;
}
/* menu on mouse-over  */
#menuh a:hover {
	color: #fff;
	background-color: cornflowerblue;
	text-decoration:none;
}
/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover {
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover {
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
#menuh ul {
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9.0em; /* width of all menu boxes */
-/* NOTE: For adjustable menu boxes you can
comment out the above width rule.
However, you will have to add padding in the
"#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li {
	position:relative;
	min-height: 1px;
	vertical-align: bottom;
}
#menuh ul ul {
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1.0em;
	margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
	top:0;
	left:100%;
}

div#menuh li:hover {
	cursor:pointer;
	z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Een link is een inline element

Mark — Mon, 13 Jul 2009 10:16:58 +0000

Een link is een inline element, bewijs hiervan is als je een link in een stuk tekst zet zal deze niet op een nieuwe lijn beginnen. Maar soms wil je juist wel dimensie geven aan een link (navigatie, etc …), dan kun je niet anders dan er een block-element van te maken (indien je hoogte, breedte en margin wenst toe te voegen).
Als de links (meerdere) langs elkaar moeten komen kan je inline-block gebruiken of block in combinatie met float.

HTML

Link 1
Link 2
Link 3
Link 4

Links naast elkaar methode 1, zonder dimensie

CSS

a {
padding: 0 5px;
}

Links naast elkaar methode 2, met dimensie

CSS

a {
display: inline-block;
height: 20px;
width: 20px;
margin: 0 3px;
padding: 0 5px;
}

Links naast elkaar methode 3, met dimensie

CSS

a {
display: block;
float: left;
height: 20px;
width: 20px;
margin: 0 3px;
padding: 0 5px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Printen van URL naast link

Mark — Tue, 14 Apr 2009 20:03:27 +0000

Als je toelaat om je website af te printen door middel van een bijvoorbeeld print.css, is het misschien handig dat links in je document niet verloren gaan, maar dat bij het printen de gehele URL die achter de link zit ook afgeprint wordt.

CSS

@media print
{
  a:after {
    content: " [" attr(href) "] ";
  }
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Navigatie met mouseover effecten

Mark — Thu, 05 Mar 2009 21:13:45 +0000

Een crossbrowser navigatie maken is eigenlijk niet zo moeilijk als je maar rekening houd met de verschillen die er zijn. Om de gehele blok te kunnen gebruiken voor de links is de breedte op auto voor de betere browsers, terwijl voor IE6 de breedte op 100% moet worden gezet om alles naar behoren te laten werken.

HTML



CSS3
Nascom
Gigadesign
TopStyle
HTML5
Ultra Edit
Rechts

CSS

#navigatie {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #F93;
color: #333;
}
#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigatie li {
border-bottom: 1px solid #F93;
margin: 0;
}
#navigatie li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #C66300;
border-right: 10px solid #FF870F;
background-color: #EC7600;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navigatie li a {
width: auto;
}
#navigatie li a:hover {
border-left: 10px solid #E17100;
border-right: 10px solid #FFB66C;
background-color: #FF962D;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon