Açılır Menü-Blogger Drop-Down Menü-2

Blog yazarlarının en çok istediği, okuyucularının yazılarına kolay ve kısa yoldan ulaşabilmesini sağlamak.Siteler üzerinde yapılan araştırmalarda da en çok dikkat çeken ve tıklanma oranı en yüksek olan bölgeler sağ-sol kenar çubukları ve üst taraftaki linklerdir.Üst tarafa daha fazla sayıda link eklemek ve site içeriklerinize erişim kolaylığı için mutlaka açılır menüyü kullanmak gerekir.

Daha önceden farklı bir drop down  açılır menü örneğini sizlere sunmuştuk.Önceki açılır menü örneği daha sade ve eklemesi buna göre biraz daha zordu.Şimdiki drop-down açılır menü eklentisinde ise biraz efekt ve renk verip daha profesyonel bir görünüme kavuşturup, eklemesini daha basit hale getirip drop down açılır menüyü sizlerin kullanımına sunuyoruz.
DEMO GÖRÜNÜM Drop down Açılır Menüyü Blogunuza Eklemek İçin:
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript  yolunu takip ediyoruz aşşağıdaki kodu kopyalayıp açılan gadgetin içine yapıştırıyoruz.

<!-- Start Drop Down Menu Code From http://www.blogokulu.blogspot.com/ --><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", 
 orientation: 'h', 
 classname: 'ddsmoothmenu', 
 
 contentsource: "markup" 
})
</script>

<style> 
.ddsmoothmenu {
    width: 100%;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
    vertical-align: middle;
    height: 33px;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
}

.ddsmoothmenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
}

.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #666666;
    text-decoration: none;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
}

* html .ddsmoothmenu ul li a {
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    background: black;
    color: white;
}

.ddsmoothmenu ul li a:hover {
    background: black;
    color: white;
}

.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
}

.ddsmoothmenu ul li ul li ul {
    top: 0;
}

.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

* html .ddsmoothmenu {
    height: 1%;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
}

.toplevelshadow {
    opacity: 0.8;
} 
</style>  

<div id="smoothmenu1" class="ddsmoothmenu">
     <ul>
        <li>
            <a href="http://blogokulu.blogspot.com/">Ana Sayfa</a>
        </li>
        <li>
            <a href="#">Dosya 0</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 1.1</a>
                </li>
                <li>
                    <a href="#">Alt Dosya 1.2</a>
                </li>
<li><a href='#'>Alt Dosya 1.3</a>
<ul class='children'>
<li><a href='#'>Alt Dosya 1.3.1</a></li>
<li><a href='#'>Alt Dosya 1.3.2</a></li>
<li><a href='#'>Alt Dosya 1.3.3</a>
<ul class='children'>
<li><a href='#'>Alt Dosya 1.3.3-1</a>
<li><a href='#'>Alt Dosya 1.3.3-2</a>
<li><a href='#'>Alt Dosya 1.3.3-3</a>
</li>
</li></li></ul>
</li>
</ul>
</li>
            </ul>
        </li>
        <li>
            <a href="#">Dosya 1</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 1.1</a>
                </li>
                <li>
                    <a href="#">Alt Dosya 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="www.blogokulu.blogspot.com">Blog Okulu</a>
        </li>
        <li>
            <a href="#">Dosya 2</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.blogokulu.blogspot.com/">Sitene Ekle</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>
<!-- End Drop Down Menu Code From http://www.blogokulu.blogspot.com/ -->

Kod içerisinde kırmızı renkli yerlere linkleri, mavi renkli yerlere de menüde görünmesini istediğiniz ismi yazın.Gatgeti kaydedip başlığın altına yada blog kayıtlarının üzerine sürükleyip bırakıyoruz.

acilir menu , blogger eklentileri , blogger widget , drop down menu , jquery acilir menu , menu ornekleri

PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

• 
• 
• 
• 
•