Hayalimdeki Site
Tek Sütun
3. Adım: Menü oluşturmak
TR.GG'de bir CSS tasarım yaparken kullanıcıların en çok zorlandığı yerin menü olduğu çoğu kez tarafıma iletildi. CSS menü yapmak için benim sizlere tavsiyem bu hizmeti veren siteleri kullanmak. Oturup sıfırdan kod yazmak yerine, hazır kodları kendinize göre değiştirebilirsiniz. Hazır menüler için aşağıdaki siteleri ziyaret edebilirsiniz.
1.
http://www.dynamicdrive.com/style/2.
http://alvit.de/css-showcase/css-navigation-techniques-showcase.php3.
http://www.cssmenumaker.com/horizontal_css_menu.php4.
http://www.bilgiservisim.com/css-menu-generator-31/ (İlgili linkte ücretsiz olarak programı indirebilirsiniz. Programla basit CSS menüler oluşturulabiliyor.)
Eğer elinizde hazır menünüz varsa bunu sitenize direkt olarak uygulayabilirsiniz. Ben bu örneğimiz için bu sayfadaki menüyü sitemize uygulayacağım.
• Menüdeki resimleri kendi siteme yükledim.
• CSS kodundaki style etiketlerini kaldırarak kendi sitemdeki CSS kodu kısmına yapıştırdım.
• Son olarak menümüz için bir katman oluşturalım. Menüyü bu katman içerisine koyacağız.
#sitemenum{
width:845px;
}
Uyguladığımız menüyü bu katman arasına yerleştirdim.
<div id="sitemenum">
<div class="animatedtabs">
<ul>
<li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İçerik Kısmı</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Menüyü Yapmak</span></a></li>
</ul>
</div>
</div>
Eğer şu an sitemizde olduğu gibi menüyü sayfalar yukarı aşağı kaydıkça sabit olarak görmek istiyorsak menü katmanına position: fixed eklemek yeterli.
#sitemenum{
width:845px;
position: fixed;
}
Bu haliyle sitemizin görünümü buradaki gibi olacak.
Eğer menünün nasıl sabit durduğunu görmek isterseniz burayı tıklayınız...
***Katmanların renklerine dikkat edin. Bir sonraki sayfada resmi inceleyin***
TASARIM ÜZERİNDEKİ YAZI<div id="tasarim">
<div id="baslik"></div>
<div id="sitemenum">
<div class="animatedtabs">
<ul>
<li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İçerik Kısmı</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Menüyü Yapmak</span></a></li>
</ul>
</div>
</div>
<div id="ust"></div>
<div id="orta">
TASARIM ALTINDAKİ YAZI</div>
<div id="alt"></div>
</div>
CSS KODUh1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
* { padding: 0; margin: 0; }
body { font-family: Arial;
font-size: 12px;
background: url(http://img.webme.com/pic/h/hackerfriend/hayalimarkaplan.jpg) top center fixed;
}
#tasarim {
margin: 0 auto;
width: 900px
}
#baslik {
width: 845px;
height: 150px;
background: url(http://img.webme.com/pic/h/hackerfriend/hayalimbaslik.jpg);
border: 3px solid #4699C3;
}
#ust {
width:845px;
height:131px;
background: url(http://img.webme.com/pic/h/hackerfriend/ustsablon.png);
margin: 50px 0 0 0;
}
#orta {
width:795px;
background: url(http://img.webme.com/pic/h/hackerfriend/ortasablon.png);
padding: 0 25px 0 25px;
}
#alt {
width:845px;
height:131px;
background: url(http://img.webme.com/pic/h/hackerfriend/altsablon.png);
float: left;
}
/*Eğer Menüyü sabitlemek isterseniz position:fixed; kodunu katmana eklemeniz yeterli.*/
#sitemenum {
width:845px;
}
/* Menü kodu burada başlıyor*/
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://img.webme.com/pic/h/hackerfriend/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://img.webme.com/pic/h/hackerfriend/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
Sonucunu Görmek İstiorsanız Tık.
#http://hackerfriend.tr.gg/onelayout07.htm