Blogger Blogcular İçin CSS Açılır Kapanır Menü [ Çok Güzel ] !

Merhaba arkadaşlar bugün sizlere Yine CSS msnü yapacağız.Bu menü mausa duyarlı genellikle "Takip Et" menülerini alt alta uzadığı zaman kullanılırken gördüm "Takip Et" yazısının üzerine geldiğinde fareye duyarlu olarak aşağı doğru açılan satırlar ve her satıra özgü "Takip Et" Linkleri Bu linklere ise genellikle Twitter, RSS , E-mail Aboneliği linki verilirken gördüm.

evet yukarıda gördüğünüz menüyü bugün yapacağız

Demo

dilerseniz bu menüyü nasıl yapacağız kodlarımıza geçelimmmm. :)

Öncelikle CSS kodlarımızı ekleyelim

.drop-menu {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  padding: 10px 10px;
  font-size: 22px;
  height: 25px;
  max-height: 25px;
  width: 400px;
  background: #fff;
  cursor: pointer;
  border: 1px solid #f6f0e4;
}
  .drop-menu:hover .sub-menu {
  display: inline-block;
}
  .sub-menu {
  display: none;
  width: 400px;
  background: #fff;
  padding: 10px 10px;
  margin-left: -11px;
  margin-top: 10px;
  border: 1px solid #fff;
  -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
  -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
  box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
 
  .sub-menu li {
    list-style-type: none;
    display: block;
    border-bottom: 1px dotted #eaeaea;
    font-size: 19px;
    height: 22px;
    padding: 8px 0;
  }
 
    .sub-menu li img {
      margin-right: .5em;
    }
 
  .sub-menu li:hover {
    border-bottom: 1px dotted #bababa;
  }
  .plus {
  display: inline-block;
  -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
}
 
.drop-menu:hover .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
  * {
  margin:0; padding:0;
}
 
body {
  font-family: Georgia;
  background: #fff9ec;
  text-align: center;
  color: #464530;
  text-shadow: 0px 1px 0px #fff;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
  margin-top: 3%;
}
 
a, a:visited {
  color: #464530;
  text-decoration: none;
}
 
label {
  font-size: 20px;
}
 
#content {
  display: block;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}  
 
.drop-menu {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  padding: 10px 10px;
  font-size: 22px;
  height: 25px;
  max-height: 25px;
  width: 400px;
  background: #fff;
  cursor: pointer;
  border: 1px solid #f6f0e4;
}
 
  .plus {
    display: inline-block;
    -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
  }
 
  .drop-menu:hover {
    border: 1px solid #fff;
  }
 
  .drop-menu:hover .sub-menu {
    display: inline-block;
  }
 
  .drop-menu:hover .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
  }
 
  .sub-menu {
    display: none;
    width: 400px;
    background: #fff;
    padding: 10px 10px;
    margin-left: -11px;
    margin-top: 10px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
  }
 
  .sub-menu li {
    list-style-type: none;
    display: block;
    border-bottom: 1px dotted #eaeaea;
    font-size: 19px;
    height: 22px;
    padding: 8px 0;
  }
 
    .sub-menu li img {
      margin-right: .5em;
    }
 
  .sub-menu li:hover {
    border-bottom: 1px dotted #bababa;
  }

şimdi CSS kodlarımızdan sonra HTML kodlarımız var onlarıda şablonumuzun uygun bölümüne aşağıdaki kdoları ekleyelim

<div class="drop-menu">
  <span class="plus">+</span>  Beni Takip Et !
  <ul class="sub-menu">
    <li>
      <a href="http://feeds.feedburner.com/mucozer">
        <img src="http://i50.tinypic.com/xat3ds.png" border="0" alt="rss" /> RSS İle Takip Et
    </li>
    <li>
      <a href="http://feedburner.google.com/fb/a/mailverify?uri=mucozer">
        <img src="http://i46.tinypic.com/25g9tfn.png" border="0" alt="email" /> E-Mail Abonesi Ol
      </a>
    </li>
    <li>
      <a href="http://twitter.com/MucOzeR">
        <img src="http://i50.tinypic.com/2h7hocp.png" border="0" alt="twitter"/> Twitter'den İzle
      </a>
    </li>
  </ul>
</div>

kodlarını ekliyoruz işte hepsi budur arkadaş.Hayırlı olsun yorumlarınızı esirgemeyiniz !