Hallo guys kita bertemu lagi .. Di artikel saya kali ini saya mencoba berbagi bagaimana cara membuat menu list yang menarik dengan sangat mudah..
berikut contoh hasil nya yang sudah di implementasikan pada konten yang sudah disiapkan
nah sudah lihat kan contoh menu diatas , berikut tutorial memasukan menu tsb kedalam konten dan ada beberapa exampel yang bisa anda unduh langsung ..
okey guys berikut langkah pertama silahkan download salah satu CSS Framwork Menu dibawah ini :
Download Source
source.zip (2.75 KB) Black Responsive
source.zip (6.68 KB) Dropdown bluesky responsive
source.zip (1.62 KB) Apple Css3
nah setelah source.zip diunduh .. extract file,kemudian Copy semua file( kecuali index) yang ada difolder cssmenu
seperti dibawah ini
Kemudian Paste pada folder konten website yang sudah anda siapkan..
kemudian File index.html yang tidak dicopy , edit dengan editor anda .. maka sourcode nya akan seperti ini
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>CSS MenuMaker</title> </head> <body> <div id='cssmenu'> <ul> <li><a href='#'><span>Home</span></a></li> <li class='active has-sub'><a href='#'><span>Products</span></a> <ul> <li class='has-sub'><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li class='last'><a href='#'><span>Sub Product</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li class='last'><a href='#'><span>Sub Product</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> </body> <html>
Okey Lalu kemudian copy link, penghubung yang ada di atara Tag <head> dan </head>
masukan / paste di antara Tag Pembuka <head> dan penutup </head> anda..
begitu juga sourcode yang ada di antara tag <Body> </body>
Paste di bagian nav atau konten yang sudah ada sediakan.
Berikut contoh Codingan yang sebelum nya anda lihat dibagian atas ..
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="web.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <title>CSS MenuMaker</title> </head> <body> <header></header> <nav> <div id='cssmenu'> <ul> <li><a href='#'><span>Home</span></a></li> <li class='active has-sub'><a href='#'><span>Products</span></a> <ul> <li class='has-sub'><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li class='last'><a href='#'><span>Sub Product</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li class='last'><a href='#'><span>Sub Product</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> </nav> </body> </html>
Mudah bukan ?? dengan adanya Css Frammwork kita tidak perlu lagi membuat code dari awal melainkan tinggal menyisipkan link dan sedikit code ..
okey guys seperti biasa codingan diatas sekaligus penutup artikel saya kali ini.. kita akan bertemu lagi diartikel selanjutnya ..selamat mencoba !!
