Basit Yatay Css Menu Yapımı

29-11-2007, 18:24:53

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.

29-11-2007, 18:33:40

#2

YasinCELEN

Güzel anlatım olmuş

teşekkürler +rep

30-11-2007, 22:50:12

#3

SrcnCkr

Untitled Document

Kendi uygulamalarım, kaynağı inceleyerek kullanım hakkında bilgi sahibi olabilirsini

not : zamanla güncellenecektir liste.

01-12-2007, 00:04:06

#4

Freezer

SrcnCkr adlı üyeden alıntı: mesajı görüntüle

Untitled Document

Kendi uygulamalarım, kaynağı inceleyerek kullanım hakkında bilgi sahibi olabilirsini

not : zamanla güncellenecektir liste.

Bir başkasının konusunda kendi hazırladıklarını paylaşmasan iyi olur bu tarz paylaşımlar hoş karşılanmaz konu sahipleri tarafından biliyorum amacın paylaşım ama dediğim gibi hoş olmuyor.

02-12-2007, 06:43:33

#5

SrcnCkr

İlginç. Peki, bizde kendimize saklarız.

13-12-2007, 04:31:08

#6