Hareketli Drop Down CSS3 Menü Eklentisi

Hareketli Drop Down CSS3 Menü Eklentisi

 

Blogger için biraz fazla ara verip menü eklentisi hiç paylaşmamıştım ama artık menüler üzerinde yoğunlaşmayı düşünüyorum ve ilk olarak Hareketli Drop Down CSS3 Menü ile başlıyorum.Menü özelliği demodada görüceğiniz gibi sade iki renkten oluşuyor ve sekmeler oldukça şık ve güzel bir menü eklentisi olduğunu gösteritor. 

Blogger Paneline, giriyoruz daha sonra Şablon bölümünü seçiyoruz oradan HTML Düzenle diyoruz

Daha sonra  CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları üstüne yerleştiriyoruz.

#cssmenu ul { margin: 0; padding: 0;} #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} #cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} #cssmenu > ul > li { float: left; margin-left: 15px; position: relative; z-index:9999999; } #cssmenu > ul > li > a { color: rgb(160,160,160); font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s; } #cssmenu > ul > li > a:hover {color: rgb(250,250,250); } #cssmenu > ul > li > ul { opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu > ul > li:hover > ul { opacity: 1; top: 65px; visibility: visible; } #cssmenu > ul > li > ul:before{ content: ''; display: block; border-color: transparent transparent rgb(250,250,250) transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px; } #cssmenu > ul ul > li { position: relative;} #cssmenu ul ul a{ color: rgb(50,50,50); font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: rgb(250,250,250); padding: 5px 8px 7px 16px; display: block; -webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; transition: background-color .1s; } #cssmenu ul ul a:hover {background-color: rgb(240,240,240);} #cssmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; width: 160px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} #cssmenu ul ul a:hover{ background-color: rgb(205,44,36); color: rgb(240,240,240);

ve son adımlara doğru devam ediyoruz Şablon kısmının üstündeki Yerleşim tıklıyoruz sağ taraftan Gatget Ekle diyoruz ve HTML/JavaScript eklentisini tıklıyoruz ve aşağıdaki kodları içersine yerleştirip Kaydet diyoruz.

<div id='cssmenu'> <ul> <li class='active'><a href='/'><span>Ana Sayfa</span></a></li> <li class='has-sub'><a href='#'><span>Blogger</span></a> <ul> <li class='has-sub'><a href='#'><span>Eklentiler</span></a> <ul> <li><a href='#'><span>Facebook</span></a></li> <li class='last'><a href='#'><span>Twitter</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>TemalarPlus</span></a> <ul> <li><a href='#'><span>Blogger Temaları</span></a></li> <li class='last'><a href='#'><span>WP Temaları</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>Arşiv</span></a></li> <li class='last'><a href='#'><span>İletişim</span></a></li> </ul> </div>

Yukarıdaki kod içersinde bulunan # yerine bağlantı vereceğiniz linki ekleyeceksiniz.