Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj28.07.2011, 21:26 (UTC)    
Mesaj konusu: Süper CSS3 Drop Down Menü

Önizleme resim ;



Canlı Önizlemee ayrıntılı bilgi: http://sahra.forumdizini.com/t194-super-css3-drop-down-menu

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;
    }





Kod paylaşıma acıktır blogunuzda veya sitenizde paylaşabilirsiniz.
Koddaki iconları kendinize göre düzenleyiniz aksi taktirde orjinal iconlar çalışmayabilir
paylaşan
@Sahra
______________
@tr.gg dısı link yasak
Mesaj28.07.2011, 21:29 (UTC)    
Mesaj konusu:

Paylaşımlarınızı tek bir başlık altında toplamanız hem biz kullanıcılar, hemde forum düzeni açısından çok daha yararlı olacaktır..

İyi Forumlar...

______________
Mesaj28.07.2011, 21:32 (UTC)    
Mesaj konusu:

Haklısınız Wink
______________
@tr.gg dısı link yasak
Mesaj28.07.2011, 21:35 (UTC)    
Mesaj konusu:

systemwarez yazmış:
Haklısınız Wink


Anlayışınız için teşekkürler...
İyi Forumlar...

______________
Mesaj28.07.2011, 21:37 (UTC)    
Mesaj konusu:

@ve-siir

Asıl ben teşşrkur ederim uyardıgınız için

Sizede İYi forumlar Smile

______________
@tr.gg dısı link yasak
Mesaj28.07.2011, 22:30 (UTC)    
Mesaj konusu:

Paylaşım güzel elinize sağlık sanırım siz kodladınız ama menü size ait değil başarılarının devamını bekleriz Smile
Mesaj28.07.2011, 22:33 (UTC)    
Mesaj konusu:

@hiby

Evet bana ayit degil içerik acık kaynak olarak paylaşılmıs ben sadece arastırıp buldum benim veya sizin paylaşmanızda herhangi bir sakınca yoktur
______________
@tr.gg dısı link yasak
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu