Açlan Menü Örnei

[muratangin]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Konuya Başlamadan Önce Sabit Olması Dileğiyle...




Arkadaşlar Önce Bir HTML Sayfası Açıp Body Kısmına ;

<ul id="menu" >
    <li><a href="http://*****.tk">Anasayfa</a></li>
    <li><a href="http://*****.tk/html/">HTML Dersleri</a>
    <ul>
        <li><a href="http://*****.tk/html/ders1.html">Ders 1</a></li>
        <li><a href="http://*****.tk/html/ders2.html">Ders 2</a></li>
        <li><a href="http://*****.tk/html/ders3.html">Ders 3</a></li>
        <li><a href="http://*****.tk/html/ders4.html">Ders 4</a></li>
        <li><a href="http://*****.tk/html/ders5.html">Ders 5</a></li>
    </ul>
    </li>
    <li><a href="http://****.tk/yakinda.html">PHP Dersleri</a>
    <ul>
        <li><a href="http://****.tk/yakinda.html">Ders 1</a></li>
        <li><a href="http://****.tk/yakinda.html">Ders 2</a></li>
        <li><a href="http://****.tk/yakinda.html">Ders 3</a></li>
        <li><a href="http://****.tk/yakinda.html">Ders 4</a></li>
        <li><a href="http://****.tk/yakinda.html">Ders 5</a></li>
    </ul>

Yazıyoruz...

NOT :

Buradaki <ul> ve <li> tagları Listeleme Taglarıdır.Google Üzerinden Ayrıntılı Bilgiye Ulaşabilirsiniz.

Şimdi Sayfamızım Head Kısmına Gelip ;

<link href="css/stil.css" rel="stylesheet" type="text/css" />

Yazıyoruz...

NOT :

Buradaki <link> tagı Bir Olayı (Css ,Java) Çağırmak İçin Kullanılır.

Şimdi Gelelim stil.css Dosyamıza...

Css Dosyamıza Şu Kodları CTRL + C ve CTRL + V Yaparak Yapıstırın.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
	border-bottom:solid 1px;
}

ul li {
    position: relative;
	font-weight:bold;
	font-style:italic;
}

li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    background-color: #E2E2E2;
    padding: 5px;
    border:1px solid #000;
    border-bottom:0;
	text-align:center;
}

li:hover ul {
    display: block;
	background-color:#333
}

ul li a:hover {
	color:#FFF;
	background-color:#888;
	}

.menu {
	border:solid 1px;
	border-color:#000;
	border-bottom:solid 4px;
}

Şimdi Açıklamalar...

Burada <ul> tagı ve İçindekiler İle İlgili Bazı Font ,Text ,Renk Ayarlarını Yaptık.
Küçük Birer Css Bilgisi Size Buradaki Kodları Anlamada Yardımcı Olabilir...

Ve Sonuçta...

 

[mckatran]

1. yorum bendne Güzel