Basit Yatay Css Menu Yapımı
1-İşte başlıyoruz önce cssmenu.html adında bir html dosyası oluşturalım. tek dosyada hem html hemde css kısmını ele alıcaz.
2-Menumüzü listeleme komutu olan <ul> komutunu kullanarak oluşturucağız işte menumuzun html kod yapısı:
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
3- Sıra geldi css yapısını oluşturmaya :
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>
4-Alttaki sayfada css olarak istediğiniz değişikliği yapabilirsiniz. işte cssmenu.html full yapısı;
<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
border-right:1px solid #FFFFFF;
background-color: #FF3300;
}
a:hover{
background:#CCCC00;
}
</style>
<meta HTTP-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS yatay menu</title>
</head>
<body>
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
CSS Menuyu önizlemek için tıklayınız.
7 Yorum var, Sizde yorumunuzu dile getirmek istermisiniz?
yusuf
Ekim 26th, 2008 at 05:18
Paylaşım için teşekkürler.
Bu menüyü nasıl dikey menü yapabilirim. Display:block; yapıyorum ama olmuyor.
Spaksu
Ekim 26th, 2008 at 10:16
Yusuf bey inceleyebileceğiniz iki tane adres vereceğim.
http://www.dynamicdrive.com/ ve http://www.exploding-boy.com/
dikey menu konusunda bunlardan faydalanabilirsiniz.
Eğer yetmezse “CSS Vertical Menu” diye googledan arattırabilirsiniz.
gempili
Mayıs 16th, 2009 at 15:36
@yusuf “display:inline” kodunu kaldırman yeterli.menu otomatik olarak dikey olacaktır.
black29
Ağustos 3rd, 2009 at 23:30
dostum teşekkurler dertten kurtardın benı
vaillante
Şubat 1st, 2010 at 19:30
Merhaba:
yaptığınız bilmeyenler için güzel bi kaynak hemde hoş bi tasarım olmuş
paylaştığınız kodları verdiğiniz için teşekkürler.
Benim sorum ise bu menüyü sayfamda nasıl ortalayabilirim
yardımcı olursanız sevinirim…
Safa Paksu
Şubat 1st, 2010 at 20:34
3. kısımdaki css bölümüne bu kodu ekleyin.
.ortala{
margin-left: auto;
margin-right: auto;
width: 50em;
}
4.kısımda bulunan <ul> kodunun üstüne;
<div class="ortala">ve </ul> kısmının altınada
</div>ekleyin.
sevda
Mayıs 19th, 2010 at 02:01
çok teşekkür ederim sizin sayenizde çok güzel bir menü yaptım emeğinize sağlık……