SahraForumDizini

Genel Forum Sitesi
 
AnasayfaAnasayfa  SSSSSS  AramaArama  Kayıt OlKayıt Ol  Giriş yap  
Sayfayı FaceBook'ta Paylaş

Paylaş | 
 

 Süper CSS3 Drop Down Menü

Aşağa gitmek 
YazarMesaj
Sahra
ForumSahraSiteSahibi
ForumSahraSiteSahibi
avatar

<b>Mesaj Sayısı</b> Mesaj Sayısı : 428
<b>Tecrübe</b> Tecrübe : 1091
<b>Rep Puanı</b> Rep Puanı : 29
<b>Kayıt Tarihi</b> Kayıt Tarihi : 07/07/11
<b>Yaş</b> Yaş : 26
<b>Nerden</b> Nerden : Bilmem
<b>Lakap</b> Lakap : gececi

MesajKonu: Süper CSS3 Drop Down Menü    Salı 26 Tem. - 0:36:51



[Linkleri görebilmek için üye olun veya giriş yapın.] - [Linkleri görebilmek için üye olun veya giriş yapın.]
html
Kod:
<div class="drop-menu_dark">
<div class="drop_down_title">CSS3 Menu Dark</div>
<ul class="sub-menu_dark">

<li>
<a href="#"><img src="icons/indent/rss.png" align="absmiddle"/>
<span class="rss">RSS</span></a>
</li>

<li>
<a href="#"><img src="icons/indent/twitter.png" align="absmiddle"/>
<span class="twitter">twitter</span></a>
</li>

<li><a href="#"><img src="icons/indent/facebook.png" align="absmiddle"/>
<span class="facebook">Facebook</span></a></li>

<li><a href="#"><img src="icons/indent/dribbble.png" align="absmiddle"/>
<span class="dribble">dribble</span></a></li>

<li><a href="#"><img src="icons/indent/last_fm.png" align="absmiddle"/>
<span class="lastfm">LastFM</span></a>
</li>

<li id="final">
<a href="#"><img src="icons/indent/flickr.png" align="absmiddle"/>
<span class="flickr_blue">flick</span><span class="flickr_pink">r</span></a>
</li>     
       
</ul>
</div>

CSS

Kod:
.drop-menu_dark {
   display: block;
   margin-right: auto;
   margin-left: auto;
   text-align: left;
   padding: 10px 10px;
   font-size: 22px;
   height: 25px;
   max-height: 25px;
   width: 200px;
   cursor: pointer;
   background-color: #424242;   
   -moz-border-radius-topright: 10px;
   border-top-right-radius: 10px;
   -moz-border-radius-topleft: 10px;
   border-top-left-radius: 10px;
   -moz-border-radius-bottomright: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   border-bottom-left-radius: 10px;
   -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);
}

.drop-menu_dark:hover {
   background-color: #424242;
   -moz-border-radius-bottomright: 0px;
   border-bottom-right-radius: 0px;
   -moz-border-radius-bottomleft: 0px;
   border-bottom-left-radius: 0px;
   -webkit-box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
   -moz-box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
   box-shadow: 0px 0px 0px rgba(0,0,0, 0.0);
}
   
.drop-menu_dark:hover .sub-menu_dark {
   display: inline-block;
   border-top-color: #151515;
   border-top-width: 1px;
   border-top-style: solid;
}
      
.sub-menu_dark {
   display: none;
   width: 220px;
   background: #424242;
   padding: 0px;
   margin-left: -10px;
   margin-top: 8px;
   -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);
   margin-right: 0px;
   margin-bottom: 0px;
   -moz-border-radius-bottomright: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   border-bottom-left-radius: 10px;
}
   
.sub-menu_dark li {
   list-style-type: none;
   display: block;
   height: 32px;
   border-bottom-color: #151515;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   color: #C0C0C0;
   width: 180px;
   padding-top: 8px;
   padding-right: 20px;
   padding-bottom: 8px;
   padding-left: 20px;
   margin: 0px;
   float: left;
   box-shadow:inset 0;
   -moz-box-shadow:inset 0;
}

.sub-menu_dark li a {
   font-size: 16px;
   display: block;
   line-height: 26px;
   text-shadow: 0px 0px 5px #000;
   text-decoration: none;
}

.drop-menu_dark .sub-menu_dark li a img {
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   padding-right: 15px;
   height: 32px;
   width: 32px;
}

.sub-menu_dark li:hover {
   border-bottom-color: #151515;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   color: #FFF;
   background-color: #2D2D2D;   
   box-shadow:inset 0 0 4px #2D2D2D;
   -moz-box-shadow:inset 0 0 4px #2D2D2D;
}

.sub-menu_dark #final {
   background-color: #424242;
   -moz-border-radius-bottomright: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   border-bottom-left-radius: 10px;
   height: 32px;
   float: left;   
}
   
.sub-menu_dark #final:hover {
   -moz-border-radius-bottomright: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   border-bottom-left-radius: 10px;
   color: #FFF;
   background-color: #2D2D2D;
   box-shadow:inset 0 0 4px #2D2D2D;
   -moz-box-shadow:inset 0 0 4px #2D2D2D;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
}


[Linkleri görebilmek için üye olun veya giriş yapın.]
Sayfa başına dön Aşağa gitmek
http://sahra.forumdizini.com
 
Süper CSS3 Drop Down Menü
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
SahraForumDizini :: Webmaster :: CSS-
Buraya geçin: