Css ile Menu yapımı

Css ile menu yapımı. Webmasterlerin en çok ihtiyacı ve sitenin görünümü için menuler gereklidir.bizde bu konumuzda menu yapımını anlatacagım.

Dikey menü tasarımı

Kodun görünümü
<ul>
<li>Bilgisayar</li>
<li>Matematik</li>
<li>Fen bilgisi</li>
<li>Türkçe</li>
</ul>


Yukarıdaki kodumuzdaki menu yapımı için ul ve li etiketlerini kullanıyoruz.

<style type="”text/css”"><!--
ul li {
list-style-type: none;
border: 1px solid blue;
}
--></style>


css kodları arasına display:inline;     Eklediğinizde menumuz yatay şekilde kullanabilirsiniz.

Menumuzun düzgün bir şekilde görünmesi için li etiketinin oluşturduğu noktaları css'nin yardımıyla kaldıralım.

list-style-type: none; css kodunu eklediğimizde li etiketinin oluşturduğu nokta görünümünü kaldırır.

Menumuz ilk görünümü kazandırmak ve kenar rengi vermek için aşağıdaki kodu kullanarak

<strong> border: 2px solid yellow; </strong>kodunu kullanabılırsınız

kodun görünümü

<ul>
<li style="list-style-type: none; border: 2px solid yellow;">Bilgisayar</li>
<li style="list-style-type: none; border: 2px solid yellow;">Matematik</li>
<li style="list-style-type: none; border: 2px solid yellow;">Fen bilgisi</li>
<li style="list-style-type: none; border: 2px solid yellow;">Türkçe</li>
</ul>
Şimdi menumuzun genişliğini kucultmek lazım bu şekilde menu kullanılmaz tabi

width:100px; ekleyerek sağa doğru kayan sarı kenarlıklar düşecektır.

Kodun görünümü

width:100px; ekledikten sonra kodu görünümü

<ul>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px;">Bilgisayar</li>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px;">Matematik</li>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px;">Fen bilgisi</li>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px;">Türkçe</li>
</ul>
Menumuz şimdi hazır ve şimdi daha güzel görünüm için arka plan rengi gerekli

background-color:blue;css kodunu kullanacağız.

background-color:blue; css kodunu ekledikten sonra görünümü

<ul>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px; background-color: gray;">Bilgisayar</li>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px; background-color: gray;">Matematik</li>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px; background-color: gray;">Fen bilgisi</li>
<li style="list-style-type: none; border: 2px solid yellow; width: 100px; background-color: gray;">Türkçe</li>
</ul>
Usteki menunun css kodları

<style type="”text/css”"><!--
ul li {
list-style-type: none;
border: 1px solid blue;

width:100px;

background-color:gray;

}
--></style>


Şimdi menumuz hazır ve daha güzel görünüm katmak için mausla menunun uzerine gelince  arka plan rengi değişşin ve güzel görünüme kavuşşun

şimdi css'imize

ul li:hover{
background-color:blue;
color:white;
}

kodları ekledıkten sonra gorunumu

<ul>
<li style="list-style-type: none; border: 1px solid blue; width: 100px; padding: 2px 10px; background-color: #22010291; color: white;" onmouseover="this.style.backgroundColor='gray';" onmouseout="this.style.backgroundColor='blue'">Bilgisayar</li>
<li style="list-style-type: none; border: 1px solid blue; width: 100px; padding: 2px 10px; background-color: #22010291; color: white;" onmouseover="this.style.backgroundColor='gray';" onmouseout="this.style.backgroundColor='blue'">Matematik</li>
<li style="list-style-type: none; border: 1px solid blue; width: 100px; padding: 2px 10px; background-color: #22010291; color: white;" onmouseover="this.style.backgroundColor='gray';" onmouseout="this.style.backgroundColor='blue'">Fen bilgisi</li>
<li style="list-style-type: none; border: 1px solid blue; width: 100px; padding: 2px 10px; background-color: #22010291; color: white;" onmouseover="this.style.backgroundColor='gray';" onmouseout="this.style.backgroundColor='blue'">Türkçe</li>
</ul>

Linkback: https://www.buyuknet.com/css-ile-menu-yapimi-t40708.0.html

Yapmaya çalışın yardımcı oluruz.