- VistaMenü

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

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

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; }

Hyperend Den Alıntıdır !

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

Ve Final

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

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