Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

20.11.2017
ilketkinlik
6333

Tek bir sayfada, css kutu modeli içerisinde tanımlanan yatay ve dikey menülerin kullanımı ve uygulamasıdır.

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css kutu modeli içerisinde kullanılacak olan yatay ve dikey menü uygulamalarının bir biriyle çakışmadan tek sayfada kullanımını uygulayacağız. Her iki menüde ul ve li elemanlarının birbiriyle çakışmadan tek sayfada görüntülemek için menüleri birbirinden ayırmak için css isimlendirmesi yapacağız.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="tasarim.css">
</head>
<body>
 <div class="anakutu">

 <ul class="yataymenu">
 <li><a href="#">Anasayfa</a></li>
 <li><a href="#">Mobilya</a></li>
 <li><a href="#">Dekorasyon</a></li>
 <li><a href="#">Elektronik</a></li>
 <li><a href="menu.html">Dikey menu</a></li>
 </ul>

 <ul class="dikeymenu">
 <li><a href="">Anasayfa</a></li>
 <li><a href="">Elektronik</a></li>
 <li><a href="">Hobi</a></li>
 <li><a href="">Dekorasyon</a></li>
 <li><a href="">Mobilya</a></li>
 <li><a href="yataymenu.html">Yatay menu</a></li>
 </ul>
 </div>
</body>
</html>

Sıra css dosyasının kodlarını yazıp, dosyalarımızın yan yana olup olmadığını kontrol ediyoruz.

.anakutu {
 width: 960px;
 padding: 20px 20px;
 margin: 40px auto;
 border: 1px solid #dddddd; }
.yataymenu {
 list-style: none;
 padding: 0;
 margin: 0;
 overflow: hidden;
 background: #555555;
 margin-bottom: 20px;
}
.yataymenu li {
 float: left;
}
.yataymenu li a {
 display: block;
 text-decoration: none;
 padding: 14px 16px;
 color: white;
 font: bold 14px Century gothic;
}
.yataymenu li a:hover {
 background: grey;
 color:black;
}

.dikeymenu {
 width: 200px;
 list-style: none;
 margin:0;
 padding:0;
}
.dikeymenu li {
 background: #4096ee;
 margin-bottom: 2px;
 border-left:5px solid #1d83ec;
}
.dikeymenu li a {
 display: block;
 padding: 10px 7px;
 text-decoration: none;
 color:white;
 font:bold 14px Calibri;
}
.dikeymenu li a:hover {
 background: #1d83ec;
 color: black;
}