News Ticker

Menu

Cara Mudah Membuat Menu Dropdown dengan CSS

By Unknown - Kamis, 12 Februari 2015 - No Comments
Yoo, selamat datang di Machro Tech. Disini kita akan belajar tentang WEB DESIGN, jika kalian tertarik pada bidang designm website, Tutor ini wajib diikuti. Website dengan tampilan menu yang jadul akan membuat web kita tampak usang. Beda jika kita mengubahnya jadi menarik, seperti memakai dropdown atau diganti gambar-gambar yang unik. Nah, disini kita akan membahas bagaimana cara untuk membuat menu dropdown dengan CSS. Keep reading !!!. Apakah membuat dropdown itu sulit ???? Apakah setiap kita membuat menu harus memanfaatkan Jquery? Tidak juga kok, untuk tampilan menu sederhana kita bisa memanfaatkan css untuk membuatnya.
Yuk langsung saja dimulai, pertama buat dahulu sebuah dokumen HTML baru, dan ketikkan kode HTML di bawah ini:
    

  1. <html>
    2. 

  2. <head>
    3. 

  3.     <title>Simple Dropdown Menu</title>
    4. 

  4. </head>
    5. 

  5. <body>
    6. 

  6. <div id="navigation">
    7. 

  7.     <ul id="nav">
    8. 

  8.         <li><a href="#">Home</a></li>
    9. 

  9.         <li><a href="#">Profil</a>
    10. 

  10.             <ul>
    11. 

  11.                 <li><a href="#">Tentang Kami</a></li>
    12. 

  12.                 <li><a href="#">Visi dan Misi</a></li>
    13. 

  13.             </ul>
    14. 

  14.         </li>
    15. 

  15.         <li><a href="#">Service</a>
    16. 

  16.             <ul>
    17. 

  17.                 <li><a href="#">Software Development</a></li>
    18. 

  18.                 <li><a href="#">Web Development</a></li>
    19. 

  19.                 <li><a href="#">Interior Design</a></li>
    20. 

  20.                 <li><a href="#">Multimedia Interactive</a></li>
    21. 

  21.             </ul>
    22. 

  22.         </li>
    23. 

  23.         <li><a href="#">Portfolio</a></li>
    24. 

  24.         <li><a href="#">Kontak Kami</a></li>
    25. 

  25.     </ul>
    26. 

  26. </div>
    27. 

  27. </body>
    28. 

  28. </html>
    29.
Jangan lupa simpan dengan nama dropdown-menu.html.
Dan jika dilihat di browser, maka tampilannya akan seperti gambar di bawah ini:
Nah, seperti terlihat pada gambar di atas, untuk membuat Dropdown menu ini kita menggunakan Tag HTML Unordered List (ul). Dan dengan sedikit penambahan kode CSS, maka akan menjadi Menu Dropdown.
Sekarang kita coba tambahkan CSS seperti di bawah ini:
    

  1. <html>
    2. 

  2. <head>
    3. 

  3.     <title>Simple Dropdown Menu</title>
    4. 

  4.     <style>
    5. 

  5.         #navigation {
    6. 

  6.             background-color : black;
    7. 

  7.             width : 800px;
    8. 

  8.             height : 39px;
    9. 

  9.             border-bottom : 1px solid #ccc;
    10. 

  10.         }
    11. 

  11.         
    12. 

  12.         #navigation ul {
    13. 

  13.             padding:0;
    14. 

  14.             margin:0;
    15. 

  15.             list-style-type:none;
    16. 

  16.         }
    17. 

  17.          
    18. 

  18.         #navigation ul li {
    19. 

  19.             float:left;
    20. 

  20.             position : relative;
    21. 

  21.         }
    22. 

  22.          
    23. 

  23.         #navigation ul li a {
    24. 

  24.             display:block;
    25. 

  25.             padding:10px 20px;
    26. 

  26.             color:#fff;
    27. 

  27.             text-decoration:none;
    28. 

  28.             font-family: calibri;
    29. 

  29.         }
    30. 

  30.          
    31. 

  31.         #navigation ul li a:hover {
    32. 

  32.             background-color:#72b626;
    33. 

  33.         }
    34. 

  34.          
    35. 

  35.         /* Menu Dropdown */
    36. 

  36.         
    37. 

  37.         #navigation ul li ul {
    38. 

  38.             display: none;
    39. 

  39.         }
    40. 

  40.          
    41. 

  41.         #navigation ul li:hover ul {
    42. 

  42.             display:block;
    43. 

  43.             position: absolute;
    44. 

  44.         }
    45. 

  45.         
    46. 

  46.         #navigation ul li:hover ul li a {
    47. 

  47.             display:block;
    48. 

  48.             background-color : black;
    49. 

  49.             color : #fff;
    50. 

  50.             width : 150px;
    51. 

  51.             border-bottom : 1px solid #ccc;
    52. 

  52.         }
    53. 

  53.         
    54. 

  54.         #navigation ul li:hover ul li a:hover {
    55. 

  55.             background-color : #72b626;
    56. 

  56.         }
    57. 

  57.         
    58. 

  58.         #navigation ul li:hover > a {background: #72b626;}
    59. 

  59.     </style>
    60. 

  60.     
    61. 

  61. </head>
    62. 

  62. <body>
    63. 

  63. <div id="navigation">
    64. 

  64.     <ul id="nav">
    65. 

  65.         <li><a href="#">Home</a></li>
    66. 

  66.         <li><a href="#">Profil</a>
    67. 

  67.             <ul>
    68. 

  68.                 <li><a href="#">Tentang Kami</a></li>
    69. 

  69.                 <li><a href="#">Visi dan Misi</a></li>
    70. 

  70.             </ul>
    71. 

  71.         </li>
    72. 

  72.         <li><a href="#">Service</a>
    73. 

  73.             <ul>
    74. 

  74.                 <li><a href="#">Software Development</a></li>
    75. 

  75.                 <li><a href="#">Web Development</a></li>
    76. 

  76.                 <li><a href="#">Interior Design</a></li>
    77. 

  77.                 <li><a href="#">Multimedia Interactive</a></li>
    78. 

  78.             </ul>
    79. 

  79.         </li>
    80. 

  80.         <li><a href="#">Portfolio</a></li>
    81. 

  81.         <li><a href="#">Kontak Kami</a></li>
    82. 

  82.     </ul>
    83. 

  83. </div>
    84. 

  84. </body>
    85. 

  85. </html>
    86.
Dengan diberikannya kode CSS di atas, maka tampilan List yang tadi akan berubah seperti gambar di bawah ini:

===========Ulasan Singkat================
1. Fungsi dari "#" adalah sebagai penanda dari div id yang akan kita terapkan dalam HTML. 
2. "<ul ...>" Menandakan pembukaan dari menu dropdown yang nanti akan diikuti "<li ...>' sebagai submenu dropdown.

Yosh, Semoga bermanfaat. :D 

Share This:

Post Tags:

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Diposting oleh Unknown di 13.35
Label:

No Comment to " Cara Mudah Membuat Menu Dropdown dengan CSS "

Langganan: Posting Komentar ( Atom )
  • To add an Emoticons Show Icons
    •
  • To add code Use [pre]code here[/pre]
  • To add an Image Use [img]IMAGE-URL-HERE[/img]
  • To add Youtube video just paste a video link like http://www.youtube.com/watch?v=0x_gnfpL3RM