CSS Yatay Menu Yapımı

Bu makalemde Web Sayfalarınıza eklemek için CSS yatay Menu yapımını kısa ve basit bir sekilde anlatacağım.Sizlerde kodları takip ederek basit bir sekilde kendinize özgü yatay menüler hazırlayabilirisiniz.
AçıklamaCss Kod
ilk olarak menu adında bir div id olustuyoruz genisligini 500px font tipini font un boyutunu arka plan rengini gibi ayarlarını dilediginiz gibi ayarlayabilirisiniz.#menu {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px;}
li list item dan gelen bir html etiketidir.menu listesini sıralamak amacıyla yazılır.float left sola yaslama anlamına gelmektedir.yani liste elemanlarını soldan saga dogru sıralayacagız.
a harfi liste elemanlarına link vermek amacıyla yazılır.linklere hover efekti uygulamak için de a:hover kullanılır.Hover efekti linkin üzerine mouse ile gelince görünümünün degişmesidir.		#menu li {
float: left;
margin: 0; 
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
}
#menu li a:hover{
background-color: #fff;
border-bottom: 2px dotted #DDD;
color: #999;
}
wrapper'ı css menu'nün iskeleti gibi düşünebilirisiniz.menü'nun taşıp dagılmasını engellemek için kullanırız burada ayrıca border dotted kullandım siz border stilini degiştirebilirsiniz.
bu kısa acıklamalardan sonra menumuzu tamamlamıs olduk.		#menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; } 
#menu_wrapper.yatay a {color: #fff;}
#menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }

Şimdi buraya kadar yazdığımız kodlar css içindi,hazırlamış olduğumuz Css menu'nün gözükmesi için html kodları eklememiz lazım. < body > etiketleri içine < / body >

<div id="menu_wrapper" class="yatay">
                    <ul id="menu">
                <li><a href="#">Ana Sayfa</a></li>
                <li ><a href="#">Hakkımda</a></li>
                <li><a href="#">Portfolyo</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>
bu etiketleri yazdıktan sonra yazının içindeki yatay css menümüzü olusturmuk olduk.Şimdi tamamen kaynak kodları toplu bir şekilde ekliyorum daha rahat denemeler yapabilmeniz açısından sizler için daha yararlı olacaktır.
--- CSS KODLARI ---

  • #menu { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; padding: 0; list-style-type: none; background-color: #eee; font-size: 12px; height: 40px; width: 500px; }
  •  #menu li { float: left; margin: 0; }
  •  #menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; }
  •  #menu li a:hover{ background-color: #fff; border-bottom: 2px dotted #DDD; color: #999; }
  •  #menu_wrapper.yatay ul { background-color: #000000; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #CCC; border-bottom-color: #CCC; }
  •  #menu_wrapper.yatay a {color: #fff;}
  •  #menu_wrapper.yatay li a:hover{ color: #FFFFFF; background-color: #006699; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-top-color: #006699; }
--- HTML KODLARI ---
  • <div id="menu_wrapper" class="yatay">      
  • <ul id="menu">
  • <li><a href="#">Ana Sayfa</a></li>
  • <li ><a href="#">Hakkımda</a></li>
  • <li><a href="#">Portfolyo</a></li>
  • <li><a href="#">İletişim</a></li>
  •  </ul>
  • </div>

0 yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)