Blogger CSS3 İle Tasarlanmış Siyah Açılır Menü Yapımı

   Blogger HTML veya CSS3 ile tasarlamış Blogger Menü Kodları kategorisinde farklı menüleri sizinle paylaştık.Şimdi bu menüyü blogger sitenizde kullandığınız temaya göre editleyerek istediğiniz biçimde kullanabilirsiniz.

   Ayrıca ana menülere ait alt açılır menüleri kaldırarak da sade düz menü elde edebilirsiniz veya tam dersini yaparak açılır menüleri blogger etiketlerinizin sayısı kadar artırarak kullanabilirsiniz.

   Blogger CSS3 İle Tasarlanmış Siyah Açılır Menü Yapımı Blogger sitenize Gadget ekle / HTML/Javascript yolu ile kolayca ekleyebilirsiniz ve blogger başlık gadgeti altına sürükleyerek bırakın.

   Kod içerisinde # işareti yerine menü başlıklarınıza ait linkleri ekleyecek olduğunuz kısımdır.Menüye ait renkleri değiştirecek olduğunuz kısım kodun ilk sıralarında ki renk kodlarıdır.Renk kodlarını belirtmedim artık nasıl yapıldığını tahmin ediyorum yapamayanlar yorum yaparak yardım alabilir.

<style> /*-----Blogger CSS3 Açılır Menu Yapma Eklentisi SEO Mektebi----*/ #bt-menu, #bt-menu ul { margin: 0; padding: 0; list-style: none; } #bt-menu { width: 960px; margin: 60px auto; background: #DADFE1; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0 1px 1px #777; -webkit-box-shadow: 0 1px 1px #777; box-shadow: 0 1px 1px #777; } #bt-menu:before, #bt-menu:after { content: ""; display: table; } #bt-menu:after { clear: both; } #bt-menu { zoom:1; } #bt-menu li { float: left; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #bt-menu a { float: left; padding: 12px 30px; color: #000000; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 0px 0 #000; } #bt-menu li:hover > a { background: #333333; color: #fafafa; } *html #bt-menu li a:hover { /* IE6 only */ color: #333333; } #bt-menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #DADFE1 url('images/pageglare.png') no-repeat scroll; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #bt-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #bt-menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #bt-menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #bt-menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #bt-menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #bt-menu ul a:hover { background-color: #333333; } #bt-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #bt-menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #333333; } #bt-menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #333333; } #bt-menu ul li:first-child a:hover:after { border-bottom-color: #DADFE1; } #bt-menu ul ul li:first-child a:hover:after { border-right-color: #DADFE1; border-bottom-color: transparent; } #bt-menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> <ul id="bt-menu"><li><a href="#">Home</a></li><li> <a href="#">Categories</a> <ul><li><a href="#">CSS</a></li><li><a href="#">HTML</a></li><li><a href="#">Jquery</a></li><li><a href="#">Blogger Tips</a></li></ul></li><li><a href="#">Free Vector</a> <ul><li><a href="#">Social Icon</a></li><li><a href="#">Website Icon</a></li></ul></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li><li><a href="#">Tools</a> <ul><li><a href="#">Parser Tool</a></li><li><a href="#">Escape Tool</a></li></ul></li></ul>


Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!