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─▒

  • Ortamak i├žin k─▒sa ve kolay bir etiket olan <!– ÔÇŽÔÇŽ –> i ├Âneririm noktal─▒ yere ne yazarsan─▒z onu ortalayacak ve i┼činizi kolaylat─▒racakt─▒r.

  • Te┼čekk├╝rler, g├╝zel anla┼č─▒l─▒r anlat─▒m─▒n─▒z i├žin.

Bi Yan─▒t B─▒rak:

E-posta hesab─▒n─▒z yay─▒nlanmayacak.

┬ę 2007-2017 T├╝m haklar─▒ Spaksu Blog'a aittir.

Kullan─▒m ┼×artlar─▒ yerine getirilmeden hi├žbir ┼čekilde kopyala - yap─▒┼čt─▒r yap─▒lamaz, yaz─▒lar ve bilgiler kullan─▒lamaz.