Basit Yatay Css Menu Yapımı – SPAKSU™ Blog [fdx-switch-link]

Basit Yatay Css Menu Yapımı

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]

CSS Menuyu önizlemek için tıklayınız.

22 yorumlar On Basit Yatay Css Menu Yapımı

Bi Yanıt Bırak:

E-posta hesabınız yayınlanmayacak.

© 2006-2023 Tüm hakları Spaksu Markasına aittir.
Bu site ve içeriği, Kullanım Kuralları kapsamında belirtilen koşullar çerçevesinde kullanılmalıdır. Hiçbir şekilde site ve içeriğinin tamamı veya bir bölümü, Kullanım Şartları yerine getirilmeden özel izin alınmadan kopyalanamaz, dağıtılamaz, yeniden yayınlanamaz, çoğaltılamaz veya başka bir ortamda kullanılamaz