Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Açılır Menü Oluşturma Uygulaması programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle Açılır Menü Oluşturma Uygulaması nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.
Css ve Html İle Açılır Menü Oluşturma Uygulaması Kod Alanı
Css ve Html web programlama dilinde Açılır Menü Oluşturma Uygulaması kod metnini oluşturduk. Bu uygulamamızda html ve css kullanımı ile basit bir yatay açılır menü oluşturacağız. Uygulamamızda index.html dosyası incelendiğinde iç içe liste oluşturduğumuz gözükmektedir. İşte oluşan bu listeyi css ile yatay bir menü haline getireceğiz.
Uygulamanın html kod metin alanı aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.programlamahocam.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>
.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;
}Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.