Css Snippets » menu

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

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

Vertikaal uitgeklapt menu

Mark — Sun, 18 Oct 2009 07:39:49 +0000

Een simpel navigatie menu door gebruik van in elkaar geneste lijsten om zo een uitgeklapt menu te realiseren.

HTML



Item one

Subitem one
Subitem two
Subitem three
Subitem four


Item two
Item three
Item four

CSS

#navlist {
list-style-type: none;
color: #333;
background-color: #eee;
margin-left: 5px;
}
#active:hover li {
display: block;
}
#active li {
display: none;
}
#navcontainer {
width: 220px;
background-color: #eee;
border: 1px #999 solid;
}
#navcontainer a {
color: #999;
background-color: #eee;
width: 120px;
display: block;
}
#navcontainer a:visited {
color: #900;
background-color: #eee;
}
#navcontainer a:active {
color: #fff;
background-color: #000;
}
#navcontainer a:hover {
color: #fff;
background-color: #000;
}

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

Animate een menu met een gif

Mark — Sun, 20 Sep 2009 07:33:28 +0000

Herinner je je de tijd dat animated gif’s cool waren, overal (soms in overuse) gebruikt werden en het niemand scheelde dat bandbreedte een issue was? Natuurlijk kan je Jquery gebruiken, maar laten we eens terug gaan in de tijd een een good old fashion animated gif gebruiken om een menu te animeren:

Download animated gif

HTML



Home
About
Contact


HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.
HEADLINE 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.

CSS

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #fff;
background: #2d2d2d;
}
#content {
width: 600px;
padding: 0 0 0 20px;
}
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
}
#main_nav li a {
display: block;
width: 150px;
height: 65px;
padding: 85px 0 0 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
background: url(twinkle.gif) no-repeat 0 0;
}
#main_nav li a:hover {
background-position: -150px 0; color: #fff;
}
.post {
padding-top: 18px;
line-height: 18px;
}
h4 {
margin: 8px 0 6px 0;
}
p {
line-height: 18px;
font-size: 12px;
margin: 0 0 18px 0;
}
.clear {
clear: both;
}

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

Menu kaart met CSS

Mark — Tue, 23 Jun 2009 07:58:50 +0000

Een menu kaart (spreek: restaurant) stylen.

HTML

Rates

	
		WordPress Coding
		100⁹⁵
	
	
		CSS Design
		250⁹⁵
	
	
		Support IE6 (extra)
		500⁹⁵
	

Services

	
		PhotoShop
		50⁰⁰
	
	
		Illustrator
		75⁰⁰
	
	
		Flash
		60⁰⁰
	

Sushi

	
		Spicy Hand Roll
		29⁹⁹
	
	
		Salmon Roll
		20⁹⁵
	
	
		Fire Dragon
		69⁹⁵
	

Sashimi

	
		Tuna
		2⁰⁰
	
	
		Salmon
		3⁵⁰
	
	
		White Fish
		4⁶⁰

CSS

body {
background: #fff;
font: 80%/160% Arial, Helvetica, sans-serif;
padding: 0;
margin: 20px 40px;
}
a {
color: #999;
}
h2 {
font: bold 320%/100% Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 0;
}
.menu {
width: 500px;
list-style: none;
margin: 0 0 2em;
padding: 0;
font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
.menu strong {
background: #fff;
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -0.3em;
left: 0;
}
.menu em {
background: #fff;
padding: 0 0 0 5px;
font: 110%/100% Georgia, "Times New Roman", Times, serif;
position: absolute;
bottom: -.2em;
right: 0;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}
.style2 li {
border-bottom: dashed 1px #000;
}
.style3 li {
background: url(images/sub.gif) repeat-x left bottom;
border: none;
}
.style4 li {
padding: 0 0 2.3em 0;
border-bottom: dotted 2px #999;
}
.credits {
color: #999;
font: 100% Georgia, "Times New Roman", Times, serif;
}

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

Eenvoudige CSS dropdown navigatie

Mark — Tue, 09 Jun 2009 07:30:16 +0000

Een menu dat openklapt als je over het bovenliggend navigatie item hovert. Dat is het doel, maar niet altijd eenvoudig te realiseren. Volgende CSS Snippet is een crossbrowser eenvoudig dropdown menu dat met een beetje JavaScript zelf in Internet Explorer 6 werkt.

HTML


Item One

Subitem One
Second Subitem
Numero Tres


Item two

Subitem One
Second Subitem
Numero Tres

CSS

#navbar {
margin: 0;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 10em;
background-color: #69f;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #8db3ff;
}

JavaScript

De CSS dient aangepast te worden voor IE6

De class .hover moet nu bij elke :hover worden bijgezet, dus eigenlijk 2 maal hetzelfde schrijven maar nu met een . i.p.v. :

CSS

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}

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