27YirmiYedi Servis

Apple.Com Tarzi Menu

NOT:BU KODU SAYFALARINIZA YAPIŞTIRDIĞINIZDA KODDA HATALAR OLUŞABİLİR.

Kod
<div id="applenav"> <ul> <li><a href="#" _fcksavedurl="#" class="apple"><img src="https://img.webme.com/pic/h/hibycocuk/apple.png" _fcksavedurl="https://img.webme.com/pic/h/hibycocuk/apple.png" alt="Apple" border="0" /></a></li> <li><a href="#" _fcksavedurl="#">Mac</a></li> <li><a href="#" _fcksavedurl="#">iPod</a></li> <li><a href="#" _fcksavedurl="#">iPhone</a></li> <li><a href="#" _fcksavedurl="#" class="secili">iPad</a></li> <li><a href="#" _fcksavedurl="#">iTunes</a></li> <li><a href="#" _fcksavedurl="#">Destek</a></li> </ul> <div class="arama"> <input type="text" value="Arama" /> </div> <br style="clear:both" /> </div>
CSS KODU:
#applenav { padding:0px 0px 0px 0px; background:#cacaca; -moz-border-radius:4px; /* Mozilla için köşelerimizi yuvarlayalım */ -webkit-border-radius:4px; /* Şimdi de Chrome ve Safari için köşeleri yuvarlayalım */ background-image: -moz-linear-gradient(90deg, #848484, #cacaca); /* Mozilla için Linear Gradient kodumuzu yazdık! */ background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); /* Chrome ve Safari için Linear Gradient kodumuzu yazdık! */ } /* Menümüzün ul ve li etiketlerini tanımlıyoruz... */ #applenav ul, #applenav li {list-style:none;margin:0;padding:0;} /* Şimdi menü bağlantılarımızı tanımlamaya başlıyoruz... */ #applenav a { font:bold 12px/36px arial, verdana, sans-serif; text-decoration:none; display:block; float:left; width:100px; height:36px; color:#252525; background:#cacaca; background-image: -moz-linear-gradient(90deg, #848484, #cacaca); /* Menü birimlerindeki Gradienti tanımladık! */ background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); /* Chrome ve Safari'yi unutmadık */ text-shadow:0px 1px 1px #ddd; /* Biraz gölge ekleyelim */ border-right:1px solid #959595; text-align:center; } #applenav a:hover { font:bold 12px/36px arial, verdana, sans-serif; text-decoration:none; display:block; float:left; width:100px; height:36px; color:#fff; background:#cacaca; background-image: -moz-linear-gradient(90deg, #555, #909090); /* Menü hover içindeyken değişen gradientimiz... */ background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#555)); text-shadow:0px 0px 0px #ddd; border-right:1px solid #909090; text-align:center; } #applenav a.apple { -moz-border-radius:4px 0px 0px 4px; -webkit-border-radius:4px 0px 0px 4px; text-decoration:none; display:block; float:left; width:100px; color:#fff; background:#cacaca; background-image: -moz-linear-gradient(90deg, #848484, #cacaca); background-image: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484)); text-shadow:0px 0px 0px #ddd; border-right:1px solid #909090; text-align:center; } #applenav a.apple:hover { font:bold 12px/36px arial, verdana, sans-serif; text-decoration:none; display:block; float:left; width:100px; height:36px; color:#fff; background:#cacaca; background-image: -moz-linear-gradient(90deg, #555, #909090); background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#555)); text-shadow:0px 0px 0px #ddd; border-right:1px solid #909090; text-align:center; } #applenav a.secili { text-decoration:none; display:block; float:left; width:100px; color:#fff; background:#cacaca; background-image: -moz-linear-gradient(90deg, #525252, #333); background-image: -webkit-gradient(linear, left top, left bottom, from(#525252), to(#333)); text-shadow:0px 0px 0px #ddd; border-right:1px solid #909090; text-align:center; } /* ARAMA ALANIMIZIN KODLARINI YAZIYORUZ */ #applenav .apple img {border:0px;} #applenav .arama {float:left; display:block; width:140px;line-height:32px;margin-left:10px} #applenav .arama input { background:#fff url(https://img.webme.com/pic/h/hibycocuk/arama.png) no-repeat left center; -moz-border-radius:8px; -webkit-border-radius:8px; border:1px solid #999; width:120px; font:11px arial, verdana, sans-serif; padding:2px 2px 2px 20px; color:#999; }