CSS ile yapılan, liste şeklinde ve alt nesneleri olan bir menü.

Bu kez bir menü yapacağız. Menümüzün listeleme ve alt nesne özellikleri de olacak.

Öncelikle style kodlarını girelim. Buradaki kodları sayfanızın <head></head> arasına yerleştirin.

DÜZ YAZI
CSS:
  1. <style type="text/css">
  2. <!--
  3. /* temel */
  4. #Menu_fme_aorgun ul {
  5. list-style: none;
  6. margin: 0;
  7. padding: 0;
  8. }
  9. #Menu_fme_aorgun {
  10. width: 150px;
  11. }
  12. #Menu_fme_aorgun li {
  13. display:inline;
  14. }
  15.  
  16. #Menu_fme_aorgun li a:link, #Menu_fme_aorgun li a:visited {
  17. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  18. text-decoration: none;
  19. font-size: 0.6em;
  20. font-weight: bold;
  21. color: White;
  22. height: 12px;
  23. display: block;
  24. background: url(http://img374.imageshack.us/img374/7254/bckmenuel6.gif);
  25. padding: 5px 0 6px 20px;
  26. }
  27. #Menu_fme_aorgun li a:hover {
  28. color: #ACD373;
  29. background: url(http://img374.imageshack.us/img374/7254/bckmenuel6.gif) 0 -23px;
  30. padding: 5px 0 6px 20px;
  31. }
  32. #Menu_fme_aorgun li li a:link, #Menu_fme_aorgun li li a:visited {
  33. font-weight: normal;
  34. background: url(http://img524.imageshack.us/img524/7609/bcksubmenuqi5.gif);
  35. padding: 2px 0 3px 30px;
  36. }
  37. #Menu_fme_aorgun li li a:hover {
  38. background: url(http://img524.imageshack.us/img524/7609/bcksubmenuqi5.gif) 0 -17px;
  39. padding: 2px 0 3px 30px;
  40. }
  41. #Menu_fme_aorgun li li li a:link, #Menu_fme_aorgun li li li a:visited {
  42. background: url(http://img122.imageshack.us/img122/8743/bcksubsubmenuia8.gif);
  43. padding: 0 0 1px 40px;
  44. }
  45. #Menu_fme_aorgun li li li a:hover {
  46. background: url(http://img122.imageshack.us/img122/8743/bcksubsubmenuia8.gif) 0 -13px;
  47. padding: 0 0 1px 40px;
  48. }
  49. -->
  50. </style>

Burada her nesne için kod tanımlaması yaptık, style bilgilerini sayfaya tanıttık. Şimdi tek yapmamız gereken bu bilgileri html kodları içinde kullanmak, şu şekilde;

DÜZ YAZI
HTML:
  1. <p id="Menu_fme_aorgun">&nbsp;</p>
  2.  
  4.     <li><a href="http://www.cssimbenim.com/">CSSimBenim.com</a></li>
  5.     <li><a href="css-menu.html">nesne 1</a></li>
  6.     <li><a href="css-menu.html">nesne 2</a></li>
  7.     <li><a href="css-menu.html">nesne 3</a></li>
  8.     <li><a href="css-menu.html">nesne 4</a>
  10.     <li><a href="css-menu.html">alt nesne 1</a></li>
  11.     <li><a href="css-menu.html">alt nesne 2</a></li>
  12.     <li><a href="css-menu.html">alt nesne 3</a></li>
  13.     <li><a href="css-menu.html">alt nesne 4</a>
  15.     <li><a href="css-menu.html">2 alt nesne 1</a></li>
  16.     <li><a href="css-menu.html">2 alt nesne 2</a></li>
  17. </ul>
  18. </li>
  19.     <li><a href="css-menu.html">alt nesne 5</a></li>
  20. </ul>
  21. </li>
  22.     <li><a href="css-menu.html">nesne 5</a></li>
  23.     <li><a href="css-menu.html">nesne 6</a></li>
  24.     <li><a href="css-menu.html">nesne 7</a></li>
  25. </ul>

Sonuç;

CSS Liste Menü

  1. CSS Dosyalarınızı Optimize Edin
  2. Padding ve Margin Arasındaki Farklar
  3. CSS Position Özellikleri
  4. Internet Explorer İçin Farklı CSS Kullanın
  5. Hoverbox CSS Resim Galerisi
  6. RSS TrackBack

Bu Yazıyı Paylaşın

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Toplam 1 oy, ortalama: 5' de 5)
Loading ... Loading ...