Multilevel menu structure

Wish to see a specific feature/change in future releases? Feel free to post it here, and if it gets enough "likes", we'd definitely include it in future releases!
Post Reply
User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Multilevel menu structure

Post by onoehring » 2021-01-09 12:06

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
Zwischenablage02.png (18.08 KiB) Viewed 5687 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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Multilevel menu structure

Post by onoehring » 2021-01-16 10:31

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
l18.png (8.56 KiB) Viewed 4275 times
Olaf

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Multilevel menu structure

Post by jsetzer » 2021-01-16 11:12

For dividers in navbar dropdown menus:
chrome_BYzmdKPJNp.png
chrome_BYzmdKPJNp.png (11.3 KiB) Viewed 4270 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>
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Multilevel menu structure

Post by jsetzer » 2021-01-16 11:29

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.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Multilevel menu structure

Post by onoehring » 2021-01-17 09:10

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

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Multilevel menu structure

Post by jsetzer » 2021-01-17 09:29

... 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");
Last edited by jsetzer on 2021-01-17 09:37, edited 2 times in total.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Multilevel menu structure

Post by jsetzer » 2021-01-17 09:34

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>
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

Re: Multilevel menu structure

Post by federico » 2021-07-05 14:05

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

Post Reply