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;
}
  • Yazı Etiketleri :
  • css yatay menü
  • css dikey menü
  • tek sayfada yatay ve dikey menu oluşturma
İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Css ile web sayfası tasarımı örneği yapımı
Yazıyı Oku

Css ile web sayfası tasarımı örneği yapımı

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Menu