CSS ile Content Menü Yapımı
İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı
Menün Örnek görünümleri:
CSS Kodları:
.menu_div * { list-style: none; margin:0 0 0 0; padding:0; cursor:default; }
.menu_div a { margin:10px; padding: 5px; text-decoration: none; color: #555555; }
.menu_div>ul { float: left; }
.menu_div ul li { }
.menu_div ul li > div { display:none; }
.menu_div ul li:hover > div { display:block; }
/*.menu_div ul li a:hover > div { display:block; }
.menu_div ul li div:hover { display:block; }*/
.menu_div ul li ul { padding:10px 5px; }
.menu_div a { margin:10px; padding: 5px; text-decoration: none; color: #555555; }
.menu_div>ul { float: left; }
.menu_div ul li { }
.menu_div ul li > div { display:none; }
.menu_div ul li:hover > div { display:block; }
/*.menu_div ul li a:hover > div { display:block; }
.menu_div ul li div:hover { display:block; }*/
.menu_div ul li ul { padding:10px 5px; }
HTML Kodları:
<div class="menu_div" style="position: absolute; z-index: 500; margin-top:15px;">
<ul>
<li>
<a href="{anamenu_link}" class="ana_menu">{anamenu_ad}</a>
<div style="clear:both; overflow:hidden; margin:24px auto;">
<div><!--menu ust-->
<div class="menu" style="background-attachment: scroll; background-position: 0 -5px"><!--sol kose-->
<div class="menu" style="background-attachment: scroll; background-position: 100% -275px; padding: 0 8px;"><!--sag kose-->
<div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -545px; height: 8px"><!--ust orta-->
</div>
</div>
</div>
</div>
<div><!--menu orta-->
<div class="menu" style="background-attachment: scroll; background-position: 0 -10px"><!--sol kose-->
<div class="menu" style="background-attachment: scroll; background-position: 100% -280px; padding: 0 8px;"><!--sag kose-->
<div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -549px;"><!--orta orta-->
<ul>
<!--AB: AltMenuler-->
<li><a href="{altmenu_link}">{altmenu_baslik}</a></li>
<!--AS: AltMenuler-->
</ul>
</div>
</div>
</div>
</div>
<div><!--menu alt-->
<div class="menu" style="background-attachment: scroll; background-position: 0 -260px"><!--sol kose-->
<div class="menu" style="background-attachment: scroll; background-position: 100% -530px; padding: 0 8px;"><!--sag kose-->
<div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -800px; height: 10px"><!--ust orta-->
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<ul>
<li>
<a href="{anamenu_link}" class="ana_menu">{anamenu_ad}</a>
<div style="clear:both; overflow:hidden; margin:24px auto;">
<div><!--menu ust-->
<div class="menu" style="background-attachment: scroll; background-position: 0 -5px"><!--sol kose-->
<div class="menu" style="background-attachment: scroll; background-position: 100% -275px; padding: 0 8px;"><!--sag kose-->
<div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -545px; height: 8px"><!--ust orta-->
</div>
</div>
</div>
</div>
<div><!--menu orta-->
<div class="menu" style="background-attachment: scroll; background-position: 0 -10px"><!--sol kose-->
<div class="menu" style="background-attachment: scroll; background-position: 100% -280px; padding: 0 8px;"><!--sag kose-->
<div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -549px;"><!--orta orta-->
<ul>
<!--AB: AltMenuler-->
<li><a href="{altmenu_link}">{altmenu_baslik}</a></li>
<!--AS: AltMenuler-->
</ul>
</div>
</div>
</div>
</div>
<div><!--menu alt-->
<div class="menu" style="background-attachment: scroll; background-position: 0 -260px"><!--sol kose-->
<div class="menu" style="background-attachment: scroll; background-position: 100% -530px; padding: 0 8px;"><!--sag kose-->
<div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -800px; height: 10px"><!--ust orta-->
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Bu üç parçadan oluşan resim tek bir dosyaya alt alta yerleştirilmeli...
|
|
Yorumunuzu Ekleyin