Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Dikey Açılır Menü(3 aşamalı)
     furkan452     13.12.2012     11:29:02

Bu çalışmamızda CSS kodlarını kullanarak dikey açılır nemü yapımı anlatılmıştır.Eksik yada fazla bulduğu şeyler için yorum ekleyebilirsiniz. 



Programın ekran çıktısı :

Progrsmın kodları:

<html>
<head>
<title>Css Açılır Dikey Menü Tasarımı</title>
<style type="text/css">
.menu ul {
   margin:0;
   padding:0;
   list-style:none;
   width:150px;
   border-buttom:1px solid gray;}
.menu li {
   position:relative;}
.menu li ul {
   position:absolute;
   list-style:none;
   left:149px;
   width:150px;
   display:none;
   top:0; }
   .menu li ul li ul {
   position:absolute;
   list-style:none;
   left:149px;
   width:150px;
   display:none;
   top:0; }
.menu li a { 
   display:block;
   text-decoration:none;
   color:#000;
   background-color:#fc3;
   font:bold 13px ;
   padding:5px;
   border:1px solid #cca "times new roman";
   border-buttom:0;}
.menu li a:hover{
   background-color:#012D58;
   color:#FF0;
   }
li:hover ul {
   display:block;
   }
   li ul li:hover ul {display:block;}
* html ul li {
   float:left;
   height:1%; }
</style>
</head>
<body>
<div class="menu">
<ul>
<li ><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
   <ul>
   <li><a href="#">Şirket Tarihçesi</a></li>
   <li id="1"><a href="#">Yöneticilerimiz</a></li>
   <li><a href="#">Çalışanlarımız</a></li>
   <li><a href="#">Faaliyetlerimiz</a></li>
   </ul>
<li><a href="#">Hizmetlerimiz</a>
   <ul>
   <li><a href="#">Web Tasarım</a></li>
   <li><a href="#">Hosting</a></li>
   <li><a href="#">Logo Tasarım</a>
<ul>
<li><a href="#">Resimli Logo</a></li>
<li><a href="#">Rakamla Logo</a></li>
<li><a href="#">Sayıyla Logo</a></li>
</ul>
   <li><a href="#">Danışmanlık</a></li>
   </ul>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>

Facebook'ta Paylaş    
Diğer CSS İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...

MUHAMMED SEFA ELNAR    24.04.2013    18:18:23

kardeşim çok teşekkür ederim

beni çok büyük bir dertten kurtardın..

ALLAH RAZI OLSUN...


admin    24.04.2013    23:16:30

Allah hepimizden razı olsun. Rica ederim... 


Berkan    02.10.2013    15:52:37

Tam Aradığım Örnek Teşekkürler .


Hasan Dere    28.10.2013    22:44:41

 kardeşim eyvallah


brukkk    15.12.2013    18:59:53

çom güzel emeğinize sğlık :) :) ;)


Abdullah UĞUR    17.12.2013    20:37:47

 Allah razı olsun beni performans ödevinde büyük bir sorundan kurtardınız.


Ömer    18.01.2014    11:52:44

<html><head>
<title>Dikey Açılır Menü</title>
<style type="text/css">
.menum ul {
     margin:0;
     padding:0;
     list-style:none;
     width:150px;
     border-bottom:1px solid #000;}
.menum li {
     position:relative;}
.menum li ul {
     position:absolute;
     list-style:none;
     left:149px;
     width:150px;
     display:none;
     top:0;}
.menum li a {
     display:block;
     text-decoration:none;
     color:#000;
     background-color:#9cf;
     font:bold 15px verdana;
     padding:5px;
     border:1px solid #000;
     border-bottom:0;}
.menum li a:hover {
     background-color:#012d58;
     color:#ff0;}
li:hover ul {
     display:block;}
</style>
</head>
<body>
<div class="menum">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Şirket Tarihçesi</a></li>
<li><a href="#">Yöneticilerimiz</a></li>

</ul></li>
<li><a href="#">İletişim</a></li></ul>
</div></body></html>


Fatih    12.03.2014    16:55:13

Hocam kodu kendime göre uyarladım ama sağ tarafta olan bannerın altında kalıyor, onu en üstte tutabilmem için ne gibi bir değişiklik yapmam gerekir ?