Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj01.03.2011, 17:38 (UTC)    
Mesaj konusu: Apple.com Tarzı Menü

Apple.com Tarzı Menü harika menü saten fark etcekseniz Smile
Burayı munünü gözükmesiniz istediğiniz yere ekleyin
ALINTIDIR hibycocuk.tr.gg
Kod:
<div id="applenav">
<ul>
<li><a href="#" class="apple"><img src="http://img.webme.com/pic/h/hibycocuk/apple.png" alt="Apple" border="0" /></a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#" class="secili">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Destek</a></li>
</ul>

<div class="arama">
<input type="text" value="Arama" />
</div>
<br style="clear:both" />
</div>


Css bölüme eklenicek kod
Kod:
 #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(http://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;
}
Mesaj05.03.2011, 22:01 (UTC)    
Mesaj konusu:

güzeL...
Mesaj07.03.2011, 10:37 (UTC)    
Mesaj konusu:

Harika bir paylaşım birde

Kod:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
table {margin-left: auto;margin-right: auto}


Tamamdır Very Happy
Mesaj11.06.2011, 18:15 (UTC)    
Mesaj konusu:

calfonso yazmış:
Harika bir paylaşım birde

Kod:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
table {margin-left: auto;margin-right: auto}


Tamamdır Very Happy


Arkadaşım bu menu Very Happy bu koda ne gerek var
______________

Bedava sitem ortak çalışıcak takım arkadaşları arıyorum.
Mesaj24.06.2011, 20:49 (UTC)    
Mesaj konusu:

apple tarzı menuleri bs ye ilk tanıtam bendim şimdi biraz daha farklı versiyonlar geliştirmişler Very Happy
______________
@tr.gg dısı link yasak
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu