Sous-menu avec localstorage
Bonjour,
Voici j'ai un menu qui est inclus via javascript auquel j'ai ajouté localstorage et fonction pour rendre la classe active dynamiquement.
Le problème que je rencontre c'est que lorsque je clique sur un sous-menu cela ouvre aussi un autre menu qui a des sous-menu.
Merci pour votre aide
Javascript
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| (function($) {
"use strict";
$.fn.tree = function() {
return this.each(function() {
var btn = $(this).children("a").first();
var menu = $(this).children(".treeview-menu").first();
/* var isActive = $(this).hasClass('active'); */
var isActive;
if (localStorage.getItem(1 + "_active") === "true") {
$(this).addClass('active');
isActive = true;
} else {
isActive = $(this).hasClass('active');
}
//initialize already active menus
if (isActive) {
menu.show();
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
}
/* code pour active dynamique */
var url = window.location.pathname; //sets the variable "url" to the pathname of the current window
var activePage = url.substring(url.lastIndexOf('/') + 1); //sets the variable "activePage" as the substring after the last "/" in the "url" variable
$('.primary-nav li a').each(function () { //looks in each link item within the primary-nav list
var linkPage = this.href.substring(this.href.lastIndexOf('/') + 1); //sets the variable "linkPage" as the substring of the url path in each <a>
if (activePage == linkPage) { //compares the path of the current window to the path of the linked page in the nav item
$(this).parent().addClass('active'); //if the above is true, add the "active" class to the parent of the <a> which is the <li> in the nav list
}
});
/* fin code pour active dynamique */
/*
//Slide open or close the menu on link click
btn.click(function(e) {
e.preventDefault();
if (isActive) {
//Slide up to close menu
menu.slideUp();
isActive = false;
btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
btn.parent("li").removeClass("active");
} else {
//Slide down to open menu
menu.slideDown();
isActive = true;
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
btn.parent("li").addClass("active");
}
});
*/
//Slide open or close the menu on link click
btn.click(function(e) {
e.preventDefault();
if (isActive) {
//Slide up to close menu
menu.slideUp();
isActive = false;
btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
btn.parent("li").removeClass("active");
} else {
//Slide down to open menu
menu.slideDown();
isActive = true;
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
btn.parent("li").addClass("active");
}
localStorage.setItem(1 + "_active", isActive.toString());
});
/* Add margins to submenu elements to give it a tree look */
menu.find("li > a").each(function() {
var pad = parseInt($(this).css("margin-left")) + 10;
$(this).css({"margin-left": pad + "px"});
});
});
};
}(jQuery)); |
HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <ul class="sidebar-menu primary-nav" id="1">
<li>
<a href="index.html">
<i class="fa fa-bookmark"></i> <span>Home</span>
</a>
</li>
<li class="treeview">
<a href="contacts.html">
<i class="fa fa-users"></i>
<span>Contacts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="information.html"><i class="fa fa-info-circle"></i> Basic Information</a></li>
<li><a href="tasks.html"><i class="fa fa-calendar"></i> Tasks</a></li>
<li><a href="quotes.html"><i class="fa fa-file-text-o"></i> Quotes</a></li>
<li><a href="notes.html"><i class="fa fa-edit"></i> Notes</a></li>
</ul>
</li>
<li>
<a href="users.html">
<i class="fa fa-user"></i> <span>Users</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-gears"></i>
<span>Settings</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="settings.html"><i class="fa fa-gears"></i> Settings</a></li>
<li><a href="lists.html"><i class="fa fa-bars"></i> Lists</a></li>
<li><a href="fields.html"><i class="fa fa-th "></i> Fields</a></li>
<li><a href="columns.html"><i class="fa fa-columns"></i> Columns <small class="badge pull-right bg-green">New</small></a></li>
</ul>
</li>
</ul> |
Inclusion du menu via Javascript
Code:
1
2
3
4
5
| $(function(){
$('#mymenu').load('_nav.html', function() {
$(".sidebar .treeview").tree();
});
}); |
Code:
<aside class="left-side sidebar-offcanvas" id="mymenu"></aside>
