Kasım 7, 2007 6

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.



6 Yorum var. “Basit Yatay Css Menu Yapımı”

  1. 1

    yusuf

    Paylaşım için teşekkürler.
    Bu menüyü nasıl dikey menü yapabilirim. Display:block; yapıyorum ama olmuyor.

    26 Ekim 2008 - 05:18
  2. 2

    Spaksu

    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.

    26 Ekim 2008 - 10:16
  3. 3

    gempili

    @yusuf “display:inline” kodunu kaldırman yeterli.menu otomatik olarak dikey olacaktır.

    16 Mayıs 2009 - 15:36
  4. 4

    black29

    dostum teşekkurler dertten kurtardın benı

    3 Ağustos 2009 - 23:30
  5. 5

    vaillante

    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…

    1 Şubat 2010 - 19:30
  6. 6

    Safa Paksu

    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.

    1 Şubat 2010 - 20:34
Geri izlemeler :

Yorum Yazın.