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

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.