Daha önceki yazılarda da belirtmiştim. Dolaşım bir sitenin en önemli bileşenidir. Kullanıcının site üzerinde rahat bir şekilde gezinmesi için anlaşılır ve basit olması gerekir. Sadece bunları yapmak yeterli olmayabilir. Menüye çok karışık olmak şartı ile animasyon katmak da kullanıcının ilgilisi çekebilir. Bu yazıda CSS ve Jquery kullanarak temel bir açılır menü yapacağız. Bu örnekteki temel amaç CSS3 bileşenleri ve JavaScripti harmanlayarak kullanıcıya hoş görünen menü oluşturmaktır.
Sitedeki diğer menü örnekleri için de aşağıdaki bağlantılara tıklayabilirsiniz.
Yazının sonunda hazırlanacak menü aşağıdaki gibi olacaktır.
Jquery
Örneğin hazırlanmasında jquery kullanıldığı için projenin başına jquery dosyasını dahil etmeyi unutmayın. Ben CDN olarak kullandığım için CDN kodunu ekliyorum.
|
1 2 3 4 5 6 |
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> |
HTML
Menüyü oluşturacak olan temel HTML iskeleti aşağıdaki gibi oluşturdum. alt menü öğeleri için d-menu sınıf ismini verdim. Bu ismi css yazarken kullanacağım.
|
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="#">Hakkımızda</a></li> <li><a href="#">Yazılım</a> <ul class="d-menu"> <li><a href="#">C# Console</a></li> <li><a href="#">Windows Form</a></li> <li><a href="#">PHP</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">Grafik</a> <ul class="d-menu"> <li><a href="#">Photoshop</a></li> <li><a href="#">Fireworks</a></li> <li><a href="#">İllustrator</a></li> </ul> </li> </ul> </nav> |
CSS
Menüyü ortalamak ve ul etiketini biçimlendirmek için aşağıdaki gibi CSS kodlarını yazdıktan sonra ilk seviyedeki li etiketini biçimlendirme kodlarına geçiyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
nav { padding: 50px; text-align: center; } nav > ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #f1c40f; border-radius: 5px; } |
İlk seviyedeki Anasayfa, hakkımızda, yazılım vs. öğelerini biçimlendirmek için aşağıdaki gibi CSS kodlarını yerleştiriyorum. Yatay menü olduğu için nesnelerin yatay gelmesi ve a etiketlerinin biçimlenmesi için gerekli kodların tamamını burada yazıyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
nav ul a{ text-decoration: none; } nav > ul > li { float: left; width: 150px; height: 65px; line-height: 65px; position: relative; text-transform: uppercase; font-size: 14px; } nav > ul > li > a{ color: #2c3e50; } nav > ul > li:hover > a{ color: #fff; } nav > ul > li:hover { background: #d74c3c; border-radius: 5px 5px 0 0; } |
d-menu olarak berlirttiğim alt etiketlerin biçimlendirmesi için gerekili olan kodları aşağıdaki gibi sırasıyla yazıyorum. Bu kısıma kadar yazılanlar sade açılır menü için gerekli kodları içermekte. Menü animasyon katmak için CSS3 ile gelen animate özelliğini kullanmamız gerekiyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
nav ul.d-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0; } nav ul.d-menu li { background: #e74c3c; } nav ul.d-menu li a{ color: #fff; } nav ul.d-menu li:hover { background: #c0392b; } nav ul.d-menu li:last-child { border-radius: 0px 0px 5px 5px; } nav ul.d-menu li { display: none; } nav ul li:hover > ul.d-menu li { display: block; } |
Animasyon
Animasyon eklemek için gerekili CSS kodlarını aşağıdaki gibi yazıldı. Bu kısımda dikkat edilmesi gereken anim adındaki animasyonu hazırlamak için @keyframes tanımlamasını kullanmak gerektiğidir. animasyonun ilk saniyesinden son saniyesine kadar yapılacak animasyon da @keyframes içinde bildirilmektedir. Bu işlemleri yaptıktan sonra jquery ile her bir alt öge için animasyon süreleri(delay ve duration) belirtmek gerekiyor.
nav ul li:hover ul.d-menu li{
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
opacity: 0; animation-name: anim; } nav ul li:hover ul.d-menu li{ animation-name: anim; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } /*animasyon adı: anim*/ @keyframes anim{ 0% { opacity: 0; } 100% { opacity: 1; } } |
JavaScript
Her d-menu ögesi için each metodu ile nesneler üzerinde dönüyoruz. Yine her alt nesne içinde ikinci each metodu ile alt nesneler üzerinde dönüyoruz. her bir ul.d-menu li nesnesi için delay ve duration süreleri belirtip animasyonun oluşmasını sağlıyoruz. burada animasyon her bir nesne için 300ms ve gecikmede 100ms olarak belirlenmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ $(".d-menu").each(function(i,e){ $(e).children("li").each(function(j, el) { $(el).css({ "animation-duration": 300+"ms", "animation-delay": 100*j+"ms" }); }); }); }); |
HTML-CSS-JavaScript
Bu kadar açıklamadan sonra kodların son hali aşağıdaki gibi oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>YazılımBilisim.net</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $(".d-menu").each(function(i,e){ $(e).children("li").each(function(j, el) { $(el).css({ "animation-duration": 300+"ms", "animation-delay": 100*j+"ms" }); }); }); }); </script> <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> <style> body{ font-family: 'Muli', sans-serif; } nav { padding: 50px; text-align: center; } nav > ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #f1c40f; border-radius: 5px; } /************/ nav ul a{ text-decoration: none; } nav > ul > li { float: left; width: 150px; height: 65px; line-height: 65px; position: relative; text-transform: uppercase; font-size: 14px; } nav > ul > li > a{ color: #2c3e50; } nav > ul > li:hover > a{ color: #fff; } nav > ul > li:hover { background: #d74c3c; border-radius: 5px 5px 0 0; } nav ul.d-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0; } nav ul.d-menu li { background: #e74c3c; } nav ul.d-menu li a{ color: #fff; } nav ul.d-menu li:hover { background: #c0392b; } nav ul.d-menu li:last-child { border-radius: 0px 0px 5px 5px; } nav ul.d-menu li { display: none; } nav ul li:hover > ul.d-menu li { display: block; } nav ul li:hover ul.d-menu li{ opacity: 0; animation-name: anim; } nav ul li:hover ul.d-menu li{ animation-name: anim; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @keyframes anim{ 0% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <nav> <ul> <li><a href="#">AnaSayfa</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Yazılım</a> <ul class="d-menu"> <li><a href="#">C# Console</a></li> <li><a href="#">Windows Form</a></li> <li><a href="#">PHP</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">Grafik</a> <ul class="d-menu"> <li><a href="#">Photoshop</a></li> <li><a href="#">Fireworks</a></li> <li><a href="#">İllustrator</a></li> </ul> </li> </ul> </nav> </body> </html> |
[…] CSS Açılır Menü Yapımı […]