Membuat menu dan sub menu halaman web
Setelah posting-posting sebelumnya membahas tentang blogging dari pembuatan sampai operasi sederhananya, untuk kali ini akan berbagi sedikit ilmu tentang bagaimana membuat menu dan sub menu dalam membangun suatu halaman web. Sedikit diulang seperti yang pernah dijelaskan di blog ini pada wal posting mengenai apa saja yang diperlukan untuk membangun halaman web, pada sesi kali ini hanya diperlukan notepad (rekomendasi notepad ++) dan browser untuk melihat hasilnya. Loh koq sederhana banget cuma butuh dua aplikasi? Bukanya sebelumnya diceritakan bagaimana cara menginstal aplikasi localhost/server local?. Sip… sip… wah kritis juga ente, berarti telah membaca posting sebelumnya hehe..
Jadi kalau dilihat lagi juga pada posting sebelumnya penjelasan tentang client side dan server side atau perbedaan PHP dan html, javascript, css. Secara singkatnya perbedaannya terletak pada eksekusi atau tempat dijalankannya kode, wah dikoreksi ya kalau salah jelasinnya hehe… intinya PHP butuh suatu server untuk menjalankan fungsi-fungsinya, sedangkan html, javascrip, css tidak membutuhkan cukup hanya dengan aplikasi client saja contohnya browser (firefox, IE, safari, dll)
Sudah jelaskan? Nah itulah sedikit alas an mengapa Cuma membutuhkan hanya dua aplikasi tersebut.
OK tidak usah berpanjang lebar lagi mengenai hal tersebut langsung saja kita mulai langkah-langkah membuat menu pada engineering web. Menu yang biasa kita kenal ada dua macam menu horizontal yang biasanya terletak dibagian atas web dan menu vertical yang terletak dibagian samping, sidebar, kanan atau kiri.
Pertama akan dibuat menu sidebar
Yang perlu dipahami terlebih dahulu adalah sintak dasal html seperti yang dijelaskan sebelumnya, nah untuk kali ini perlu ditambah pemahamanya tentang sintak bullet n numbering kalo dalam ms word, bagaimana sintaknya? Seperti ini
<ul>
<li>coba 1</li>
<li>coba 2</li>
<li>coba 3</li>
</ul>
Diletakkan diantara body, nah selain sintak itu juga perlu diketahui tentang sedikit css.
Liat contohnya ni
| <html><head> <title> </title> <style type="text/css"> #menu{ background:#6699CC url(images/menu.png); position:relative; width:100px; border: 1px solid #000; } #menu ul{ list-style:none; padding: 0px; margin: 0px; display:block; } #menu ul li{ position:relative; } #menu ul li a{ display:block; border-bottom: 1px solid #000; text-decoration:none; color: #fff; padding: 10px; } #menu ul li a:hover{ background: #000; color: #fff; } #menu ul li ul{ display:none; } #menu ul li:hover ul{ display:block; position:absolute; width:100px; left:98px; } #menu ul li:hover ul a{ background:#6699CC url(images/menu.png); } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">menu 1</a> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </li> <li><a href="#">menu 2</a> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </div> </body> </html> |
Maka hasilnya
Kemudian menu horizontal
| <html> <head> <title> </title> <style type="text/css"> #menu{ position:relative; width:100%; height:30px; background:url(images/menu.png)repeat-x; border: solid 1px #000; } #menu ul{ padding:0px; margin:0px; list-style:none; } #menu ul li{ float:left; position:relative; } #menu ul li a{ float:left; color:#fff; padding:5px; border-right:1px solid #000; text-decoration:none; display:block; } #menu ul li a:hover{ background-color:#000; } #menu ul li ul{ display:none; padding:0px; margin:0px; } #menu ul li:hover ul{ display:block; position:absolute; top:31px; left:0; } #menu ul li:hover ul li a{ display:block; color:#fff; background:#6699CC url(images/menu.png)repeat-x;; color:#fff; width:130px; } #menu ul li:hover ul li a:hover{ background:#000; color: #fff; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">menu 1</a> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </li> <li><a href="#">menu 2</a> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </div> </body> </html> |
Selamat mencoba semoga sukses…
download kelengkapan disini
Key word jangan menyerah, segala sesuatu terasa susah karena belum terbiasa
0 komentar:
Posting Komentar