Simple Responsive Menu

Siteniz için çok güzel  bir responsive menü orjinal rengi turuncu  siz menüyü istediğiniz gibi ayarlıyabilirsiniz menüyü sitenize ekliyebilmeniz için öncelikle blogger giriş yapıyoruz. sonrasında şablonumuzu genişleterek html düzenle diyoruz ve ilk olarak css kodlarımızı ekliyoruz şablonumuzda bu kodu ]]></b:skin> bulup css kodlarını hemen üstüne ekliyoruz

 DEMO

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#menum {
  background: #f96e5b;
  width: auto;
}
#menum ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#menum ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#menum ul li {
  float: left;
  display: block;
  padding: 0;
}
#menum ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#menum ul li a:hover {
  color: #333333;
}
#menum ul li a:hover:before {
  width: 100%;
}
#menum ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#menum ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#menum ul li.last > a:after,
#menum ul li:last-child > a:after {
  display: none;
}
#menum ul li.active a {
  color: #333333;
}
#menum ul li.active a:before {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #menum ul li {
    float: none;
  }
  #menum ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #menum ul li a:after {
    display: none;
  }
  #menum ul li a:before {
    height: 1px;
    background: #ffffff;
    width: 100%;
    opacity: .2;
  }
  #menum ul li.last > a:before,
  #menum ul li:last-child > a:before {
    display: none;
  }
}

Sonra aşağıdaki html kodlarını kendinize göre düzenleyip yerleşim bölgesinden gadget ekle diyerek ekliyebilirsiniz yada tema şablonunuzdan menüyü eklemek istediğiniz yere ekliyebilirsiniz.

<div id='menum'>
<ul>
   <li class='active'><a href='index.html'><span>Ana sayfa</span></a></li>
   <li><a href='#'><span>Deneme</span></a></li>
   <li><a href='#'><span>Güncel</span></a></li>
<li><a href='#'><span>Blogger</span></a></li>
<li><a href='#'><span>wordpress</span></a></li>
<li><a href='#'><span>Link 1</span></a></li>
<li><a href='#'><span> Link 2</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Continue Reading