Yatay menüler, HTML ve CSS kullanarak oldukça kolay bir şekilde oluşturulabilir. Aşağıda, basit bir yatay menü oluşturmak için bir örnek kod yer almaktadır:
<nav>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
Bu kod, <nav> ve <ul> etiketleri ile bir menü oluşturur. Menü öğeleri, <li> ve <a> etiketleri içinde yer alır. Bu örnek, menü öğeleri için yalnızca birkaç özellik içermektedir. Daha ayrıntılı bir menü oluşturmak için, menü öğelerine özellikler ekleyebilirsiniz.
Ardından, CSS ile menüyü stilize edebilirsiniz. Aşağıdaki örnek kod, menü öğelerinin yatay olarak hizalanmasını, aralarındaki boşlukların belirlenmesini, menü öğelerinin stilini ve üzerine gelindiğinde değişen stil özelliklerini belirler:
nav {
background-color: #f2f2f2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin: 0 10px;
}
nav a {
display: block;
color: #333;
text-decoration: none;
font-weight: bold;
padding: 10px;
}
nav a:hover {
background-color: #333;
color: #fff;
}
Bu CSS kodu, menü arka planının rengini, menü öğelerinin yatay olarak hizalanmasını, menü öğeleri arasındaki boşluğu ve menü öğelerinin stilini belirler. :hover seçicisi, fare imlecini bir menü öğesi üzerine getirildiğinde değişen stil özellikleri tanımlar.
Bu örnek, basit bir yatay menü oluşturmanıza yardımcı olabilir. Daha karmaşık menüler oluşturmak için HTML ve CSS’de birçok seçenek ve özellik mevcuttur.
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.