Menüstílusok a világból

Hogy hogyan kell a színt megváltoztatni
A színeket kódokkal csinálják. mindegyiknek # az eleje. (Pl. #C48189)
A menüpont belső színe: background
Menüpont bal színe: Border left
Menüpont jobb színe: Border right
Betűstílus megváltoztatása: Font-family
Betű mérete: Font-size
Menüpont hosszúsága: Width

A kódok első részénél van az, hogy hogyan néz ki alapból a menüpont.A másodiknál pedig az, hogy ha ráviszed a kurzort, akkor hogyan néz ki. Én mindig a személyre szabásból szedem a kódokat, és leírom egy papírra. Kipróbálhatjátok az átszínezést! ;) Majd a szövegdobozokról is hozok ilyet! :)

Meghoztam nektek a menüket! :)


Főoldal
Cserék
Szereplők
Link1
Link2

<style type="text/css">
a.gumicukor{
font-family: georgia;
display:inline-block;
width:130px;
height:17px;
background:#eeceae;
color:#fff;
text-shadow: 1px 2px 2px #666;
font-size:15px ;
padding:5px;
margin:2px;
text-align:center;
border-left:5px solid #e7be94;
border-right:5px solid #e7be94;
text-decoration:none;
margin-bottom:3px;
border-radius:10px;
-webkit-transition-duration: 1.0s;
}

a.gumicukor:hover{
-webkit-transition-duration: 1.0s;
width:122px;
background:#e7be94;
border-radius:30px;
border-left:10px solid #eeceae;
border-right:10px solid #eeceae;
box-shadow: 1px 1px 3px #444;}
</style>

<a class="gumicukor" href="http://www.főoldal.hu/">Főoldal</a><br />
<a class="gumicukor" href="http://www.cserék.hu/">Cserék</a><br />
<a class="gumicukor" href="http://www.szereplők.hu/">Szereplők</a><br />
<a class="gumicukor" href="http://www.link1.hu/">Link1</a><br />
<a class="gumicukor" href="http://www.link2.hu/">Link2</a><br />

Főoldal
Cserék
Szereplők
Link1
Link2

<style type="text/css">

a.kiskakas{
font-family: georgia;
display:inline-block;
width:130px;
height:15px;
background:#eeceae;
color:#fff;
text-shadow: 1px 2px 2px #666;
font-size:14px ;
padding:5px;
margin:2px;
text-align:center;
border-left:5px solid #e7be94;
text-decoration:none;
margin-bottom:3px;
-webkit-transition-duration: 1.0s;
}

a.kiskakas:hover{
-webkit-transition: 0.9s;
-moz-transition: 0.9s;
width:131px;
background:#eeceae;
border-right:25px solid #e7be94;
box-shadow: 1px 1px 3px #444;}
</style>

<a class="kiskakas" href="http://www.főoldal.hu/">Főoldal</a><br />
<a class="kiskakas" href="http://www.cserék.hu/">Cserék</a><br />
<a class="kiskakas" href="http://www.szereplők.hu/">Szereplők</a><br />
<a class="kiskakas" href="http://www.link1.hu/">Link1</a><br />
<a class="kiskakas" href="http://www.link2.hu/">Link2</a><br />

Forrás: Kawaii Blog Design