czwartek, 7 lutego 2013

Menu [Html/Css]



<div id="meniu">
   <div class="meniu2">Menu</div>
<ul>
   <li class="active "><a href="http://poszkole.pl/sciana"><span>Ściana</span></a></li>
   <li><a href="http://poszkole.pl/przyjaciele"><span>Przyjaciele</span></a></li>
   <li><a href="http://poszkole.pl/strona/komponenty"><span>Komponenty</span></a></li>
   <li><a href="http://poszkole.pl/grupy"><span>Grupy</span></a></li>
</ul>
</div>
<link rel="stylesheet" type="text/css" media="screen,projection" href="http://skroc.pl/csss"> 
<style>
#meniu {
list-style: none;
width: 150px;
mine-height: 125px;
padding-left: 10px;
        background: url(http://images.tinypic.pl/i/00072/1wyfdy5llkkc.png) ;
position: absolute;
left: 10px;
        border: 1px solid black;
top: 15%;
box-shadow: 0 0 10px black;
}
#meniu ul{
list-style: none;
margin: 0px;
padding: 0px;
        width: 60px;
}

#meniu a:link{
color: #b8b8b8;
font-family: Trebuchet MS;
font-size: 14px;
height: 23px;
display:block;
text-decoration: none;
padding: 8px 0 0 0px;
font-weight:normal;
-webkit-transition-duration: 0,1s;
}

#meniu a:visited{
text-decoration: line-through;
}

#meniu a:hover{
color: #595959;
margin-left: 15px;
}

#meniu a:active{
color: #dbdbdb;
margin-left: 15px;
-webkit-transition-duration: 0,1s;
}

.meniu2 {
float: right;
margin-right: 0px;
border: 1px solid black;
font-size: 16px;
color: white;
box-shadow: 0 0px 3px #1a1a1a;
}
</style>

#b8b8b8 - Kolor pierwszej czcionki
#595959 - Kolor drugiej czcionki.