Basit Yatay Css Menu Yapımı → Spaksu™ Blog

CSS sitelerimizi oluştururken kullandığımız vazgeçilmez bir yapıdır. Bu konuda sizlere basit uygulayabileceğiniz bir örnek sunuyorum. Umarım faydalı olur.

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

[syntax type=”html”]
<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>
[/syntax]
3- Sıra geldi css yapısını oluşturmaya :

[syntax type=”css”]
<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>
[/syntax]

4- Alttaki sayfada css olarak istediğiniz değişikliği yapabilirsiniz. işte cssmenu.html full yapısı;

[syntax type=”html”]
<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>
[/syntax]