Yapımcı

CSS İLE AÇILIR MENÜ YAPMA

Posted by Yüksel Duman On 9 Şub 2016 3 yorum
CSS Açılır Menü


CSS ile açılır menü yapmak blog ve sitenizin görünümüne bambaşka bir hava katarak daha profesyonel olmasını sağlayacaktır.
Yukarıdaki ekran görüntüsü css ve html kodları kopyalanıp HTML Editor kullanılarak alınmıştır.

  • Sitenizin kontrol paneline girin
  • Şablon sekmesine tıklayın
  • HTML'yi Düzenle butonuna tıklayıp sitenizin kodlarına ulaşın
  • CTRL+F tuş yardımıyla aşağıdaki kodu bulun

]]></b:skin>

Bulduğunuz bo kod satırının hemen üstüne aşağıdaki kodları ekleyip şablonu kaydedin.

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://blogseocu.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code -->



<!-- menü linkleriniz -->


<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Ana Sayfa</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Hakkımda</span></a></li>
<li class="last"><a href="#"><span>İletişim</span></a></li>
</ul>
</div>

Şablonu kaydettikten sonra Yerleşim sekmesine tıklayın. Yerleşim sekmesi Blogger kontrol panelinizin sol alt köşededir.
Gadget ekle bağlantısına tıklayıp HTML Java Script'i seçin.

Gadget Ekle

Java script içine aşağıdaki HTML kodlarını ekleyip kaydedin. Son olarak sağ üst köşedeki 'düzenlemeyi kaydet' butona tıklamayı unutmayın.

<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Ana Sayfa</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Hakkımda</span></a></li>
<li class="last"><a href="#"><span>İletişim</span></a></li>
</ul>
</div>

'#' işareti olan yerlere linklerinizi yazmalısınız. Span ile başlayan yerlere ise istediğiniz ismi yazabilirsiniz. Örnek: Ana sayfa, hakkımda gibi...
Bu işlemlerden sonra açılır menü yapımı bitmiş bulunuyor. Kullanıma hazırdır.
Daha fazla drop down menu (açılır menü) kodları

3 yorum:

Fatih TAŞKIN dedi ki...

Hocam selamlar
http://www.adobewordpress.com/css-ile-material-design-ripple-efekti

bu linkteki kodları tek çatı altında toplayıp direk blogger sitelere gadget olarak eklenebilecek şekilde uygulamak istiyorum nasıl yapabilirim ?
Teşekküler

Profösör dedi ki...

Siyah Kuğu'nun tavsiyesiyle misafiriniz oldum. Paylaştıklarınızla feyz alacağımıza inanıyorum.

Yüksel Duman dedi ki...

Profösör hoşgeldiniz. Umarım feyz alırsınız. Sevgiler...

Yorum Gönderme