Bloggerda Header Altına Dropdawn ( Açılır) Menü Nasıl Yapılır


<\/o:p><\/div>
/*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/<\/o:p><\/div>

<\/div>
#mbt-menu, #mbt-menu ul {<\/o:p><\/div>
margin: 0;<\/o:p><\/div>
padding: 0;<\/o:p><\/div>
list-style: none;<\/o:p><\/div>

<\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu {<\/o:p><\/div>
overflow:visible;<\/o:p><\/div>
width: 1020px;<\/span><\/o:p><\/div>
background-color: transparent;<\/o:p><\/div>
background-image: -moz-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));<\/o:p><\/div>
background-image: -webkit-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: -o-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: -ms-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: linear-gradient(#fff, #fff);<\/o:p><\/div>

<\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu:before,<\/o:p><\/div>

<\/div>
#mbt-menu:after {<\/o:p><\/div>
content: "";<\/o:p><\/div>
display: table;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu:after {<\/o:p><\/div>
clear: both;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu {<\/o:p><\/div>
zoom:1;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu li {<\/o:p><\/div>
float: center;<\/o:p><\/div>

<\/div>

<\/div>
position: relative;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu a {<\/o:p><\/div>
float: center;<\/o:p><\/div>
padding: 14px 20px;<\/o:p><\/div>
color: #333; YAZI RENGİ<\/span><\/o:p><\/div>
text-transform: uppercase;<\/o:p><\/div>
font: normal 14px PT Sans Narrow;<\/o:p><\/div>
text-decoration: none; <\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu li:hover > a {<\/o:p><\/div>
color: #ff6699; LİNK RENGİ<\/span><\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
*html #mbt-menu li a:hover { /* IE6 only */<\/o:p><\/div>
color: #ff6699; LİNK RENGİ<\/span><\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul {<\/o:p><\/div>
margin: 0px 0 0 0;<\/o:p><\/div>
_margin: 0; /*IE6 only*/<\/o:p><\/div>
opacity: 0;<\/o:p><\/div>
visibility: hidden;<\/o:p><\/div>
position: absolute;<\/o:p><\/div>
top: 38px;<\/o:p><\/div>
left: 0;<\/o:p><\/div>
z-index: 9999;<\/o:p><\/div>
background: #fff;<\/o:p><\/div>
background: -moz-linear-gradient(#fff, #fff);<\/o:p><\/div>
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #fff));<\/o:p><\/div>
background: -webkit-linear-gradient(#fff, #fff);<\/o:p><\/div>
background: -o-linear-gradient(#fff, #fff);<\/o:p><\/div>
background: -ms-linear-gradient(#fff, #fff);<\/o:p><\/div>
background: linear-gradient(#fff, #fff);<\/o:p><\/div>

<\/div>
-moz-border-radius: 3px;<\/o:p><\/div>
-webkit-border-radius: 3px;<\/o:p><\/div>
border-radius: 3px;<\/o:p><\/div>
-webkit-transition: all .2s ease-in-out;<\/o:p><\/div>
-moz-transition: all .2s ease-in-out;<\/o:p><\/div>
-ms-transition: all .2s ease-in-out;<\/o:p><\/div>
-o-transition: all .2s ease-in-out;<\/o:p><\/div>
transition: all .2s ease-in-out;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu li:hover > ul {<\/o:p><\/div>
opacity: 1;<\/o:p><\/div>
visibility: visible;<\/o:p><\/div>
margin: 0;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul ul {<\/o:p><\/div>
top: 0;<\/o:p><\/div>
left: 150px;<\/o:p><\/div>
margin: 0 0 0 20px;<\/o:p><\/div>
_margin: 0; /*IE6 only*/ <\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul li {<\/o:p><\/div>
float: none;<\/o:p><\/div>
display: block;<\/o:p><\/div>
border: 0;<\/o:p><\/div>
_line-height: 0; /*IE6 only*/ <\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul li:last-child { <\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul a {<\/o:p><\/div>
padding: 10px;<\/o:p><\/div>
width: 190px;<\/o:p><\/div>
_height: 10px; /*IE6 only*/<\/o:p><\/div>
display: block;<\/o:p><\/div>
white-space: nowrap;<\/o:p><\/div>
float: none;<\/o:p><\/div>
text-transform: none;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul a:hover {<\/o:p><\/div>
background-color: #fff;<\/o:p><\/div>
background-image: -moz-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));<\/o:p><\/div>
background-image: -webkit-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: -o-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: -ms-linear-gradient(#fff, #fff);<\/o:p><\/div>
background-image: linear-gradient(#fff, #fff);<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul li:first-child > a {<\/o:p><\/div>

<\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul li:first-child > a:after {<\/o:p><\/div>
content: '';<\/o:p><\/div>
position: absolute;<\/o:p><\/div>
left: 0px;<\/o:p><\/div>
top: -6px;<\/o:p><\/div>
border-left: 6px solid transparent;<\/o:p><\/div>
border-right: 6px solid transparent;<\/o:p><\/div>
border-bottom: 6px solid #000;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul ul li:first-child a:after {<\/o:p><\/div>
left: -6px;<\/o:p><\/div>
top: 50%;<\/o:p><\/div>
margin-top: -6px;<\/o:p><\/div>
border-left: 0;<\/o:p><\/div>
border-bottom: 6px solid transparent;<\/o:p><\/div>
border-top: 6px solid transparent;<\/o:p><\/div>
border-right: 6px solid #fff;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul li:first-child a:hover:after {<\/o:p><\/div>
border-bottom-color: #000;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul ul li:first-child a:hover:after {<\/o:p><\/div>
border-right-color: #fff;<\/o:p><\/div>
border-bottom-color: transparent;<\/o:p><\/div>
}<\/o:p><\/div>

<\/div>
#mbt-menu ul li:last-child > a {<\/o:p><\/div>

<\/div>
}<\/o:p><\/div>

Merhabalar dostlar..
Bu gece mübarek Kadir Gecesi.. Rabbim bu mübarek gecede bizim için hayırlı olan dualarımızı kabul etsin inşallah..Geceniz mübarek olsun..

Blog tasarım yapılışı ile ilgili yazılarıma devam ediyorum. Bugün benim uzun zamandır kullandığım bir özelliği sizlerle paylaşmak istiyorum. Dropdawn menü yani açılır menü..

Açılır menü nedir peki? Açılır menü menü başlıklarının ve bunlara ait alt başlıkların sıralanabildiği menü çeşididir. Benim menü çubuğumu incelerseniz Amigurumi başlığına geldiğinizde bu kategori ile ilgili olan başlıkların alt alta sıralandığını görebilirsiniz. Çok kullanışlı bulduğum bir eklentidir.

Blogunuza eklemesi çok çok kolay yalnız kodları kendinize göre çoğaltırken ekleme çıkarma yaptığını kısımlar dikkat etmeniz gerekiyor. Çünkü kodlarda bazen bir harf eksikliği kodun çalışmamasına neden olabilir.

Eklememiz gereken kod bu..

    • ANASAYFA

    KATEGORİ-1
    • ALT KATEGORİ-1

    • ALT KATEGORİ-2

    • ALT KATEGORİ-3

    • ALT KATEGORİ-4

    KATEGORİ-2
    KATEGORİ-3
    KATEGORİ-4
    KATEGORİ-5
    KATEGORİ-6
    KATEGORİ-7
    Bu kodu BURADAN kopyalayarak öncelikle bilgisayarınızda not defteri veya Word sayfasına yapıştırın ve düzenlemeleri bu şekilde yapın.

    Öncelikle KATEGORİ1-2-3... yazan kısımlara kategori başlıklarınızı yerleştirmeniz. Ana başlıklarınız benim eklediğimden yani 7 den fazla ise fazla ise yapmanız gereken, en alttaki kodundan hemen öncesine aşağıdaki tekrar kodunu yapıştırmanız..

    KATEGORİ
    Eğer bir kategorinin altına alt başlık eklemek istiyorsanız o kategori yazısından sonra gelen kodundan sonra aşağıdaki kodları yapıştırabilirsiniz.

    • ALT KATEGORİ-1

    • ALT KATEGORİ-2

    • ALT KATEGORİ-3

    • ALT KATEGORİ-4

    Burada kategori sayısı yine sini elinizde, eğer benim verdiğim örnekteki sayıdan fazla olsun istiyorsanız aynı kısımda kodundan önce tekrar eden kodu yapıştrın yani şu kısmı;

    • ALT KATEGORİ-5


    • Kendi ihtiyacınıza göre düzenlemeye başladığınızda çok çok basit olacağını göreceksiniz.

      Gelelim görüntü kısmına .
      -Öncelikle menünün genişliğini (yeşil renk ile belirttim) blogunuzdaki genişliğe göre ayarlamasınız. width: 1020px;
      -Menüde yazıların üzerine geldiğinizde değişen rengin (benimkinde koyu pembe) tasarımınızla uyumlu olmasını istiyorsanız BURADAN istediğiniz renk kodunu başındaki # işareti ile birlikte seçip pembe renk ile gösterdiğim satırdaki ile değiştirebilirsiniz.
      -Yazı rengini değiştirmek için ise kırmızı ile yazılı olan color: #333 kısmındaki renk kodunu değiştirmelisiniz.
      -Fontu ve yazı karakteri boyutunu değiştirmek için font: normal 14px PT Sans Narrow; kısma istediğiniz büyüklüğü yazabilirsiniz.


      Peki kodu blogumuza nasıl ekleyeceğiz?

      Kumanda panelimizden Yerleşim sekmesine gelip tıklayalım. Buradan Gadget ekle'yi tıklayıp HTML/ Java Script i seçelim ve kodlarımızı başlık yazmadan buraya yapıştıralım. Sonrada Üst Bilgi yani headerımızın olduğu kısmın altına sürükleyelim ve değişiklikleri kaydedip çıkalım..

      Uzun ve karmaşık görünen bir anlatım oldu ama sırasıyla takip edip uyguladığınızda öyle olmadığını göreceksiniz.

      Uygulayın yapamadığınız yerde bana sorun lütfen,elimden geldiğince yardımcı olmaya çalışırım..
      Kolaylıklar diliyorum...
      Sevgiler...

      NOT: Eğer menü çubuğunuzda kategorileriniz yanyana değilde alt alta geliyorsa o zaman ))> kodundan hemen önce .tabs li {display:inline !important; float:none !important;} kodunu yapıştırın. buradan kopyalayabilirsiniz.

    This post is tagged in:
  • Love
    • Save
    More posts from
    Add a blog to Bloglovin’
    Enter the full blog address (e.g. https://www.fashionsquad.com)
    Contact support
    We're working on your request. This will take just a minute...