Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 1
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Menü Kodu
#1
rhone0C.jpg
10tl.net'e uyarlı değildir!


HTML KODU
Kod:
<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Ana Sayfa</span></a></li>
   <li class='has-sub'><a href='#'><span>kemik344</span></a>
      <ul>
         <li><a href='#'><span>altmenu1</span></a></li>
         <li class='last'><a href='#'><span>altmenu2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>Hakkımda</span></a></li>
   <li class='last'><a href='#'><span>mesela yani :)</span></a></li>
</ul>
</div>

CSS KODU

Kod:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);



/* Menu CSS */

#cssmenu, #cssmenu > ul{
    
    background: url(highlight-bg.png) repeat;
    padding-bottom: 3px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    
    
}

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {

    content: '';
    display: table;
    
}


#cssmenu:after, #cssmenu > ul:after {

    clear: both;
    
}

#cssmenu {

    zoom:1;
    
}

#cssmenu > ul{
    
    background: url(menu-bg.png) repeat;
    margin: 0;
    padding: 0;
    position: relative;
    
}

#cssmenu > ul li{
    
    margin: 0;
    padding: 0;
    list-style: none;
    
}

#cssmenu > ul > li{

    float: left;
    position: relative;
    
}

#cssmenu > ul > li > a{

    padding: 23px 26px;
    display: block;
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 #0d0d0d;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
    line-height: 18px;
    
}


#cssmenu > ul > li:hover > a{

    background: url(highlight-bg.png) repeat;
    text-shadow: 0 -1px 0 #97321f;
    text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
    
}

#cssmenu > ul > li > a > span{

    line-height: 18px;
    
}

#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
    
    background: url(hover.png) repeat;
    
}



/* Childs */

#cssmenu > ul ul{

    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 120px;
    background: url(menu-bg.png) repeat;
    margin: 0;
    padding: 0;
    z-index: -1;

    
}

#cssmenu > ul li:hover ul{
    opacity: 1;
    visibility: visible;
    margin: 0;
    color: #000;
    z-index: 2;
    top:64px;
    left: 0;
    
}

#cssmenu > ul ul:before{

    content: '';
    position: absolute;
    top: -10px;
    width: 100%;
    height: 20px;
    background: transparent;
    
}


#cssmenu > ul ul li{

    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    
}

#cssmenu > ul ul li a{

    padding: 18px 26px;
    display: block;
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    width: 150px;
    border-left: 4px solid transparent;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;

}

#cssmenu > ul ul li a:hover{

    border-left: 4px solid #d64e34;
    background: url(hover.png) repeat;

}

#cssmenu > ul ul li a:active{

    background: url(menu-bg.png) repeat;

}
Ara
Cevapla PGM
Teşekkür verenler:
#2
Güzel Menü :) Ancak Arkaplan Bouzk :S
Ara
Cevapla PGM
Teşekkür verenler:
#3
tesekkür ederim
Ara
Cevapla PGM
Teşekkür verenler:
#4
Paylaşılmıştı diye hatırlıyorum..
( http://destek.10tl.net/showthread.php?tid=23436 )
Ara
Cevapla PGM
Teşekkür verenler:
#5
(18-06-2013 Saat: 17:57)Edward Nickli Kullanıcıdan Alıntı: Paylaşılmıştı diye hatırlıyorum..
( http://destek.10tl.net/showthread.php?tid=23436 )

hocam doğru diyorsunuz fakat biraz daha farklı menüler :)
Ara
Cevapla PGM
Teşekkür verenler:
#6
Menu maker dan yapmışsınız. Resimleri kendiniz upload edip paylaşın derim. Bozuk görünecek.
Konuşmak ihtiyaç olabilir; ama susmak bir sanattır…

Ara
Cevapla PGM
Teşekkür verenler:
#7
(18-06-2013 Saat: 18:02)jungi Nickli Kullanıcıdan Alıntı: Menu maker dan yapmışsınız. Resimleri kendiniz upload edip paylaşın derim. Bozuk görünecek.

öyle bir sorunum yok hocam,kendi uploadım ve haklısınız :) site dışı linke girer diye paylaşmak istemedim :)
Ara
Cevapla PGM
Teşekkür verenler:
#8
Sizin olmayabilir ama kullanmak isteyenlerin olacaktır. Sonradan sorun çıkabilir siz bilirsiniz. Resim upload sitesi ya da menu maker site dışı sayılmıyor.
Konuşmak ihtiyaç olabilir; ama susmak bir sanattır…

Ara
Cevapla PGM
Teşekkür verenler:
#9
(18-06-2013 Saat: 18:06)jungi Nickli Kullanıcıdan Alıntı: Sizin olmayabilir ama kullanmak isteyenlerin olacaktır. Sonradan sorun çıkabilir siz bilirsiniz. Resim upload sitesi ya da menu maker site dışı sayılmıyor.

teşekkürler hocam.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 9 Ziyaretçi



Lolforum Bilgi,Oyun,Torrent,Eglence Platformu -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping