Ofta så kan det vara ganska svårt att kunna hitta vettiga menyer att jobba utifrån. Men jag har en källa som brukar fungera väldigt bra, Dynamic Drive. Idag skall jag ta upp hur man gör för att få en snygg horisontell meny.
Resultatet kommer att se ut så här ungefär:
Bilderna som är använda i menyn är följande:
Ok, då har vi resultatet men nedanför så får vi koden som skall in delvis i css-filen och delvis i html-koden.
Kod som skall in i CSS:en:
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(img/menybg1.jpg) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(img/menybg2.jpg) center center repeat-x;
}
Kod som skall in i din HTML-kod
<div class="indentmenu">
<ul>
<li><a href="http://www.aftonbladet.se">Aftonbladet</a></li>
<li><a href="http://www.twingly.com">Twingly</a></li>
<li><a href="http://www.elfsborg.se">Bästa klubben</a></li>
<li><a href="http://www.va.se">Veckans Affärer</a></li>
</ul>
</div>
Hoppas att ni har nytta av denna menyn. Det har jag haft
Andra bloggar om: webdesign, webbdesign, css, meny, css-meny, dhtml
Just nu värderat 5.0 av 3 människor
- Currently 5/5 Stars.
- 1
- 2
- 3
- 4
- 5