Mart 22, 2013

CSS ile Tasarlanmış Şık Açılır Menü - Blogger Menü

CSS ile Tasarlanmış Şık Açılır Menü - Blogger Menü

Merhaba arkadaşlar, bugün sizlere Blogger'n klasik menü tasarımlarından nasıl kurtuluruz ondan bahsedeceğim. :) Malumunuz artık kimse klasik görünümlü bir tema kullanmayı tercih etmiyor. Ya da farklı bir tema bulup onu kullanmak istiyor. 

CSS ile tasarlanmış şık ve açılır bir menüyü istediğiniz tasarıma dönüştüreceğiniz bir imkan  var. Sizlerle paylaşacağım bu tasarımı detaylı bir şekilde anlatmak için uğraşacağım. Umarım faydalı bir makale daha olur. Tabi bu konuya geçmeden önce daha önce paylaşmış bulunduğum CSS Tarzı Menülere bir göz atmanızda fayda var:


Yukarıdaki konuları ziyaret ettikten sonra şimdi yeni ve özel tasarımlı CSS menümüze geçebiliriz.

Önce şu adımları izleyin:

  • Kumanda Paneli 
  • Şablon
  • HTML'yi Düzenle
  • Widget'i Genişlet hemen akabinde CTRL + F yardımı ile aşağıdaki kodu bulun. 
]]></b:skin>
Bulduğunuz kodun üzerine her zamanki gibi aşağıdaki CSS kodlarımızı ekleyeceğiz. 
*
{margin: 0; padding: 0; border: 0; outline: 0; list-style:none; text-decoration:none;} .header-menu{
width:782px;
height:35px;
float:left;
background:gray;
position:relative;
}

.header-menu a{
width:auto;
height:35px;
float:left;
font-size:12px;
color:white;
padding-left:18px;
padding-right:18px;
border-right:solid 1px white;
line-height:35px;
}

.header-menu a:hover{
background:url(img/cizgi.png) right no-repeat #f57e20;
}

.header-menu li{
width:auto;
height:46px;
float:left;
position:relative;
}

.header-menu ul li ul{
width:180px;
height:auto;
float:left;
position:absolute;
background:#6c6b6b;
top:35px;
left:1px;
z-index:1;
display:none;
}

.header-menu ul li ul a{
width:163px;
height:30px;
line-height:30px;
float:left;
padding:0 0 0 17px;
border-top: dashed 1px gray;
background:none;
}

.header-menu ul li ul li {
height:30px;
line-height:30px;
}

.header-menu li:hover > ul{
display: block;
}

.header-menu ul li ul li ul{
width:180px;
height:auto;
float:left;
position:absolute;
background:#6c6b6b;
top:0px;
left:180px;
z-index:1;
display:none;
}
Şablonunuzu kaydedip çıkabilirsiniz. Şimdi menümüzün HTML kodlarını kullanmamız için;

  • Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Javascript 
ekle yolunu takip ettikten sonra açılan boş kutuya aşağıdaki menü kodlarını kopyalayıp yapıştırıyoruz.
CSS Menü HTML Kodu:
<div class="header-menu">
    <ul>
        <li><a href="#">Örnek Menü</a></li>
        <li><a href="#">Örnek Menü ></a>
             <ul>
                <li><a href="#">Örnek Menü</a></li>
                <li><a href="#">Örnek Menü</a></li>
                <li><a href="#">Örnek Menü > </a>
                     <ul>
                        <li><a href="#">Örnek Menü</a></li>
                        <li><a href="#">Örnek Menü</a></li>
                        <li><a href="#">Örnek Menü</a></li>
                        <li><a href="#">Örnek Menü</a></li>
                    </ul>
                </li>
                <li><a href="#">Örnek Menü</a></li>
            </ul>
        </li>
        <li><a href="#">Örnek Menü</a></li>
        <li><a href="#">Örnek Menü</a></li>
        <li><a href="#">Örnek Menü</a></li>
        <li><a href="#">Örnek Menü</a></li>
    </ul>
</div>
İşlem bitti. Şimdi tasarımda değiştirmek istediğiniz yerler CSS kodlarında az çok bildiye sahipseniz çok harika işler yapabilirsiniz. 
HTML bölümünde ise "#" ile gösterilmiş alana menü linki Örnek Menü yazan kısma menü adını yazarak menünüzü dilediğiniz gibi tasarlayıp kullanabilirsiniz. Şimdilik benden bu kadar. Tekrar görüşmek üzere; İyi bloglamalar...

2 yorum :

Teşekürler admin guzel bilgiler...

Butonlara tıklanmıyo yalnız. İki blogda da denedim olmadı. Butonu yeni sekmede aç diyince açılıyo sadece.

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.