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

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

Sitemap stylen met één pixel afbeelding

Mark — Thu, 26 Nov 2009 07:43:39 +0000

Met een één pixel achtergrond afbeelding kan je vele dingen doen, met repeat-x maak je een horizontale lijn, repeat-y maakt een vertikale lijn en met repeat kan je een vlak vullen met kleur. Hoe kunnen we dit nu combineren voor onze sitemap styling? :

HTML


 Civil Engineering
  
   Home
   Home Office
   First Addition
   Contact
    
     Main office
     Sister office
    
   
   Metropolitan Place Phase II
   Oak Park Place of Baraboo
   Premier Coop
   Sleep Inn & Suites
   Tradewinds Business Center
   UW-Madison Nielsen Tennis Stadium
  
 
 Environmental Engineering
 About
  
   This site
   Office
   Disclaimer
   Person x
   Person Y

CSS

#project-list {
    background:transparent url(images/pixel.png) repeat-y 15px 0;
    width:340px;
}

#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}

#project-list li a:hover {
    color:#84B8FF;
}

#project-list li ul li {
    background:transparent url(images/pixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}

#project-list li ul li a {
    padding:0 0 0 3px;
}

#project-list li ul li ul {
    background:transparent url(images/pixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}

#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}

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

Met link-tabs dynamisch inhoud veranderen

Mark — Tue, 17 Nov 2009 06:45:06 +0000

Een tabbed navigatie die zonder page-refresh inhoud verandert door middel van Jquery:

HTML


		
    		
                Top Snippets
                Handig
                Javascript
                Classics
            
    		
    			
    				Target=_blank op de XHTML manier
    				1 kolom header sidebar content 
    				Tooltip met enkel CSS
    				Check/Uncheck alle checkboxes
    				Veranderen van tekst-selectie kleur
    				CSS opacity
    				Toon applicatie icon naast link
    			
        	
            CSS Horizontaal drop-down (uitklap) navigatie
            Toon scrollbar in Firefox altijd
            Formulier velden en line-height in FireFox probleem
            Haslayout oplossen in IE6 & IE7
            Eenvoudig en valid CSS hacken
    				CSS hack voor Chrome en Safari
    				Position : fixed in MSIE6
    				Volgorde stylesheets
    				HTML hr stylen via CSS
        		Conditional comments, allemaal
    				CSS Bar Graph complex
        	
        	
        		Anything Slider jQuery Plugin
        		Moving Boxes
    				Simple jQuery Dropdowns
    				Tekst zoom
    				:before & :after voor blockquote
    				Eenvoudige CSS dropdown navigatie
    				Alles:hover, :active, :focus voor IE6
    				Styling abbrevation in IE
        	
        	
            Media type print bepalen
            Basic XHTML 1.0 Strict template
            Valid XHTML met flash
            Printen van URL naast link
            Formulier zonder tabellen
            CSS shorthand voor color

CSS

#page-wrap {
width: 440px;
margin: 20px auto;
}
ul {
list-style: none;
padding: 0;
font-size: 1.3em;
margin: 0;
}
ul li a {
display: block;
border-bottom: 1px solid #666;
padding: 4px;
color: #666;
text-decoration: none;
}
ul li a:hover {
background: #fe4902;
color: #fff;
}
ul li:last-child a {
border: none;
}
#organic-tabs {
background: #c9f2ba;
padding: 10px;
margin: 0 0 15px 0;
border: 1px solid #84c984;
}
#explore-nav {
overflow: hidden;
margin: 0 0 10px 0;
}
#explore-nav li {
width: 97px;
float: left;
margin: 0 10px 0 0;
}
#explore-nav li.last {
margin-right: 0;
}
#explore-nav li a {
display: block;
padding: 5px;
background: #959290;
color: #fff;
font-size: 10px;
text-align: center;
border: 0;
}
#explore-nav li a:hover {
background-color: #111;
}
#javascript, #handig, #classics {
display: none;
}
#explore-nav li#ex-featured a.current, ul#top li a:hover {
background-color: #0575f4;
color: #fff;
}
#explore-nav li#ex-core a.current, ul#handig li a:hover {
background-color: #d30000;
color: #fff;
}
#explore-nav li#ex-jquery a.current, ul#javascript li a:hover {
background-color: #8d01b0;
color: #fff;
}
#explore-nav li#ex-classics a.current, ul#classics li a:hover {
background-color: #FE4902;
color: #fff;
}

Jquery

Je hebt ook Jquery nodig:

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 (113)

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

Target=_blank op de XHTML manier

Mark — Fri, 18 Sep 2009 10:35:24 +0000

Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

HTML

Je originele link

external link

Aangepaste link

external link

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