Bu derste CSS ile web sayfası için en basit haliyle yatay menü yapımı örneğini görebilirsiniz. Örnek içinde Mouse ile menü üzerinde renk değişimini sağlamak için hover seçicisi’ de kullanılmıştır. margin, padding, height, width, transition gibi bir çok CSS özelliğini örnek üzerinde görebilirsiniz. Web sayfasına yatay menü nasıl eklenir?
HTML ve CSS Kodları:
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> <style> body{ margin-top: 90px; } #menu li{ overflow: hidden; list-style-type: none; background-color: #242B6F; padding: 0px; width: 200px; height: 50px; margin-right: 1px; font-size: 20px; font-family: calibri,arial,verdana; line-height: 50px; float: left; } #menu a{ text-decoration: none; color: whitesmoke; font-weight: 600; display: block; /*a etiketinin etki alanını nesne boyutlarına eşitler*/ text-align: center; transition: 1s; } #menu span{ display: block; margin-top:-60px; } #menu a:hover{ background-color: #8596F9; color: #830D0D; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">ANASAYFA</a></li> <li><a href="#">ÜRÜNLER</a></li> <li><a href="#">MAĞAZALAR</a></li> <li><a href="#">HAKKIMIZDA</a></li> <li><a href="#">İLETİŞİM</a></li> </ul> </div> </body> </html> |
Ekran Çıktısı:
Add comment