Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / Sa d ece CSS Ku l l a n a ra k D ro p d o w n M en u Na sı l Ha zı rl a n ı r
Sadece CSS Kullanarak Dropdown Menu Nasıl Hazırlanır Egemen Özbeyli tarafından 24 Ekim 2012 tarihinde yazıldı. ~ 3 Yorum + Değiştir
Bu paylaşımımda sizlere hiçbir görsel kullanımı yapmadan güzel bir dropdown menünün nasıl yapılacağını anlatacağım. İlk olarak menü elemanlarımızı tanımlayarak menümüzün iskeletini oluşturuyoruz, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<nav> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Photoshop</a> <ul> <li><a href="#">Pattern</a></li> <li><a href="#">Brush</a></li> <li><a href="#">Dersler</a> <ul> <li><a href="#">Yazı</a></li> <li><a href="#">Grafik</a></li> </ul> </li> </ul> </li> <li><a href="#">Wordpress</a> <ul> <li><a href="#">Temalar</a></li> <li><a href="#">Eklentiler</a></li> </ul> </li> <li><a href="#">İletişim</a></li> </ul> </nav>
Menü elementlerini tanımladıktan sonra menümüz aşağıdaki gibi görünmelidir
Şimdi menümüzü görsel açıdan zenginleştirip ufak tefek düzenlemeler yapmak için css tanımlamalarını yapıyoruz.Ben kod öbeğini tek seferde yazmanın daha kolay olacağını düşünüyorum,eğer kafanızı karıştıran bir kısımla karşılaşırsanız yorum bölümünden sorunuzu sorabilirsiniz. 1 nav ul ul { 2 display: none; 3 } 4 5 nav ul li:hover > ul { 6 display: block; 7 } 8 9 nav ul { 10 background: #efefef; 11 background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 12 background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 13 background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 14 padding: 0 20px; 15 list-style: none; 16 position: relative; 17 display: inline-table; 18 font: 15px "Helvetica Neue", Helvetica, Arial, sansserif; 19 } 20 nav ul:after { 21 content: ""; clear: both; display: block; 22 } 23 24 nav ul li { 25 float: left; 26 } 27 nav ul li:hover { 28 background: #4b545f; 29 background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 30 background: -moz-linear-gradient(top, #4f5964 0%,
31
#5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; }
32 33 34 35 36 37 nav ul li a { 38 display: block; padding: 25px 40px; 39 color: #757575; text-decoration: none; 40 } 41 42 nav ul ul { 43 background: #5f6975; border-radius: 0px; padding: 0; 44 position: absolute; top: 100%; 45 } 46 nav ul ul li { 47 float: none; 48 border-top: 1px solid #6b727c; 49 border-bottom: 1px solid #575f6a; 50 position: relative; 51 } 52 nav ul ul li a { 53 padding: 15px 40px; 54 color: #fff; 55 } 56 nav ul ul li a:hover { 57 background: #4b545f; 58 } 59 60 nav ul ul ul { 61 position: absolute; left: 100%; top:0;
Benzer Konular: Sadece CSS ile Yatay Menü CSS Kullanarak Button Tasarlamak HTML5 ve CSS3 ile Yaprak Menü CSS ile Toogle Menü CSS3 ile Sosyal Ağ Kutucuğu
Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : css , dropdown menu , menu , nav , navigation , Xhtml