Mnünün

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

ALINTIDIR ALDIGIM YERE COK TESEKUR EDEERIM