Blogger için CSS Açılır Menü Eklentisi

Bildiğiniz gibi, insanlar için her zaman benzersiz olan bir şeyi sunmaya çalıştım. Bugün alt menülerle yeni ve güzel bir Css Açılır menüsünü paylaşacağım. Gerçekten çok güzel ve harika görünüyor ve Ziyaretçiler çekici. Bu harika açılır menüyü kullanarak ziyaretçilerinize ilham verebilir. Blogunuza veya web sitenize kurulumu çok kolaydır. Css tasarlanmış menüdür. Yedi menü sekmesinden oluşur, diğerleri sekmeleri ise düz menüler iken iki sekme açılır. Bu mod ve ihtiyaç içine özelleştirilebilir.

Aşağıda ki CSS kodlarını Html kod şablon editör sayfamızda ]]></b:skin> kodunu bulalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki kodları ekleyelim.

CSS#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
#menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c7093e;}
#menu li:hover {position:relative; z-index:200;}
#menu li:hover > a {color:#fff; background:#c7093e;}
#menu li:hover > a.sub {color:#fff; background-color:#c7093e;}
#menu li.current a {color:#fff; background:#c7093e;}
#menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;}
#menu li.current a.sub {color:#fff; background:#c7093e url(down-arrow.gif) no-repeat right center;;}
#menu :hover ul {left:0; top:40px; width:120px; background:#444;}
/* keep the 'next' level invisible by placing it off screen. */
#menu ul,
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#menu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
#menu :hover ul li {margin:0; border-top:1px solid #666;}
#menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
#menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;}
#menu :hover ul :hover {background-color:#c7093e; color:#fff;}
#menu :hover ul :hover a.fly {background-color:#c7093e; color:#fff;}
#menu :hover ul li.currentsub a {background:#c7093e; color:#fff;}
#menu :hover ul li.currentsub a.fly {background:#c7093e url(right-arrow.gif) no-repeat right center; color:#fff;}
#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
#menu :hover ul :hover ul :hover {background-color:#c7093e; color:#fff;}
#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#c7093e; color:#fff;}

Şimdi sıra geldi Açılır Menü'ye ait Html kodlarına sıra bu kodları menü nerede görünmesini istiyorsanız oraya ekleyebilirsiniz.

HTML<ul id="menu">
  <li><a href="single.html"><b>Single Level</b></a></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
     <li><a href="#url">Dropdown 2.1</a></li>
     <li><a href="#url">Dropdown 2.2</a></li>
     <li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
     <li><a href="#url">Dropdown 2.4</a></li>
     <li><a href="#url">Dropdown 2.5</a></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#url">Dropdown three</a></li>
   <li><a href="#url">Dropdown four</a></li>
   <li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
     <li><a href="#url">Dropdown 5.1</a></li>
     <li><a href="#url">Dropdown 2.2</a></li>
     <li><a href="#url">Dropdown 3.3</a></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul>
   <li><a href="#url">Dropline one</a></li>
   <li><a href="#url">Dropline two</a></li>
   <li><a href="#url">Dropline three</a></li>
   <li><a href="#url">Dropline four</a></li>
   <li><a href="#url">Dropline five</a></li>
   <li><a href="#url">Dropline six</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul>
   <li><a href="#url">Flyout one</a></li>
   <li><a href="#url">Flyout two</a></li>
   <li><a href="#url">Flyout three</a></li>
   <li><a href="#url">Flyout four</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li id="support"><a href="support.html"><b>Support</b></a></li>
 <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>

Bütün işlemler bu kadar herkese kolay gelsin.