Programlama | Programlama Dilleri | C Programlama Dili |C++

Anasayfa Programlama Css Açılır Menü


Açılır Menü

AÇIKLAMA
 
Burada yapılan sayfada css elemanları kullanarak açılır menü yapılmıştır . Burada bazı html yapıları bazı özellikleri yerine getirmesi amacıyla css ile yeniden dizayn edilmiştir.
 
ol düzenli liste yapısı yeniden tasarlanarak ana başlık (CSS, Javascript, HTML, DHTML, PHP) boylarının 150 piksel olması sağlanmıştır. Aynı şekilde oluşturulan kare veya dikdörtgen etrafındaki çizginin (sadece etrafı) 1px genişliğinde açık mavi olması sağlanmıştır.
 
a link verme yapısı yeniden tasarlanmış ve linklerin etrafındaki 1 px genişliğinde ve açık mavi şekilde bir yapı oluşturulmuştur.
 
ol#alt_menu a ile oluşturulan ol yapısına ek olarak arkaplan rengi eklenmeside sağlanmıştır. (alt menü arkaplanı ol)
 
li#acil>a yapısı ile ana menüdeki linklere 130 piksel sonra merkezi olarak icon2.jpg dosyası eklenmiştir.
 
li#acil linklerin birbirlerine bağlı olarak uygun konumda (position:relative) açılmasını sağlamıştır.
 
li#acil ol#alt_menu ile alt menünün ana yapısı sağlanmış ve left ile 151 piksel değerinden itibaren başlayacağı belirtilmiştir.
 
Position absolute alt menülerin yana doğru açılmasını sağlamıştır aksi takdirde menüler direk linklerden itibaren sayfadan aşağı doğru açılı halde görünecektirler. hidden ile alt menünün gizlenmesi sağlanmış aksi takdirde sayfa açıldığında alt menülerde direk görünecektir.
 
 
Css  Kodu:
 
  1. ol {
  2. list-style-type:none;
  3. width:150px;
  4. border:1px solid lightblue;
  5. padding:0px;
  6. border-bottom:none;
  7. }
  8. a {
  9. display:block;
  10. border-bottom:1px solid lightblue;
  11. background-color:#E6F2FF;
  12. text-decoration:none;
  13. font-weight:bold;
  14. }
  15. ol#alt_menu a{
  16. background-color:#E6F2FF;
  17. color:black;
  18. font-weight:normal;
  19. }
  20. li#acil>a{
  21. background:#E6F2FF url('icon2.jpg') no-repeat 130px center;
  22. }
  23. li#acil{
  24. position:relative;
  25. }
  26. li#acil ol#alt_menu {
  27. visibility:hidden;
  28. position:absolute;
  29. top:0px;
  30. left:151px;
  31. }
  32. li#acil:hover ol#alt_menu{visibility:visible;}
  33. ol#alt_menu a:hover{
  34. background-color:#004262;
  35. color:white;
  36. font-weight:normal;
  37. }

 
 
Sayfa Kodu:

  1.  
  2. <html>
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="menu.css">
  5. </head>
  6. <body>
  7. <ol>
  8.     <li id="acil"><a id="acil_1" href="/">CSS</a>
  9.         <ol id="alt_menu">
  10.             <li><a href="/">Seçiciler</a></li>
  11.             <li><a href="/">Metin Özellikleri</a></li>
  12.             <li><a href="/">Liste Özellikleri</a></li>
  13.             <li><a href="/">Kutu Modeli</a></li>
  14.         </ol>
  15.     </li>
  16.     <li id="acil"><a id="acil_1" href="/">Javascript</a>
  17.         <ol id="alt_menu">
  18.             <li><a href="/">Giriş</a></li>
  19.             <li><a href="/">Operatörler</a></li>
  20.             <li><a href="/">Diziler</a></li>
  21.             <li><a href="/">Koşul İfadeleri</a></li>
  22.         </ol>
  23.     </li>
  24.     <li id="acil"><a id="acil_1" href="/">HTML</a>
  25.         <ol id="alt_menu">
  26.             <li><a href="/">Etiketler</a></li>
  27.             <li><a href="/">Formlar</a></li>
  28.         </ol>
  29.     </li>
  30.     <li id="acil"><a id="acil_1" href="/">DHTML</a></li>
  31.     <li id="acil"><a id="acil_1" href="/">PHP</a></li>    
  32. </ol>
  33. </body>
  34. </html>
  35.  
  36.  
  37.  

Yorumlar (0)
Sadece kayıtlı kullanıcılar yorum yazabilir!
Son Güncelleme ( Çarşamba, 19 Eylül 2012 01:30 )