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 ile Content Menü Yapımı

CSS ile Content Menü Yapımı

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; }

 

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>

 

 

 

 

Bu üç parçadan oluşan resim tek bir dosyaya alt alta yerleştirilmeli...

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

 


 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...