Html' de Açılır Menü

Örnek:Aşağıdaki sayfada yatay ve dikey açılır menü kullanılmıştır.

Açılır menü örneği

index.html kodları:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Başlıksız Belge</title>

</head>

<body>

<ul>

<li><a href="A">ANASAYFA</a></li>

<li><a href="A">HAKKIMIZDA</a>

<ul>

<li><a href="A">MİSYON</a></li>

<li><a href="A">VİZYON</a></li>

</ul>

</li>

<li><a href="A">İLETİŞİM</a></li>

<li><a href="A">BİZE ULAŞIN</a></li>

</ul>

</div>

<ul>

<li><a href="B">ANASAYFA</a></li>

<li><a href="B">HAKKIMIZDA</a>

<ul>

<li><a href="B">MİSYON</a></li>

<li><a href="B">VİZYON</a></li>

</ul>

</li>

<li><a href="B">İLETİŞİM</a></li>

<li><a href="B">BİZE ULAŞIN</a></li>

</ul>

</div>

</div>

</body>

</html>

stil.css kodları:

@charset "utf-8";
/* CSS Document */

#kapsayici
{height:900px;
width:800px;
border-radius:20px;
background-color:#999999;
margin-left:auto;
margin-right:auto;
padding:20px;
}

#ust
{height:100px;
background-color:#99CCFF;
}
#orta
{width:800px;
height:500px;
}

#ortasol
{background-color:#FFFFFF;
width:300px;
height:600px;
float:left;
}

#ortasag
{background-color:#9999FF;
width:500px;
height:600px;
float:left;
}

#ust ul
{list-style-type:none;
margin:0px;
padding:0px;
}

#ust ul li
{float:left;
position:relative;
background-color:#00FF00;
border:3px dotted #0000FF;
border-radius:30px;
}

#ust ul li a
{width:100px;
display:block;
background-color:#FF0000;
margin:10px;
padding:10px;
}

#ust ul li ul
{display:none;
position:absolute;
}

#ust ul li:hover ul
{display:block;
}

#ortasol ul
{list-style-type:none;
margin:0px;
padding:0px;
}

#ortasol ul li
{position:relative;
width:100px;
}

#ortasol ul li ul
{display:none;
position:absolute;
left:115px;
top:-5px;
}

#ortasol ul li a
{width:100px;
background-color:#CC99FF;
padding:5px;
margin:5px;
display:block;
}

#ortasol ul li:hover ul
{display:block;
}

table
{width:100%;
}

td,th
{padding:10px;
border:2px dotted #FF0000;
}

form input[type="text"],form input[type="password"],form select
{width:200px;
height:30px;
}

form input:focus
{background-color:#66FFFF;
}

form input[type="submit"],form input[type="reset"]
{width:100px;
height:40px;
background-color:#CC9999;
border:3px groove #3399CC;
}

*
{margin:0px;
padding:0px;

}

Html' de Açılır Menü

0 yorum :

Yorum Gönder

Öne Çıkan Yayın

iframe Örneği 1

Arşiv Blog