CSS kullanarak bir menü oluşturmak oldukça yaygındır. İşte basit bir yatay menü örneği:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menü Biçimlendirme Örneği</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
padding: 1em 0;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #444;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
nav li {
margin-right: 10px;
}
nav a {
text-decoration: none;
color: #fff;
padding: 10px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #555;
}
</style>
</head>
<body>
<header>
<h1>Web Sitesi Başlığı</h1>
</header>
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">Ürünler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<section>
<h2>İçerik Başlığı</h2>
<p>İçerik buraya gelecek.</p>
</section>
</body>
</html>
Bu örnekte:
headeretiketi ile başlık kısmı oluşturulmuştur.navetiketi ile menü oluşturulmuştur. Menü öğeleriulvelietiketleri içinde yer almaktadır.- Menü öğeleri (
nav a) renk, padding, border-radius gibi özelliklerle biçimlendirilmiştir. Hover durumunda arka plan rengi değişimi eklenmiştir.
Bu stil özelliklerini kullanarak menüyü ihtiyacınıza göre özelleştirebilirsiniz. Bu örnekte menü yatay olarak düzenlenmiştir. Aynı yaklaşımı dikey bir menü oluşturmak için de kullanabilirsiniz.