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

13:16 | 0 yorum

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.

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...

Kategori: , , ,

0 yorum