css ve html kod bilgilerimizi kullanarak basit bir dikey menü hazırlayacağım sizler için dekmenü adında bir klasör oluşturun. verdiğim kodlar isterseniz 2 dosyada yapın istersenizde tek bir dosyada birleştirin. ama bana kalırsa css ve html dosyalarını ayrı ayrı hazırlayın.

evet hazırsanız başlayalım.

menu.css dosyamızın kodlarını yazarak işe başlayalım.

 

p, ul, li, div, nav
{
padding:0;
margin:0;
}

body
{
font-family:Calibri;
}

menu
{
overflow: auto;
position:relative;
z-index:2;
}

.parent-menu
{
background-color: #0c8fff;
min-width:200px;
float:left;
}

#menu ul
{
list-style-type:none;
}

#menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}

#menu ul li a:hover
{
background-color:#007ee9;
}

#menu ul li:hover > ul
{
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}

#menu ul li > ul
{
position: absolute;
background-color: #333;
top: 0;
left: -200px;
min-width: 200px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}

#menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}

 

evet css tanımlamamızı yaptık

 

şimdidde html kodlarımızın bulunduğu sayfayı hazırlayalım.

index.html sayfamızın kodları:

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1254" />

<title> dikey menü </title>

<meta name="keywords" content="anahtar kelimeler buraya" />
<meta name="description" content="açıklamalar buraya"/ >

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

</head>

<body>

<h1>CSS3 Dikey Menü Yapımı</h1>

<nav id="menu"><!--Bir id si menu olan bir nav bar oluşturduk-->
<ul class="parent-menu"><!--Asıl menümüzün bulunduğu yer-->
<!--Menümüzün itemleri-->
<li><a href="#">Anasayfa</a><!--İlk linkimiz-->
<ul><!--anasayfanın alt menüsü-->
<li><a href="#">Konsol</a> <!--Konsol kısmının alt menüsü-->
<ul><li><a href="#">PHP Dersleri</a></li>
<li><a href="#">Gencbilgin</a></li>
<li><a href="#">Alfa</a></li>
<li><a href="#">Beta</a></li>
</ul></li>
<li><a href="#">PHP Dersleri</a></li>
<li><a href="#">Gencbilgin</a></li>
<li><a href="#">deneme</a></li>
<li><a href="#">sadık özdoğan</a></li>
<li><a href="#">Alfa</a></li>
<li><a href="#">Beta</a></li>
</ul>
</li>
<li><a href="#">Bilgisayar</a>
<ul>
<li><a href="#">PHP Dersleri</a></li>
<li><a href="#">Alfa</a></li>
<li><a href="#">Beta</a></li>
</ul></li>
<li><a href="#">ankara</a>
<ul>
<li><a href="#">sadık özdoğan</a></li>
<li><a href="#">Alfa</a></li>
<li><a href="#">Beta</a></li>
</ul></li>
<li><a href="#">İletişim</a>
<ul>
<li><a href="#">deneme</a></li>
<li><a href="#">sadık özdoğan</a></li>
</ul>
<li>
</ul>
</nav>

</body>

</html>

evet arkadaşlar dikey menümüzü bu şekilde oluşturduk.

sizlerde kendi menülerinizi oluşturabilirsiniz.

Bir önceki yazımız olan basit bir css örneği başlıklı makalemizde bağlantılı css, css ve css örnekleri hakkında bilgiler verilmektedir.

Bir cevap yazın

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