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 )  
404 Not Found

Not Found

The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.