CSS ile Menü Oluşturmak
CSS ile hazırlanacak menünün önizlemesine buradan, dosyalara da buradan ulaşabilirsiniz.. Aşağıdaki yazıdan da menünün nasıl hazırlandığını inceleyebilirsiniz.
CSS menü bir css sayfası (bicim.css) ve o sayfayı kullanan bir html sayfasından (css_menu.html) oluşuyor. mavi isimli bir class ve bu class altında menu isimli id seçici tanımlanıyor.
bicim.css Sayfasının Kodları:
.mavi #menu {
position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
font-family:tahoma;
background-color: transparent;
background-image: url(resimler/zemin.gif);
background-repeat: repeat-x;
background-position: left top;
}
.mavi #menu ul {
width: auto;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.mavi #menu ul li {
margin-right: 0px;
display: block;
float: left;
}
.mavi #menu ul li a{
display:block;
float:left;
color:#D5F1FF;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;}
.mavi #menu ul li a:hover{
color:#fff;
background-color: transparent;
background-image: url(resimler/zemin_ustune_gelince.gif);
background-repeat: no-repeat;
background-position: center top;
}
css_menu.html Sayfasının Kodları:
<div class=”mavi”>
<div id=”menu”>
<ul>
<li><a href=”http://www.sitedefteri.net/” mce_href=”http://www.sitedefteri.net/”>Ana Sayfa </a> </li>
<li><a href=”http://www.sitedefteri.net/category/css/” mce_href=”http://www.sitedefteri.net/category/css/”>CSS</a></li>
<li><a href=”http://www.sitedefteri.net/site-haritasi/” mce_href=”http://www.sitedefteri.net/site-haritasi/”>Site Haritası </a> </li>
</ul>
</div></div>
