Visar inlägg med etikett meny. Visa alla inlägg
Visar inlägg med etikett meny. Visa alla inlägg

söndag 15 november 2009

Enkel horisontell meny med CSS

Här är ett exempel på hur man enkelt kan skapa en horisontell meny med bakgrund.


Till menyn behövs tre bilder: vänster hörna, bakgrund och höger hörna. Använd gärna mina (högerklicka och välj Spara som...):

 

Jag använder en "unordered list" som jag lägger i en div-tagg.

<div id="menu">
<ul>
<li class="first"><a href="#">Hem</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Företaget</a></li>
<li><a href="#">Kontakt</a></li>
<li class="last"><a href="#">Kontakt</a></li>
</ul>
</div>

Jag lägger på lite CSS till min lista så att den blir horisontell och får lite design.

<style type="text/css">
<!--
#menu{
position:absolute;
left:0;
top:10px;
height:30px;
}
#menu ul{
background-image:url(menu_bg.gif);
height:30px;
padding:0;margin:0;
}
#menu ul li{
float: left;
list-style: none;
margin:0;
padding:0px 15px;
border-left:1px solid white;
height:30px;
}
#menu ul li a{
display: block;
padding: 4px 0px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
#menu ul li.first{
background-image:url(menu_l.gif);
background-position:left;
background-repeat:no-repeat;
}
#menu ul li.last{
background-image:url(menu_r.gif);
background-position:right;
background-repeat:no-repeat;
}
-->
</style>