• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Css Kullanarak Açılır Menüler Oluşturmak

Konuyu Okuyan Kişiler (0)

GüçNet

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
965
Beğeniler
0
Yaş
26
Konum
Akkapı
#1



Bu dersimizde sizlere css ile açılır menü hakkında bilgi vereceğim.

Css Kodları

HTML:
/* MENU ana cerceve*/
#menu {
    width:1000px;
    display:inline-block;
    padding:0px;
    background-color: #575762;
    text-align:center;
}
/* Ana menu */
.hmenu {
    display:inline-block;
    padding:0px;
    margin:0px;
    list-style:none;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFF;
}
/* Ana Menu elemanlari */
ul.hmenu>li {
    float:left;
    position:relative;
    display:block;
    color: #FFF;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom:3px;
    padding-top:3px;
}
/* Ana Menu uzerine gelince arka plan rengi */
ul.hmenu li:hover {
    background-color: #67697A;
}
/* Ana menu link bicimlendirme */
ul.hmenu li a {
    color: #FFF;
    text-decoration: none;
    display:block;
}
/* alt menu */
ul.hmenu ul {
    position:absolute;
    list-style:none;
    display:none;
    min-width:120px;
    margin-top:3px;
    left:-1px;
}
/* Alt menu bicimlendirme */
ul.hmenu ul li {
    background-color:#505E69;
    margin:1px;
    text-align: left;
    padding:3px;
}
/* Ana menu uzerine gelince alt menuyu ac */
ul.hmenu li:hover>ul {
    position:absolute;
    display:block;
    padding:0px;
}
/* bitti */
#menü, arka plandaki div tagımız. Bu şekilde arka planımız sayfayı boydan boya kaplarken, ekstra bir uğraşa girmeksizin menümüzü de ortalayabiliyoruz.
.hmenu(horizontal(yatay) menü) ana menumuz oluyor, tabi içinde ise menü elemanlarimiz var. bu durumda menümüz ul ve li etiketlerinden oluşmaktadır.
ul.hmenu ana menümüz ise onun içerisindeki diğer ul ise alt menümüzdür bu durumda tanımlamayı ul.hmenu ul olarak yaptık. Alt menümüzün görünürlüğünü ise none olarak belirledik. Bu durumda alt menü görünmeyecektir.
ul.hmenu li:hover>ul Burada ise ana menü elemanı üzerine gelince alt menümüzü görünür yapıyoruz ve böylelikle de alt menümüz açılmış oluyor.

ÖRNEK KODLARIMIZ AŞAĞIDAKİ GİBİDİR.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Nav Menu</title>
<style type="text/css">
#menu {
    width:1000px;
    display:inline-block;
    padding:0px;
    background-color: #575762;
    text-align:center;
}
.hmenu {
    display:inline-block;
    padding:0px;
    margin:0px;
    list-style:none;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFF;
}
ul.hmenu>li {
    float:left;
    position:relative;
    display:block;
    color: #FFF;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom:3px;
    padding-top:3px;
    min-height:20px;
}
ul.hmenu li:hover {
    background-color: #67697A;
}
ul.hmenu li a {
    color: #FFF;
    text-decoration: none;
    display:block;
}
ul.hmenu ul {
    position:absolute;
    list-style:none;
    display:none;
    min-width:120px;
    margin-top:3px;
    left:-1px;
}
ul.hmenu ul li {
    background-color:#505E69;
    margin:1px;
    text-align: left;
    padding:3px;
}
ul.hmenu li:hover>ul {
    position:absolute;
    display:block;
    padding:0px;
}
 
</style>
</head>
 
<body>
<div id="menu">
  <ul class="hmenu">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Kategoriler (+)</a>
      <ul>
        <li><a href="#">Alt Menü 1</a></li>
        <li><a href="#">Alt Menü 2</a></li>
        <li><a href="#">Alt Menü 3</a></li>
      </ul>
    </li>
    <li><a href="#">İşlemler</a>
      <ul>
        <li><a href="#">Alt Menü 1</a></li>
        <li><a href="#">Alt Menü 2</a></li>
        <li><a href="#">Alt Menü 3</a></li>
      </ul>
    </li>
    <li><a href="#">İletişim</a></li>
  </ul>
</div>
</body>
</html>
 

yaşlıçocuk

webmaster.tc
Katılım
22 Eyl 2013
Mesajlar
72
Beğeniler
0
#3
css olmadan bunları hazır bir program varmı bunlar beni yrouyor sadece html den anlıyorum frontpage gibi..