Css+HTML ile Açılır Menu Yapımı

Merhaba,

Bu yazımızda css ve html kullanarak bir açılır menü örneği yapacağız.Birçok Web sayfasında gördüğümüz iç içe açılır menüler ile sayfalarınızı zenginleştirebilir ve kullanıcılara sayfanızdaki içeriklere kısa yollar ile erişmesine yardımcı olabilirsiniz.Web sayfaları için açılır menü yapmanın bir çok yöntemi vardır ancak CSS VE HTML kodlaması ile de daha hızlı ve bir çok farklı biçimde açılır menüler gerçekleştirebilirsiniz.

Örnek olarak yapacağımız açılır menü görünümünü yandaki resimde görebilirsiniz.

Sizde aşağıdaki kodları yazarak bu türde açılır menüler oluşturabilir ve sayfalarınızda kullanabilirsiniz.

Emrah KOZAN – Web & Grafik Eğitmeni

Bilge Adam Bilişim Akademisi Antalya Şube

İlk olarak Dw programı ile files paneli içinde  menu.html adında bir dosya açıyoruz, birde alt klasör oluşturup adına style diyoruz.style klasörü içinde bicim.css adında bir dosya daha oluşturup kaydediyoruz.Oluşturduğumuz dosyaları birbirine bağlamak için menu.html içerisinde head etiketi altında link kodları ile css dosyasını html içerisinde çağırıyoruz.

<head>

<link rel=”stylesheet” type=”text/css” href=”bicim.css” />

</head>

Bu işlemden sonra css ve html dosyası birbirini tanımış olacaktır.Harici bir dosyayı html içerisine link yöntemi ile bağlayabilirsiniz.

Daha sonra css kodlarımızı bicim.css isimli dosyamıza yazarak devam ediyoruz.

 

CSS KODLARI……………………………………………………………………………………

#menu /*MENUYU KAPSAYACAK OLAN DİVİN İDSİ*/
{
margin:0px; /*TÜM İÇ VE DIŞ BOŞLUKLARI SIFIRLIYORUZ*/
padding:0px;
}

#menu ul
{
margin:0px;
padding:0px;
}

 

#menu li /*ANA MENU ÖĞELERİNİ OLUŞTURUYORUZ*/
{
position:relative;
float:left;
list-style-type:none;
margin:0px;
padding:0px;
}

#menu li a /*ANA MENU ÖĞELERİNİN LİNK OLMA DURUMUNU BİÇİMLENDİRİYORUZ*/
{
width:100px;
height:30px;
display:block;
text-decoration:none;
text-align:center;
line-height:30px;
background-color: red;
color:#C90;
}

#menu li a:hover /*ANA MENU ÖĞELERİNİN VE ALT MENULERİN HOVER DURUMUNU BİÇİMLENDİRİYORUZ(MOUSE ÜZERİNDE OLAYINI)*/
{
background-color: yellow;
}

#menu ul ul  /*ALT MENULERİ BİÇİMLENDİRİYORUZ*/
{
position:absolute;
top:30px;
visibility:hidden;/*ALT MENULERİN GÖRÜNÜMÜNÜ STATİK DURUMDA GİZLİYORUZ*/
}

#menu ul li:hover ul
{
visibility:visible; /*ALT MENU ÖĞELERİNİ HOVER DURUMUNDA GÖRÜNÜR YAPIYORUZ*/
}

Css Kodlarımız burada bitiyor.Daha sonra HTML kodlarımızı yazarak menülerimizi oluşturuyoruz

 

 

HTML KODLARI……………………………………………………………………………………

Html içerisinde <body></body> etiketi içerisine aşağıdaki kodları yazarak ana menulerimizi ve alt menulerimzi oluşturabiliriz

 

<div id=”menu”>

<ul>

<li> <a href=”#”>ANA MENU1</a>

<ul>

<li> <a href=”#”>ALT MENU 1</a></li>

<li> <a href=”#”>İALT MENU2</a></li>

<li> <a href=”#”>ALT MENU3</a></li>

</ul>

</li>

<li><a href=”#”> ANA MENU2</a>

<ul>

<li> <a href=”#”>ALT MENU 1</a></li>

<li> <a href=”#”>ALT MENU1</a></li>

<li> <a href=”#”>ALT MENU2 </a></li>

</ul>

</li>

</ul>

</div>

Umarım Faydalı olur.Kolay gelsin

Emrah KOZAN – Web & Grafik Eğitmeni

 

3 Responses to “Css+HTML ile Açılır Menu Yapımı

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>