CSS Açılır Menü Örneği - Web Tasarım & Programlama

Trang chủ » Html Açılır Liste örnekleri » CSS Açılır Menü Örneği - Web Tasarım & Programlama

Có thể bạn quan tâm

Bu yazımızda HTML ve CSS kullanarak basit bir yatay açılır menü tasarımı yapacağız.  HTML ve CSS dosyalarımızı oluşturduğumuzda aşağıdaki gibi bir görüntü elde edeceğiz.

Aşağıdaki video ile yapılışına yada yazının devamında kaynak kodları ile menüye ulaşabilirsiniz.

index.html dosyamızın içeriğini incelediğimizde iç içe liste oluşturulduğunu görüyoruz. Oluşturulan bu listenin CSS ile açılır menü haline gelmesini sağlayacağız.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> <link rel="stylesheet" href="tasarim.css"> </head> <body> <nav class="menu"> <ul> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Csharp</a> <ul> <li><a href="#">Console</a></li> <li><a href="#">Windows</a></li> <li><a href="#">WPF</a></li> </ul> </li> <li><a href="#">Web Tasarım</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">ASP.NET</a></li> </ul> </li> <li><a href="#">BTT</a> <ul> <li><a href="#">Anakart</a></li> <li><a href="#">İşlemci</a></li> <li><a href="#">Bellekler</a></li> </ul> </li> <li><a href="#">İletişim</a></li> </ul> </nav> </body> </html>
1234567891011121314151617181920212223242526272829303132333435363738394041 <!doctype html><html><head><meta charset="utf-8"><title>www.yazilimkodlama.com</title><link rel="stylesheet"href="tasarim.css"></head> <body><nav class="menu"><ul><li><a href="#">Ana Sayfa</a></li><li><a href="#">Csharp</a><ul><li><a href="#">Console</a></li><li><a href="#">Windows</a></li><li><a href="#">WPF</a></li></ul></li><li><a href="#">Web Tasarım</a><ul><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">ASP.NET</a></li></ul></li><li><a href="#">BTT</a><ul><li><a href="#">Anakart</a></li><li><a href="#">İşlemci</a></li><li><a href="#">Bellekler</a></li></ul></li><li><a href="#">İletişim</a></li></ul></nav></body> </html>

tasarim.css dosyamızın içeriği:

.menu ul{ list-style: none; margin: 0; padding: 0; } .menu li{ float: left; position: relative; width: 120px; } .menu ul li ul{ display: none; } .menu ul li:hover ul{ display: block; } .menu ul li a{ text-decoration: none; background: #333; display: block; color: white; font-weight: bold; font-family: sans-serif; text-align: center; border-bottom: 2px solid red; border-left: 1px solid #595959; padding: 5px; } .menu ul li ul li a{ background: #595959; text-align: left; padding: 5px; border-bottom: 1px solid #333; font-size: .8em; } .menu li a:hover{ background: rgb(248,140,0); transition: .5s; } .menu ul li ul li a:hover{ padding-left: 15px; }
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 .menu ul{list-style:none;margin:0;padding:0;} .menu li{float:left;position:relative;width:120px;} .menu ul li ul{display:none;} .menu ul li:hover ul{display:block;} .menu ul li a{text-decoration:none;background:#333;display:block;color:white;font-weight:bold;font-family:sans-serif;text-align:center;border-bottom:2pxsolidred;border-left:1pxsolid#595959;padding:5px;} .menu ul li ul li a{background:#595959;text-align:left;padding:5px;border-bottom:1pxsolid#333;font-size:.8em;} .menu li a:hover{background:rgb(248,140,0);transition:.5s;} .menu ul li ul li a:hover{padding-left:15px;}

Yukarıdaki CSS kodlarını incelediğimizde menünün üzerine geldiğimizde display özelliğinin none ve block yapılarak açıldığını görmekteyiz.

.menu ul li ul{ display: none; } .menu ul li:hover ul{ display: block; }
123456789 .menu ul li ul{display:none;} .menu ul li:hover ul{display:block;}

2. bir yöntem olarak aşağıdaki şekild ede kodlarımızı oluşturabiliriz.

.menu ul li ul{ position:absolute; left:-9000em; } .menu ul li:hover ul{ left:0; }
12345678910 .menu ul li ul{position:absolute;left:-9000em;} .menu ul li:hover ul{left:0;}

Bunu paylaş:

  • Twitter üzerinde paylaşmak için tıklayın (Yeni pencerede açılır)
  • Facebook'ta paylaşmak için tıklayın (Yeni pencerede açılır)

Từ khóa » Html Açılır Liste örnekleri