3 level responsive nav over v6.2

[8年前 に Jack Bakker によって更新されました。]

Perhaps I am going blind. I often can't find something in the fridge even though it is right in front of me. Perhaps I am looking too 'hard'.

I can't seem to find comprehensive example code on how to do a 3 level responsive nav over v6.2

[8年前 に Bijan Vakili によって更新されました。]

The marketplace has one good example:
Multilevel Menu Navigation

Also prior forum thread adds snippet:
https://www.liferay.com/community/forums/-/message_boards/view_message/28984755#_19_message_48114952

[8年前 に Olaf Kock によって更新されました。]

Is it the 3-level- or the responsive aspect that you're looking for?

I personally don't have a good idea of how to make sense of a good 3-level navigation that I'd like to operate on my phone screen in the first place. In fact, I find them annoying even on desktop computers with Full-HD screens. From that point of view, I'd like to first see an example of how to do it properly (from a UX perspective) rather than how to do it technically (on any platform, including Liferay)

[8年前 に Jack Bakker によって更新されました。]

Bijan Vakili:

The marketplace has one good example:
Multilevel Menu Navigation

Thanks Bijan, I reviewed this yet the Multilevel Nav Theme: the 3d level opens out to the right which doesn't work when the top level is rightmost ; also I don't see the nav in this theme as being truly responsive to smaller widths.

Olaf Kock:

Is it the 3-level- or the responsive aspect that you're looking for?

Both

Olaf Kock:

I personally don't have a good idea of how to make sense of a good 3-level navigation that I'd like to operate on my phone screen in the first place. In fact, I find them annoying even on desktop computers with Full-HD screens. From that point of view, I'd like to first see an example of how to do it properly (from a UX perspective) rather than how to do it technically (on any platform, including Liferay)

I think likewise for phone view: with two-level design, a user 'touches' the 1st level to see the 2nd level, and then touches the 2nd level item to go somewhere. So what happens in a 3-level design ? user 'touches' 2nd level which accordion-like opens to see the 3d level ? but then touching 2nd level no longer 'goes' anywhere... Am currently wondering on: user touches 1st level, and then 2nd and 3d show (with 3d indented) so then user can touch 2nd or 3d items to go places...

[8年前 に David H Nebinger によって更新されました。]

I think in this use case Jack the 2nd level should be considered just a toggle and not a nav item - use it to expand/collapse the 3rd level view, otherwise the usage is inconsistent.

[8年前 に Jack Bakker によって更新されました。]

David H Nebinger:

I think in this use case Jack the 2nd level should be considered just a toggle and not a nav item - use it to expand/collapse the 3rd level view, otherwise the usage is inconsistent.

Yes and thanks David, like the 1st level is a toggle if there is a 2nd, the 2nd level should be just a toggle if there is a 3d. Generally I recommend no 3d, so that touching a 2nd level item is always expected to go somewhere, where then the user can drill down (find things) further from there.

[8年前 に Bijan Vakili によって更新されました。]

Have you looked at integrating these libs?

jQuery slimMenu (assuming you don't mind adding jQuery)
http://adnantopal.github.io/slimmenu/#

jQuery SlickNav
http://slicknav.com/

jQuery Moblie MA5 Mobile Menu
http://www.jqueryscript.net/demo/Simple-Lightweight-Off-canvas-Menu-Plugin-MA5-Mobile-Menu/#node2-3-2

I haven't seen one using AUI; though in Liferay 7 should be easy; since OOB theme itself has such nav; really well-done for the Control Panel.

If not using jq, above's not clean; though perhaps okay until better one!

[8年前 に Jack Bakker によって更新されました。]

Thanks Bijan, I've looked at these but not at integrating as regardless of tech, the UX question remains:

on desktop a 2nd level which has 3d level children where clicking 2nd level name goes to a page but in tablet/phone (touch), 2nd level is only a toggle ? that's weird

and then when no 3d level, the 2nd level goes somewhere on any device ? not very cross-device common as I see it

[8年前 に Aimen Zenasni によって更新されました。]

Hello,

I'm currently working on a theme with a 4 level responsive navigation on Liferay 6.2.

on desktop a 2nd level which has 3d level children where clicking 2nd level name goes to a page but in tablet/phone (touch), 2nd level is only a toggle ? that's weird

To fix this problem you need to isolate the name and the trigger e.g :

<i class="icon-arrow"></i>
<a aria-labelledby="layout_$nav_item.getLayoutId()" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.gettarget() role="menuitem">
                    <span>$nav_item.icon() $nav_item.getName()</span>
</a>

In this example, following icon toggle the next children and the link goes to a page.

[8年前 に Jack Bakker によって更新されました。]

Thanks Aimen, a good approach all considered perhaps

to test will need to put on my Canadian winter gloves and touch an old iPhone 5 in portrait

[8年前 に Daniel Tyger によって更新されました。]

Aimen Zenasni:

To fix this problem you need to isolate the name and the trigger e.g :

<i class="icon-arrow"></i>
<a aria-labelledby="layout_$nav_item.getLayoutId()" href="$nav_item.getURL()" $nav_item_attr_has_popup $nav_item.gettarget() role="menuitem">
                    <span>$nav_item.icon() $nav_item.getName()</span>
</a>

In this example, following icon toggle the next children and the link goes to a page.

I just want to thank you for this tip, which helped me fix the theme page navigation drop-down menus for iOS, where you can't expand / contract the child menus, etc. if your theme is derived off of the 6.2 classic, due to the icon being trapped within the <a> tag, as you described. To get both a label / link and a toggle on all devices, try something like this (we don't use "$nav_item.icon()" and I replaced the icon-caret-down with the "+ / expand" icon...):

From navigation.vm:

		
...earlier code setting up parent menu <li> tags...
		</li>

						 #if ($nav_item.hasChildren())
						<i class="icon-expand-alt lfr-nav-child-toggle"></i>
						#end
						<a aria-labelledby="layout_$nav_item.getLayoutId()" $nav_item_attr_has_popup class="$nav_item_link_css_class" href="$nav_item.getURL()" $nav_item.gettarget() role="menuitem">
							<span>$nav_item.getName()</span>
						</a>
...etc...

Then, in the CSS, we can style both pieces, placing the icon on the left or right side of the label / link and adjusting with margins, etc... lots of possibilities...:

For placing the icon to the right side, in the base .aui:

.aui {
	.lfr-nav-child-toggle {
    float: right;
    margin-right: 10px;
    font-size: 1.9em;
    color: gray;
    margin-top: 4px;
    padding-left: 4px;
	}
	#navigation .nav>li>a {
    padding: 4px 35px 5px 15px;
	}
...etc