Vista Menüsü Yatay

Selam arkadaşlar

Vista style menü kodunu burda paylaşıyorum...




Gördüğünüz gibi elemanlarımız bunlar.Şimdi ilk adıma geçelim...

Kod:

<div id="main-nav">    <ul>        <li class="active"><a href="#" _fcksavedurl="#">ana Sayfa</a></li>        <li><a href="#" _fcksavedurl="#">bir</a></li>        <li><a href="#" _fcksavedurl="#">iki</a></li>        <li><a href="#" _fcksavedurl="#">bs</a></li>        <li><a href="#" _fcksavedurl="#">hyperend</a></li>    </ul>    <div class="clear-both"> </div> </div>

Bu html kodumuz.Yeni menümüz nerde gözüksün istıyorsanız oraya koyacaksınız....

2. adımda ise css kodumuzu basitce yazıyoruz...

Kod:

body{    font-family:Arial, Helvetica, sans-serif;    font-size:75%; }  #main-nav{    height:29px;    float:left;    background-image:url(http://paylasturka.net/hyperend/images/nav-bg.gif);    background-repeat:repeat-x;    background-position:top left;    width:100%; } body{    font-family:Arial, Helvetica, sans-serif;    font-size:75%; }  #main-nav{    height:29px;    float:left;    background-image:url(../images/nav-bg.gif);    background-repeat:repeat-x;    background-position:top left;    width:100%; }  #main-nav ul{    height:29px;    line-height:29px;    background-image:url(http://paylasturka.net/hyperend/nav-bar.gif);    background-position:right;    background-repeat:no-repeat;    float:left;    padding:0px 1px 0px 0px;    margin:0px 0px 0px 10px; } #main-nav li{    height:29px;    line-height:29px;    display:inline;    position:relative;    float:left;    width:80px;    text-align:center; }  #main-nav li a{    height:29px;    width:80px;    text-align:center;    float:left;    background-image:url(http://paylasturka.net/hyperend/images/nav-bar.gif);    background-position:left;    background-repeat:no-repeat; }  #main-nav li a:link, #main-nav li a:visited{    color:#FFFFFF;    text-decoration:none; } #main-nav li.active a, #main-nav li a:hover{    background-image:url(http://paylasturka.net/hyperend/images/active.gif);    background-repeat:no-repeat;    background-position:left; }

Lütfen resimleri kendi sitenize yükleyiniz...

Ve Final



Demo İçin Tıklayın...

İndirmek için Tıklayınız...

off çok güzel paylaşım için saol

Teşekkür Ederim . İşine Yaradıysa Ne Mutlu Bna

güzel paylaşım