Kapat

CSS Multi Level DropDown Menu

Css multilevel dropdown menu

 

css multilevel dropdown menu for bloggerBlogger İçin Açılır(Drop Down)
Menu

İhtiyaç üzere daha önce,birçok menü örneğini denedim .Ancak hiçbiri ihtiyacımı karşılamadı ve hata verdiler. Özellikle, alt menülere (sub menu) tıklandığında ,yeni alt menüler(alt katmanlar) gözükmüyordu. Bu gibi sebeblerden ,ihtiyaç duyulduğunda yatay içiçe açılır menü (Css multilevel drop-down menu) gereksinimini karşılayacak Css tabanlı sorunsuz bir menü örneği geliştirdim.Menülere aşağıda görüldüğü gibi geçiş efekti (css hover transition) ekledim. css multilevel dropdown menu

css multilevel dropdown menu

Yukarıda ,boş bir Html sayfasında Css multi level dropdown menu eklenmiş olduğu görülüyor. “Menu-Deneme.html” adıyla kaydettiğimiz sayfanın komple kodları şu şekildedir : css drop down menu

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS MENU SAMPLE - Menü Örneği</title>
<style type="text/css">
#AnaMenu {
width: 920px;            
height: 30px;           
position: relative;
background: #0080ff;
margin:0 0 0 -30px;
padding: 10px 0 0 15px;
border: 0;             
}
#nav { display:block;background:transparent;
margin:0;padding: 0;border: 0 }
#nav ul { float: none; display:block;
height:35px; 
margin:16px 0 0 0;border:0;
padding: 15px 0 3px 0; 
overflow: visible;
 }
#nav ul li{border:0;}
#nav li a, #nav li a:link, #nav li a:visited {height:23px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
color: #fff;                              
display: block;border:0;border-right:1px solid #efefef;text-decoration:none;
margin: 0;letter-spacing:0.6px;
padding: 2px 10px 2px 10px;             
#nav li a:hover, #nav li a:active {
color: #fff; 
margin: 0;background:#6ab5ff;border:0;
padding: 2px 10px 2px 10px;      
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #fafafa;      
width: 200px;
color: #05429b;           
float: none;
margin: 0;border-bottom:1px solid #9be6e9;
padding: 8px 15px;        
}
#nav li li a:hover, #nav li li a:active {
background: #2793ff;       
color: #fff;               
padding: 8px 15px;border:0 ;text-decoration:none}
#nav li {float: none; display: inline-block;margin: 0; padding: 0; border: 0 }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 200px; margin: 0; padding: 0;background:transparent}
#nav li ul a { width: 170px;border:0;text-decoration:none;font-size:14px } 
#nav li ul ul { margin: -40px 0 0 230px }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } 
#nav li:hover, #nav li.sfhover {position: static;}

</style>
</head>

<body>
<div id='AnaMenu'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu1</a>  
 <!—sub menu (Sub menu) için başlangıç     -->
<ul>
  <li><a href='#'>Menu1-sub menu</a></li>                 <li><a href='#'>Menu1-sub menu</a></li>                 <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li>  </ul>  
 <!—sub menu (Sub menu) bitiş     -->
</li>
<li><a href='#'>Menu2</a> </li>
<li> <a href='#'>Menu3 </a></li>
<li> <a href='#'>Menu4 </a>
<ul>
<li><a href='#'>Menu4-sub menu</a>
<ul>        <li><a href='#'>Menu4-sub -sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li> </ul>
 <li> <a href='#'>Menu4-sub menu </a></li> 
<li> <a href='#'>Menu4-sub menu </a>
<ul>        <li><a href='#'>Menu4-sub -sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li>          <li><a href='#'>Menu4-sub-sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li>

 </ul>
</li>
</ul></li>
</ul>
</div>
</body>
</html>

css multilevel dropdown menuMenü ,web sayfalarında kullanıldığı gibi özellikle blogger tabanlı blogda da kullanıma uygundur.
Blogumuza menüyü eklemek için ilk olarak menünün Css kodlarını ekleyelim ;
Blogger Tema_HTML’yi düzenle tıklayarak Html kodların olduğu sayfaya gelelim . Klavyeden Ctrl + F tuşlarına basarak ]]></b:skin> kodunu buluyoruz.
Aşağıdaki kodları , bulduğumuz ]]></b:skin> kodunun üstüne yapıştırıyoruz .

#AnaMenu {
width: 920px;              /* Menünün genişliğini ayarlayabilirsiniz. */
height: 30px;              /* Yüksekliği değiştirebilirsiniz.(menu height) */
position: relative;
background: #0080ff;
margin:0 0 0 -30px;
padding: 10px 0 0 15px;
border: 0;                   /* Çerçeve ayarı(border) */
}
#nav { display:block;background:transparent;
margin:0;padding: 0;border: 0 }
#nav ul { float: none; display:block;
height:35px; 
margin:16px 0 0 0;border:0;
padding: 15px 0 3px 0; 
overflow: visible;
 }
#nav ul li{border:0;}
#nav li a, #nav li a:link, #nav li a:visited {height:23px;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
color: #fff;                             /* Change colour of link */
display: block;border:0;border-right:1px solid #efefef;text-decoration:none;
margin: 0;letter-spacing:0.6px;
padding: 2px 10px 2px 10px;         /* Boşlukları değiştirebilirsiniz */
}
#nav li a:hover, #nav li a:active {
color: #fff;  /* Mouse linkin üstüne gelince yazı beyaz renk olur. */
margin: 0;background:#6ab5ff;border:0;
padding: 2px 10px 2px 10px;       /* Boşlukları değiştirebilirsiniz */
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #fafafa;         /* Menü açılan linklerde background color */
width: 200px;
color: #05429b;                /* Linklerin yazı rengi */
float: none;
margin: 0;border-bottom:1px solid #9be6e9;
padding: 8px 15px;           /* Boşluk miktarı */
}
#nav li li a:hover, #nav li li a:active {
background: #2793ff;       /* Açılan linklerde mouse üstüne gelince arkaplan rengi */
color: #fff;               /* Mouse link üstündeyken yazı rengi */
padding: 8px 15px;border:0 ;text-decoration:none}
#nav li {float: none; display: inline-block;margin: 0; padding: 0; border: 0 }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 200px; margin: 0; padding: 0;background:transparent}
#nav li ul a { width: 170px;border:0;text-decoration:none;font-size:14px } 
#nav li ul ul { margin: -40px 0 0 230px }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } 
#nav li:hover, #nav li.sfhover {position: static;}

css içiçe açılır menü Yukarıdaki Css kodların yanındaki yeşil renkli yazılar ,açıklama satırlarıdır.Örneğin; menünün temel genişliği width: 920px;  kodları ile, yüksekliği height: 30px;  kodları ile belirlenmiştir.Kendi şablonunuza göre gerekli değişiklikleri yapabilirsiniz.
Menünün görsel yönünü güzelleştirme amacıyla, menü linklerinin arkaplan rengini değişimini sağlayan geçiş efekti(Css hover transition) kullandım. css hover transition

#nav li a, #nav li a:link, #nav li a:visited {
...
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
...
}

Sağ alt köşede Kaydet butonuna basarak düzenlememizi kaydedelim.

 İkinci aşama olarak , Html kodları Gadget’e eklemek için ;
 Blogger kullanıcı panelinde Düzen (eski adı ile Yerleşim) sekmesine tıklıyoruz. Gadget ekleme sayfası açıldığında , menüyü eklemek istediğimiz alan için ,o alandaki “Gadget Ekle” ye tıklayalım(ben Çapraz Sütun alanına açılır menü eklemek istediğim için oradaki Gadget Ekle’ye tıkladım).blogger gadget
Açılan pencerede İçerik kısmına aşağıdaki menümüzün kodlarını yapıştıralım ve kaydedelim.

<div id='AnaMenu'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu1</a>  
 <!—sub menu (Sub menu) için başlangıç     -->
<ul>
  <li><a href='#'>Menu1-sub menu</a></li>                 <li><a href='#'>Menu1-sub menu</a></li>                 <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li> <li><a href='#'>Menu1-sub menu</a></li>  </ul>  
 <!—sub menu (Sub menu) bitiş     -->
</li>
<li><a href='#'>Menu2</a> </li>
<li> <a href='#'>Menu3 </a></li>
<li> <a href='#'>Menu4 </a>
<ul>
<li><a href='#'>Menu4-sub menu</a>
<ul>      <li><a href='#'>Menu4-sub -sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li> </ul>
 <li> <a href='#'>Menu4-sub menu </a></li> 
<li> <a href='#'>Menu4-sub menu </a>
<ul>       <li><a href='#'>Menu4-sub -sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li>          <li><a href='#'>Menu4-sub-sub menu</a></li>
          <li><a href='#'>Menu4-sub-sub menu</a></li>

 </ul>
</li>
</ul></li>
</ul>
</div>

Multi level açılır menünün blogger a eklenmiş halini görüyoruz : css drop down menu

İstediğiniz şekilde ,yeni menü öğeleri veya alt menü öğeleri ekleyebilirsiniz ,çıkarabilirsiniz. Kodlardaki ‘#’ işareti yerine kendi link adresinizi yazmanız gerekir. <a href=’#’> bu şekilde kalırsa linke tıklandığında herhangi bir işlem yapılmaz.

📥 Css Multi Level Drop Down Menu kodları buradan indirilebilir.