Sahra ForumSahraSiteSahibi
Mesaj Sayısı : 428 Tecrübe : 1091 Rep Puanı : 29 Kayıt Tarihi : 07/07/11 Yaş : 32 Nerden : Bilmem Lakap : gececi
| Konu: 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; } | |
|