blogoyren: Blogge Üzən Menyu (Floating dropdown menu)

Bu gün sizlərə Üzən (uçan) menyunu öz blogunuza əlavə etməyi izah etməyə çalışacam.Bu menyuda həmçini sosial şəbəkələrin paylaşım düymələridə var.Çox gözəl bir plagendir.
İzahı..

Üzən Menyunu necə quraşdıraq.

Öz Blogunuza daxil olun
Menyuya (dashboard)
Template (Şablon)
Edit Html (Html düzenle)
</head> tapırıq
Aşağıdakı kodu verilmiş kodun (yəni </head>) aşağısına əlavə edin.

<style>

#wctopdropcont{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;

z-index:100;
  top:0px;
left:0px;
 position:fixed;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
background:#180000;
}

#wctopdropnav{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#wctopdropnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopdropnav li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0
background:#180000;

}

#wctopdropnav li a, #wctopdropnav li a:link{
  color:#fff;
  display:block;
  margin:0;
font:16px georgia, verdana;
  padding:10px;
  text-decoration:none;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a  {
  color:#fff;
  padding:10px;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
  font-size: 12px;
background:#180000;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
  color: #fff;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}

#wctopdropnav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
  left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
  position:static
}
#wctopdropsoc {
  float:right;
  width:220px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}
</style>

<div id='wctopdropcont'>
     <div id='wctopdropnav'>
         <ul>
<li><a href=''>Home</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Tools</a>
               <ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
</ul>
</li>
<li><a href='#'>Categories</a>
              
             <ul>
<li><a href='#'>Widgets</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Wordpress</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Customization</a></li>
</ul>
</li>
<li><a href='#'>Contact us</a>           
</li>
</ul>
</div>
<div id='wctopdropsoc'>

</div>
</div>

Save (Şablonu kaydet) etməzdən əvvəl menyuya öz menyunuzu əlavə edin.Bunun üçün aşağıdakı verilmiş kodu yuxarıdakı kodun içindən tapıb dəyişiklik etmək lazımdır.

<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Tools</a>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
</ul>
</li>
<li><a href='#'>Categories</a>

<ul>
<li><a href='#'>Widgets</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Wordpress</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Customization</a></li>
</ul>
</li>
<li><a href='#'>Contact us</a>
</li>
</ul>
</div>

<div id='wctopdropsoc'>

Yuxarıda verilmiş rənglərə görə düzəliş edin.
Göy rənglər əsas menyudur.
Qırmızı rəng əsas menyunun aşağı hissələridir.
Sarı rənglər isə menyunun url adresidir.

İndi save edə bilərsiniz.....

blogoyren

23 Ağustos 2014 Cumartesi

Blogge Üzən Menyu (Floating dropdown menu)

Hiç yorum yok:

Yorum Gönder

Pages

Template information