Css ile Dikey Sabit Menü Yapımı

Bu yazımızda Html ve Css ile dikey sabit menü nasıl yapılır? onu öğreneceğiz. Bazı websitelerinde, sayfada aşağı indiğimiz halde menü hep solda sabit olarak görünür durumda oluyor. İşte bunlara fixed menüler diyoruz.

Menümüzü yapmaya başlayalım.

Menülerimizi oluştururken temelde sırasız listeleri (<ul><li> </li></ul>) kullanıyoruz. Daha sonra ise Css kodlarıyla menümüzü şık bir tasarıma kavuşturuyoruz.

Örneğimizi inceledikten sonra Html listeleri konusunda eksikleriniz olduğunu düşünürseniz,

Html Listeleme Etiketleri – ul Etiketi – ol Etiketi

Html Listeleme Örnekleri – İç İçe Listeler

yazılarımı okuyabilirsiniz.

Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.

Css ile Dikey Sabit Menü Yapımı

Sabit Dikey Menü Html Kodları

<div id="menu">
<ul>
<li>
<a href="#" class="active">Anasayfa</a>
</li>
<li>
<a href="#">Servisler</a>
</li>
<li>
<a href="#">Hakkımda</a>
</li>
<li>
<a href="#">İletişim</a>
</li>
</ul>
</div>
<div id="content">
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
<h1>Fixed Dikey Menü</h1>
</div>

<ul>

<li>

<a href="#" class="active">Anasayfa</a>

</li>

<li>

<a href="#">Servisler</a>

</li>

<li>

<a href="#">Hakkımda</a>

</li>

<li>

<a href="#">İletişim</a>

</li>

</ul>

</div>

<h1>Fixed Dikey Menü</h1>

</div>

Sabit Dikey Menü Css Kodları

body {
margin: 0px;
}
#menu {
width: 200px;
background-color: #4fb99f;
position: fixed;
height: 100%;
overflow: auto;
}
#content {
margin-left: 200px;
padding: 1px 20px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
ul li a {
padding: 12px;
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
border-left: 5px solid #4fb99f;
}
ul li a.active {
background-color: #068587;
border-left: 5px solid #f2b134;
}
ul li a:hover:not(.active) {
background-color: #068587;
border-left: 5px solid #f2b134;
}

body {

margin: 0px;

}

#menu {

width: 200px;

background-color: #4fb99f;

position: fixed;

height: 100%;

overflow: auto;

}

#content {

margin-left: 200px;

padding: 1px 20px;

}

ul {

padding: 0;

margin: 0;

list-style-type: none;

}

ul li a {

padding: 12px;

display: block;

text-decoration: none;

color: #fff;

font-size: 18px;

border-left: 5px solid #4fb99f;

}

ul li a.active {

background-color: #068587;

border-left: 5px solid #f2b134;

}

ul li a:hover:not(.active) {

background-color: #068587;

border-left: 5px solid #f2b134;

}

Yaptıklarımızı kısaca özetleyecek olursak;

► Menü elemanları için bir <ul> <li> listesi yazıyoruz.

► Class’ı active olan link’e farklı bir renk vererek belirgin hale getiriyoruz.

► Menü elemanlarına hover efekti ve sol kenarlık veriyoruz.

► Sayfa içeriğini doldurmak için h1 etiketleri tanımladım.

► Menü genişliğini 200px yapıyoruz. Verdiğimiz değer kadar (200px) içeriğin bulunduğu alanı sağa kaydıracağız. Burda yüzde değerleride kullanabilirsiniz.

Örneğin menü genişliği 20%, içerik genişliği 80% gibi..

► Menü yüksekliğine 100% ve position değerine fixed veriyoruz.

Sabit Dikey Menümüzün Son Hali

Şu Html ve Css menü örnekleri de ilginizi çekebilir.

Responsive Menü Yapımı

Css ile Yatay Sticky Menü Yapımı

Css ile Yatay Sabit Menü Yapımı

Css ile Yatay Menü Yapımı

Css ile Yatay Açılır Menü Yapımı

Css ile Dikey Menü Yapımı

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.