Bootstrap menu items actief maken.
Hier kan je mijn menu zien: link.
Ik krijg nu alleen de children active maar niet de parents lijkt het.
Dit is de code die ik gebruik om de children active te maken:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
Weet iemand hoe ik het voor elkaar krijg om zowel de parent als alle menu items die eronder hangen actief te maken.
Dus stel ik heb een menu structuur als volgt:
Werkwijze
- child 1
-- Child van child 1
Als ik nu op child van child 1 klik wil ik Werkwijze - child 1 en zichzelf actief maken.
Gewijzigd op 15/11/2013 12:41:33 door Furio Scripting
Je voegt via Javascript een .active aan de li toe, alleen vernieuw je de pagina oftewel is dat van Javascript alweer weg... Je moet via PHP kijken wat de url is en via php dan class active mee geven aan de li..
Metal Hertog Jan op 15/11/2013 17:24:27:
Omdat je dit niet via javascript moet doen....
Je voegt via Javascript een .active aan de li toe, alleen vernieuw je de pagina oftewel is dat van Javascript alweer weg... Je moet via PHP kijken wat de url is en via php dan class active mee geven aan de li..
Je voegt via Javascript een .active aan de li toe, alleen vernieuw je de pagina oftewel is dat van Javascript alweer weg... Je moet via PHP kijken wat de url is en via php dan class active mee geven aan de li..
Beste Hertog,
Ik heb dit voorheen ook zo gedaan met mijn andere menu en dit werkte perfect!
Hij kijkt gewoo nnaar de current page en vervolgens voegt die aan alle bovenliggende items een class active toe.
De code die ik hiervoor gebruikte is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
var url = window.location.pathname;
var page = url.substr(url.lastIndexOf('/') + 1);
if (page)
{
$('.MenuBar li a[href="' + page + '"]').addClass('active');
$('.active').parents().children('li a').addClass('active');
$('.MenuBar li a[href="' + url + '"]').addClass('active');
$('.active').parents().children('li a').addClass('active');
}
else
{
$('.MenuBar li a[href="/cms/home"]').addClass('active');
$('.MenuBar li a[href="home"]').addClass('active');
} }); </script>
var url = window.location.pathname;
var page = url.substr(url.lastIndexOf('/') + 1);
if (page)
{
$('.MenuBar li a[href="' + page + '"]').addClass('active');
$('.active').parents().children('li a').addClass('active');
$('.MenuBar li a[href="' + url + '"]').addClass('active');
$('.active').parents().children('li a').addClass('active');
}
else
{
$('.MenuBar li a[href="/cms/home"]').addClass('active');
$('.MenuBar li a[href="home"]').addClass('active');
} }); </script>
Maar als u het mij kan vertellen hoe i kdit via php voor elkaar krijg, dus dat die alle bovenliggende menu items active meegeeft dan hoor ik dit graag.
Dit is mijn php functie die het menu in elkaar draait:
Code (php)
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
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
<?php <!-- Start Dynamic Nav -->
<div class="navbar navbar-inverse">
<div class="navbar-inner navbar-inverse">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="collapse navbar-collapse bs-navbar-collapse " role="navigation">
<ul class="nav navbar-nav">
[code]<?php
$database = new database();
$q = "SELECT * FROM menu_items WHERE status = 1 AND template_name= ".getCurrentTemplateId()." ORDER BY parent, sort, label";
$result = $database->query($q);
$menu_items = array();
while($rows = mysqli_fetch_assoc($result))
{
$menu_items[] = $rows;
}
global $menuItems;
global $parentMenuIds;
//create an array of parent_menu_ids to search through and find out if the current items have an children
foreach($menu_items as $parentId)
{
$parentMenuIds[] = $parentId['parent'];
}
//assign the menu items to the global array to use in the function
$menuItems = $menu_items;
//recursive function that prints categories as a nested html unorderd list
function generate_menu($parent)
{
$has_childs = false;
//this prevents printing 'ul' if we don't have subcategories for this category
global $menuItems;
global $parentMenuIds;
//use global array variable instead of a local variable to lower stack memory requierment
foreach($menuItems as $key => $value)
{
if ($value['parent'] == $parent)
{
//if this is the first child print '<ul>'
if ($has_childs === false)
{
//don't print '<ul>' multiple times
$has_childs = true;
if($parent != 0)
{
echo '<ul class="dropdown-menu">';
}
}
if($value['parent'] == 0 && in_array($value['id'], $parentMenuIds))
{
echo '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-toggle="pill" href='.$value['link'].'>' .$value['label']. '<b class="caret"></b></a>';
}
else if($value['parent'] != 0 && in_array($value['id'], $parentMenuIds))
{
echo '<li class="dropdown-submenu"><a href="#">' . $value['label'] . '</a>';
}
else
{
echo '<li><a href='.$value['link'].'>' . $value['label'] . '</a>';
}
generate_menu($value['id']);
//call function again to generate nested list for subcategories belonging to this category
echo '</li>';
}
}
if ($has_childs === true) echo '</ul>';
}
generate_menu(0);
?>
<!-- End Dynamic Nav -->
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
</div><!-- /navbar-inner -->
</div> ?>
<div class="navbar navbar-inverse">
<div class="navbar-inner navbar-inverse">
<button class="navbar-toggle" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="collapse navbar-collapse bs-navbar-collapse " role="navigation">
<ul class="nav navbar-nav">
[code]<?php
$database = new database();
$q = "SELECT * FROM menu_items WHERE status = 1 AND template_name= ".getCurrentTemplateId()." ORDER BY parent, sort, label";
$result = $database->query($q);
$menu_items = array();
while($rows = mysqli_fetch_assoc($result))
{
$menu_items[] = $rows;
}
global $menuItems;
global $parentMenuIds;
//create an array of parent_menu_ids to search through and find out if the current items have an children
foreach($menu_items as $parentId)
{
$parentMenuIds[] = $parentId['parent'];
}
//assign the menu items to the global array to use in the function
$menuItems = $menu_items;
//recursive function that prints categories as a nested html unorderd list
function generate_menu($parent)
{
$has_childs = false;
//this prevents printing 'ul' if we don't have subcategories for this category
global $menuItems;
global $parentMenuIds;
//use global array variable instead of a local variable to lower stack memory requierment
foreach($menuItems as $key => $value)
{
if ($value['parent'] == $parent)
{
//if this is the first child print '<ul>'
if ($has_childs === false)
{
//don't print '<ul>' multiple times
$has_childs = true;
if($parent != 0)
{
echo '<ul class="dropdown-menu">';
}
}
if($value['parent'] == 0 && in_array($value['id'], $parentMenuIds))
{
echo '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-toggle="pill" href='.$value['link'].'>' .$value['label']. '<b class="caret"></b></a>';
}
else if($value['parent'] != 0 && in_array($value['id'], $parentMenuIds))
{
echo '<li class="dropdown-submenu"><a href="#">' . $value['label'] . '</a>';
}
else
{
echo '<li><a href='.$value['link'].'>' . $value['label'] . '</a>';
}
generate_menu($value['id']);
//call function again to generate nested list for subcategories belonging to this category
echo '</li>';
}
}
if ($has_childs === true) echo '</ul>';
}
generate_menu(0);
?>
<!-- End Dynamic Nav -->
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
</div><!-- /navbar-inner -->
</div> ?>
Gewijzigd op 15/11/2013 23:19:12 door Furio Scripting