SahraForumDizini
Would you like to react to this message? Create an account in a few clicks or log in to continue.
SahraForumDizini

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

 

 Süper CSS3 Drop Down Menü

Aşağa gitmek 
YazarMesaj
Sahra
ForumSahraSiteSahibi
ForumSahraSiteSahibi
Sahra


<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ş : 31
<b>Nerden</b> Nerden : Bilmem
<b>Lakap</b> Lakap : gececi

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

Süper CSS3 Drop Down Menü  Css3_drop_down_menu

[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;
}
Sayfa başına dön Aşağa gitmek
https://sahra.forumdizini.com
 
Süper CSS3 Drop Down Menü
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» CSS3 Gradient Menü Düğmeler
» Css3, Xhtml ve jQuery ile Yatay Açılır Menü Yapımı
» CSS3 ile Şekiller
» CSS3 Generator
» Snoop Dogg featuring Pharrell - Drop It Like It's Hot

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