Css Drop Down Menü Örneği - Bilişim Konuları

Css Drop Down Menü Örneği

Sadece CSS Kodlarıyla yapılmış Drop Down Menü Örneği

Web sayfalarında yatay menü olarak kullanabilecek güzel bir örnek.

Küçük boyutlu az ve temiz kod örneği
Küçük boyutlu resim dosyaları
Sayfaya göre şekillenebilme (yatay olarak bulunduğu çerçeveye tamamen sığma durumu.)
Sadece CSS Kodlarıyla oluşturulmuş.

CSS Kodu:

ul#navigation-1
    { margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
    { margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
    { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
    { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
    
ul#navigation-1 li ul.navigation-2
    { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
    { display:block; }
ul#navigation-1 li ul.navigation-2 li
    { width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
    { clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
    { clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
    { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
    { display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
    { background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
    { background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
    { position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
    { position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

HTML Kodu:

<ul>
<ul>
 	<li><a title="Home" href="#">Ana Sayfa</a></li>
</ul>
</ul>
&nbsp;
<ul>
 	<li><a title="Products" href="#">Ürünler</a>
<ul class="navigation-2">
<ul class="navigation-2">
 	<li><a title="Electric Guitars" href="#">Ürünü Grubu</a></li>
</ul>
</ul>
&nbsp;</li>
 	<li><a title="Acoustic Guitars" href="#">Ürünü Grubu »</a>
<ul class="navigation-3">
<ul class="navigation-3">
 	<li><a title="Six String" href="#">Alt Ürün Grubu</a></li>
</ul>
</ul>
&nbsp;</li>
 	<li><a title="Twelve String" href="#">Alt Ürün Grubu</a></li>
 	<li><a title="Bass Guitars" href="#">Ürünü Grubu</a></li>
 	<li><a title="Accessories" href="#">Ürünü Grubu»</a>
<ul class="navigation-3">
<ul class="navigation-3">
 	<li><a title="Guitar Stands" href="#">Alt Ürün Grubu</a></li>
</ul>
</ul>
&nbsp;</li>
 	<li><a title="Strings" href="#">Alt Ürün Grubu</a></li>
 	<li><a title="Tuners" href="#">Alt Ürün Grubu</a></li>
 	<li><a title="Plectrums" href="#">Alt Ürün Grubu</a></li>
 	<li><a title="Capos" href="#">Alt Ürün Grubu</a></li>
 	<li><a title="Cases" href="#">Alt Ürün Grubu</a></li>
 	<li><a title="Straps" href="#">Alt Ürün Grubu</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a title="Your Account" href="#">Hesaplar</a>
<ul class="navigation-2">
<ul class="navigation-2">
 	<li><a title="Log In" href="#">Giriş</a></li>
</ul>
</ul>
&nbsp;</li>
 	<li><a title="Register" href="#">Kayıt</a></li>
</ul>
&nbsp;

&nbsp;
<ul>
 	<li><a title="Help" href="#">Yardım</a>
<ul class="navigation-2">
<ul class="navigation-2">
 	<li><a title="FAQs" href="#">S.S.S.</a></li>
</ul>
</ul>
&nbsp;</li>
 	<li><a title="Forum" href="#">Forum</a></li>
 	<li><a title="Contact Us" href="#">İletişim</a></li>
</ul>

 

 

Bu Yazıya Tepkin Nedir?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Yorum Yap