CSS meny

april 30, 2008 08:17 by webbaren

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: , , , , ,


Currently rated 5.0 by 3 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comments

augusti 27. 2008 19:05

Menykoderna var guld för mig som precis börjat css-banan och är total nybörjare.

Men hur gör man om man vill att det ska fortsätta fält i samma färg typ över menyn (ingen aning vad det skulle kallas) och kanske innehålla logo och så? Border emellan menyn och fältet så klart. Förstod du hur jag menade?

Fredrik

augusti 28. 2008 11:29

Men hur gör man om man vill att det ska fortsätta fält i samma färg typ över menyn (ingen aning vad det skulle kallas) och kanske innehålla logo och så? Border emellan menyn och fältet så klart. Förstod du hur jag menade?

Jag är inte riktigt med hur du menar. Har du ingen url att posta så kan jag kika på det lite närmare.

Admin

september 18. 2008 19:09

Skulle ju vara bra om din sida fungerade, om du ska blogga om webbdesign! mupp!

haha

oktober 12. 2008 13:59

Hej, du verkar riktigt duktig på det här, och jag har en fråga. Ja jag har nyss flyttat över min blogg ifrån blogg.se till egen domän men jag vet inte hur jag kan redigera min blogg nu, har du tips på något program jag kan använda mig av och hur jag lär mig om CSS osv. Älskar att hålla på med webbdesign & photoshop men kanske inte är speciellt duktig i sån nivå.:p Hoppas du förstår vad jag menar! MVH Kattis

Kattis

maj 15. 2009 22:42

Måste bara fråga, varför använda listor i menyer? Jag har aldrig riktigt förstått meningen med det Tong

Oh, man

Add comment


 

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]