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
Javascript if - else - else if çözümlü sorular
Yazıyı Oku

Javascript if - else - else if çözümlü sorular

Css ile kutu modeli oluşturma (box model örneği)
Yazıyı Oku

Css ile kutu modeli oluşturma (box model örneği)

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme
Yazıyı Oku

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme

Nesne tabanlı programlama uygulamaları (try - catch - finally)
Yazıyı Oku

Nesne tabanlı programlama uygulamaları (try - catch - finally)

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme
Yazıyı Oku

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme

İ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ı

Menu