Pages

Saturday, October 03, 2009

Menu Navigasi Plus Submenu (jQuery Multi Level CSS Menu #2)

Assalamualaikum wbkt

Pertama sekali saya memohon berbanyak kemaafan kepada semua pengunjung blog ini, kerana lama Qassam bercuti...dan di tambah pula slepas cuti raya hari tu Qassam tak berapa sihat..so tak sempatlah nak update blog ini..agaknya dah bersawang kot blog ni..hihih...
dalam entry kali ini Qassam akan berkongsi cra-cara nak buat Menu Navigai yang mempunyai submenu sperti permintaan saudara HambaAlah tempohari, okeylah sila ikut cara-cara yang akan saya tunjukkan;-

1. Uploadkan 2 file ini ke server anda.
-jqueryslidemenu.css (dapatkan disini)
-jqueryslidemenu.js (dapatkan disini) (dalam file ini,hendaklah di comfirmkan URL penuh )

2. Login-Layout-Edit Htmlt. - Masukkan kod HTML di bawah ini, di bahagian atas kod <head>


<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>


3. Kod ini pula di letakkan di bahagian HTML

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

4. Sila edit pada bahagian-bahagian URL tersebut mengikut kesesuaian blog anda.

5. Save Template.

p/s: sebarang masaalah bolehlah di ajukan disini.

1 comments:

Related Posts Plugin for WordPress, Blogger...