Anasayfa/ Başlık/S 2431
İleri
Açık
Cemil

Css ile açılır menü nasıl yapılır?

Cemil
2020-07-20T19:15:42+03:00 2020-07-20T19:15:42+03:00/

Html ve Css kullanarak basit bir açılır menü yapmak istiyorum. Yana açılan bir menü olmasını istiyorum. Az çok kafamda bazı kodlar var ama tam net olarak kodları nasıl yazacağımı ve nereye yazacağımı bilmiyorum. Bunun için hazır kod veya bir örnek gösterecek arkadaş var mı?

1 Cevap

  1. Burak Sakarya Biraz yazılım, biraz elektronik, birazda tasarım...
    2020-07-20T20:33:29+03:00 20:33 20 Temmuz 2020

    Css’de açılır menü yapmak için öncelikle alt alta <ul> ve <li> ler ile htmlini kodlamalasınız. Örnek olarak aşağıdaki koda bakabilirsiniz.

    <!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>

    Html kısmı bu şekildeydi. Şimdi ise CSS olarak menümüze şekil vermemiz gerekiyor. Bunun içinher bir li elemanını gizlemelisiniz. Ancak hover olduğunda yani fare ile üstüne gelindiğinde açılmasını sağlamamız gerekiyor. Bunu da şu css kodu ile yapabiliriz.

    .menu ul li ul{display:none}
.menu ul li:hover ul

    Burada dedik ki menünün üstüne gelindiğinde li elemanlarını görünür yap. 

    .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;
  
}

    Yukarıda verdiğimiz kod ile açılır bir menü oluşturabilirsiniz.

    Oluşturduğunuz menünün şekli ise aşağıdaki gibi olacaktır.