This time I will share jQuery Plugin and tutorial about Sidebar Accordion Menu With jQuery, hope it will help you in programming stack.
| File Size: | 12.4 KB |
|---|---|
| Views Total: | 1447 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A minimal clean semantic sidebar accordion menu for documentation websites or reading web applications. Built with jQuery, CSS, and nested HTML lists.
Click/tap the main menu to expand & collapse sub-menus with a smooth transition just like an accordion.
Click/tap the sub-menus to switch between contents and dynamically update the breadcrumbs without refreshing the current page.
How to use it:
1. Build the HTML structure for the sidebar accordion menu.
01 |
<div class="sidebar"> |
02 |
<ul class="menu"> |
03 |
<li class="menu_item menu_show"> |
04 |
<a> |
05 |
<i class="tri_icon"></i> |
06 |
<h2>HTML</h2> |
07 |
</a> |
08 |
<ul class="menu_item_child"> |
09 |
<li> |
10 |
<a title="HTML5"> |
11 |
<span>HTML5</span> |
12 |
</a> |
13 |
</li> |
14 |
</ul> |
15 |
</li> |
16 |
<li class="menu_item"> |
17 |
<a> |
18 |
<i class="tri_icon"></i> |
19 |
<h2>JavaScript</h2> |
20 |
</a> |
21 |
<ul class="menu_item_child"> |
22 |
<li> |
23 |
<a> |
24 |
<span>AngularJS</span> |
25 |
</a> |
26 |
</li> |
27 |
<li> |
28 |
<a> |
29 |
<span>jQuery</span> |
30 |
</a> |
31 |
</li> |
32 |
<li> |
33 |
<a> |
34 |
<span>ReactJS</span> |
35 |
</a> |
36 |
</li> |
37 |
<li> |
38 |
<a> |
39 |
<span>VueJS</span> |
40 |
</a> |
41 |
</li> |
42 |
</ul> |
43 |
</li> |
44 |
<li class="menu_item"> |
45 |
<a> |
46 |
<i class="tri_icon"></i> |
47 |
<h2>CSS</h2> |
48 |
</a> |
49 |
<ul class="menu_item_child"> |
50 |
<li> |
51 |
<a> |
52 |
<span>CSS3</span> |
53 |
</a> |
54 |
</li> |
55 |
</ul> |
56 |
</li> |
57 |
</ul> |
58 |
</div> |
2. Create a breadcrumb displayed on the top of main content.
1 |
<div class="breadcrumb"> |
2 |
<a>jQueryScript.Net</a> |
3 |
<span class="split"> / </span> |
4 |
<a>HTML</a> |
5 |
<span class="split last"> / </span> |
6 |
<a>HTML5</a> |
7 |
</div> |
3. Create sectioned content on the webpage.
01 |
<div class="main_con"> |
02 |
<ul class="main_con_ul"> |
03 |
<li class="main_con_item"> |
04 |
<ul> |
05 |
<li class="check"> |
06 |
<h2 class="title">HTML5</h2> |
07 |
<div class="con"> |
08 |
<p>HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts.</p> |
09 |
<p> It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.</p> |
10 |
</div> |
11 |
</li> |
12 |
</ul> |
