Ul ve Li ile Yan Yana Açılır Menü Yapımı
2 Temmuz 2019 / 12:10
Burak
Merhaba arkadaşlar,
Kimi zaman jquery vss kullanmadan direk css ile ul ve li kullanarak açılır menü yapmamız gerekebilir işte böyle durumlarda aşağıdaki kodlar işinizi görücektir. Direk kopyala yapıştır yap çalışır 🙂
Html Kısmı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<ul> <li><a href="#index">Ana sayfa</a></li> <li><a href="#hakkımızda">Hakkımızda</a></li> <li> <a href="#Ders">Ders</a> <ul> <li><a href="#php">php</a> </li> <li><a href="#css">css</a></li> <li><a href="#html">html</a></li> </ul> </li> <li><a href="#referanslar">Referanslar</a> <ul> <li><a href="#php">php</a> <ul> <li><a href="#php">php</a> </li> </ul> </li> </ul> </li> <li><a href="#iletisim">İletişim</a></li> </ul> |
Css Kısmı
|
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 |
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #34495e; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #f39c12; } ul li ul { background-color: #2c3e50; display: none; position: absolute; width: 100px; } ul li:hover ul { display: block; } li ul li { display: block; } |
Bir sonraki yazıda görüşünceye kadar hepiniz kendinize iyi bakınız 🙂
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın