2 hari kemarin ada salah satu teman blogger yang nanya soal cara membuat menu expand & collapse
Waah sebetulnya saya agak keberatan nih soalnya saya bukan ahlinya dalam pembuatan menu dengan menggunakan
bahasa CSS dan JavaScript. Meskipun begitu saya tidak mau mengecewakan temen saya itu (cie..)
Sebelumnya saya tidak akan membahas banyak soal CSS dan JavaScript karena saya juga masih new bee.
Dan sobat, teman, kawan semuanya bisa lihat dulu apa itu menu expand & collapse,
contohnya ada di sidebar tengah sebelah bawah dekat footer.
all right saya anggap semuanya sudah liat ya contoh menu expand & collapse.
Sekarang kita mulai cara membuat menu nya:
Di sini kita akan menemui 3 element penting untuk membuat menu tersebut:
1. CSS untuk style menu nya
2. JavaScript untuk behaviour/command fungsi tiap-tiap baris menu
3. Html untuk membuat kesemuanya bersatu dalam satu wadah dengan bantuan tag dan code html tetntunya.
Pertama kita buat CSS nya:
Code di bawah ini adalah contoh CSS dalam menu expand & collapse
<style type="'text/css'"></style>
div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url('http://anime7.graphic.googlepages.com/bottom.gif') no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url('http://anime7.graphic.googlepages.com/title.gif') repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url('http://anime7.graphic.googlepages.com/toptitle.gif') no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url('http://anime7.graphic.googlepages.com/expanded.gif') no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url('http://anime7.graphic.googlepages.com/collapsed.gif');
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url('repeat-right')
}
</style>
note:
Sebaiknya code CSS ini anda buat terpisah dengan Html code nya, agar saat loading page nya menjadi maksimal, caranya mudah tinggal copy paste code CSS di atas ke notepad, hilangkan code tag <style type='text/css'> dan </style> nya, setelah itu save as dengan format .css
Selanjutnya kita akan membuat code JavaScriptnya:
Karena di sini saya menggunakan load script menggunakan tab
<script type='text/javascript' src'fileJava(format .js)'>
Jadi file Java tersebut harus di upload dulu, misal ke www.googlepages.comMaaf karena saya tidak punya pengalaman soal menerangkan dan membahas JavaScriptjadi
Kawan, sobat, temen semuanya bisa ambil Code link JavaScript nya di bawah sini:
animeExpandmenuplus.js
Kemudian setelah ke dua element tadi dibuat selanjutnya step terakhir adalah merangkai susunan Html nya.
Berikut adalah codenya:
<link rel="stylesheet" type="text/css" href="http://anime7.graphic.googlepages.com/sdmenu.css" />
<script type="text/javascript" src="http://anime7.graphic.googlepages.com/animeExpandmenuplus.js">
</script>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
<a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
</div>
<div class="collapsed">
<span>Partners</span>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.codingforums.com">CodingForums</a>
<a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
</div>
<div>
<span>Test Current</span>
<a href="?foo=bar">Current or not</a>
<a href="./">Current or not</a>
<a href="index.html">Current or not</a>
<a href="index.html?query">Current or not</a>
</div>
</div>
Code html di atas di letakan di bawah Code CSS.
Untuk background image setiap judul tab bisa kita buat dan di ambil URL link nya.
Sekian informasi dari saya mudah-mudahan membantu, jika ada masalah atau pertanyaan seputar artikel ini silahkan berkomentar, saya akan berusaha membantu.
Terimakasih sebelumnya.