Sanal'da Yeni Bir Yıldız Sanal-Fan

vmeni

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...

<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...
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...






Bu sayfa hakkında yorum ekle:
İsminiz:
E-mail adresiniz:
Siteniz:
Mesajın:
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=