Css Snippets » navigatie

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

Link rollover arrow

Mark — Mon, 02 Nov 2009 08:05:52 +0000

Bij het hoveren over de links, in bijvoorbeeld een navigatie, kun je het visuele effect toevoegen dat er een pijl je muisaanwijzer volgt om aan te geven dat je over de specifieke link aan het hoveren bent. Dit kan eenvoudiger met Javascript gedaan worden, maar een pure CSS oplossing is toch weer dat beetje leuker.

Afbeelding

pointer.gif (176)

HTML

CSS

ul.crawler {
list-style: none;
margin: 1em 0 1em 0;
padding: 0;
float: left;
border: 1px solid #000;
}
ul.crawler li {
position: relative;
float: left;
background: #d2da9c;
z-index: 6;
cursor: pointer;
}
ul.crawler li.x2 {z-index: 5}
ul.crawler li.x3 {z-index: 4}
ul.crawler li.x4 {z-index: 3}
ul.crawler li.x5 {z-index: 2}
ul.crawler li.x6 {z-index: 1}
ul.crawler li a {
float: left;
width: 10px;
height: 25px;
line-height: 25px;
text-decoration: none;
z-index: 2;
position: relative;
cursor: pointer;
background: transparent
}
ul.crawler li a.link {
width: 100px;
position: absolute;
left : 0;
top : 0;
text-align: center;
z-index: 0;
text-decoration: underline;
}
ul.crawler li a: hover span {
position: absolute;
width: 78px;
top : -12px;
left : auto;
margin-left: -30px;
z-index: 3;
background: url(images/pointer.gif) no-repeat left top;
}
a: hover {visibility: visible;background: url(images/transparent.gif)}/* ie needs this*/

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

Navigatie centreren door display:inline

Mark — Mon, 10 Aug 2009 08:25:20 +0000

Een navigatie centreren als je float gebruikt heeft het nadeel dat je een container element moet hebben en de exacte afmetingen moet weten om het te centreren, door display:inline te gebruiken vereenvoudig je dit door geen specifieke afmetingen nodig te hebben en text-align:center doet het werk voor jouw, om het even hoeveel navigatie-items je hebt.

HTML


    home
    about us
    products
    services
    contact

CSS

body{
padding-top: 60px;
background: #FFF;
font: 76% Arial,sans-serif;
}
ul#minitabs{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
ul#minitabs li{
display: inline;
margin: 0 2px;
}
ul#minitabs a{
text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999;
}
ul#minitabs a#current{
border-color: #F60;
color: #06F;
}
ul#minitabs a:hover{
border-color: #F60;
color: #666;
}

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