Page 1 of 1
Multilevel menu structure
Posted: 2021-01-09 12:06
by onoehring
Hi,
I would like to see the opportunity not only to have one table in more than once navigation groups (
viewtopic.php?f=6&t=4062), but also
to be able to have sub-menus.
There might be a lot of settings which can be grouped - but at this time I would need one menu group instead of creating submenus.
(Or - can this actually be done already at version 5.92 , but I have not discovered how?)
Like this (
https://bootstrap-menu.com/demos/multilevel.html ):
- Zwischenablage02.png (18.08 KiB) Viewed 8862 times
More nice examples from there:
https://bootstrap-menu.com ($1 for download of all 18 examples, free if you download one by one)
Olaf
Re: Multilevel menu structure
Posted: 2021-01-16 10:31
by onoehring
Hi,
it would also be great, if we are able to show
dividers in the (current) navigation. By
dividers I mean the lines that show up when you add a navigation item using nav-links.php.
I am adding this as a reply to my original post, as this here would be an intermediate/additional solution/feature:
- l18.png (8.56 KiB) Viewed 7450 times
Olaf
Re: Multilevel menu structure
Posted: 2021-01-16 11:12
by jsetzer
For
dividers in navbar dropdown menus:
- chrome_BYzmdKPJNp.png (11.3 KiB) Viewed 7445 times
As a starting point, place this for example in hooks/header-extras.php.
Roughly tested but not in all scenarios.
Code: Select all
<script>
navbarAddDivider("deliveries", false);
// parameters:
// 1st tablename
// 2nd true|false
// true:= divider will be inserted AFTER this table link
// false:= divider will be inserted BEFORE this table link
// you can add more dividers
function navbarAddDivider(tablename, after = true) {
$j(`.dropdown-menu > li > a[href^='${tablename}_view.php']`).each(function() {
let li = $j(this).closest("li");
let divider = jQuery("<li/>").addClass("divider");
if (after) divider.insertAfter(li) else divider.insertBefore(li);
});
}
</script>
Re: Multilevel menu structure
Posted: 2021-01-16 11:29
by jsetzer
Multilevel menu structure
Submenus have been removed from Bootstrap standard since version RC of Bootstrap v3.
The major reason at that time was compatibility with smartphones and other small devices. There is simply not enough space and the usability is quite bad having multi-level expanding menus on a smartphone.
There are several approaches on the web for creating submenus for Bootstrap 3. Years ago I did test a few of them and decided against using another Javascript library for several reasons.
The main reason why I am still using the built-in and default Bootstrap 3 menu structure is, that usually only admin can see all table groups with all tables. In my projects, standard users get a limited view due to their group's permissions. Also, I am hiding unnecessary tables, especially child-tables, from navbar. Even with dozens of tables, each user does not see more that 3 to 5 menus. That's fine for me and my customers up to now.
Re: Multilevel menu structure
Posted: 2021-01-17 09:10
by onoehring
Hi Jan,
thanks for pointing out that bootstrap does not support submenues anymore. I do see the problems, but somehow it would solve some other things - like better grouping stuff together.
Many thanks for the JS code. I encountered a little but - you { ... } else { ... } were missing in the if.
It seems to work when adding those:
Code: Select all
...
if (after) { divider.insertAfter(li) } else { divider.insertBefore(li);}
...
Olaf
Re: Multilevel menu structure
Posted: 2021-01-17 09:29
by jsetzer
... I encountered a little but - you { ... } else { ... } were missing in the if. ...
Sorry, @Olaf: No, the brackets were not missing but depending on your javascript engine perhaps one more semicolon may be required. The code posted before works "as is" in my browser.
https://stackoverflow.com/questions/479 ... javascript
https://medium.com/the-journey-learning ... 776644a337
in German:
https://developer.mozilla.org/de/docs/W ... /if...else
Syntax
Code: Select all
if (bedingung) anweisung1 [else anweisung2]
If
anweisung1 or
anweisung2 contains
more than one command, then you need brackets.
Check this out in your environment:
Code: Select all
if (true)
alert("Condition is true");
else
alert("Condition is false");
Re: Multilevel menu structure
Posted: 2021-01-17 09:34
by jsetzer
Update
Code: Select all
<script>
navbarAddDivider("deliveries", false);
// parameters:
// 1st tablename
// 2nd true|false
// true:= divider will be inserted AFTER this table link
// false:= divider will be inserted BEFORE this table link
// you can add more dividers
function navbarAddDivider(tablename, after = true) {
$j(`.dropdown-menu > li > a[href^='${tablename}_view.php']`).each(function() {
let li = $j(this).closest("li");
let divider = jQuery("<li/>").addClass("divider");
if (after) divider.insertAfter(li); else divider.insertBefore(li);
});
}
</script>
Re: Multilevel menu structure
Posted: 2021-07-05 14:05
by federico
Hi
this code works great. Thanks
However it doesn't work on the mainpage where I use the same menu and empty page instead to have much tabs
So, How can I get it work on the home page too?
thanks