Yatay Css Menüler

[AdmiN]

Media adında bir klasör açıp resimleri içine yükleyin.Aşağıdaki css kodları ile menü kodlarını sitenizde menünün görünmesini istediğiniz yere ekleyin.


Menü resimleri

Kırmızı Tema (3 resim)    

Mavi Tema (3 resim)    

Yeşil Tema (3 resim)    

Turuncu Tema (3 resim)    

Mor Tema (3 resim)    


Css Dosyası

Kod: [Seç]

<style type="text/css">
 
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>


Sitenize ekleyeceğiniz html kodu

Kod: [Seç]

<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>
</ul>

NOT: Eğer resimler görünmüyorsa, menü resimlerini aşağıdaki örnek adresten alabilirsiniz.
Kaynak ve Menü Örneği için tıklayın

[Uygewliqt]

Mkportal sitemde ana sayfada navigasyon menü olarak ayarlamak istiyorum bunu, ne yapmalıyım?

[AdmiN]

Kullandığın temaya, linklerin görüneceği kısma yukardaki kodları ekle.Kodlardaki media klasör isimlerini images olarak değiştirip resimleri temadaki images klasörüne yükle.

[Ozgur Hicyilmaz]

Resim adresilerini tam yol bildirin ve tırnak içinde yazın.