留言板
3 level responsive nav over v6.2
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
I can't seem to find comprehensive example code on how to do a 3 level responsive nav over v6.2
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
Multilevel Menu Navigation
Also prior forum thread adds snippet:
https://www.liferay.com/community/forums/-/message_boards/view_message/28984755#_19_message_48114952
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)
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)
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...
David H Nebinger,修改在8 年前。
RE: 3 level responsive nav over v6.2
Liferay Legend 帖子: 14916 加入日期: 06-9-2 最近的帖子
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.
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.
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!
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!
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
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
Hello,
I'm currently working on a theme with a 4 level responsive navigation on Liferay 6.2.
To fix this problem you need to isolate the name and the trigger e.g :
In this example, following icon toggle the next children and the link goes to a page.
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.
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
to test will need to put on my Canadian winter gloves and touch an old iPhone 5 in portrait
Daniel Tyger,修改在8 年前。
RE: 3 level responsive nav over v6.2
Regular Member 帖子: 105 加入日期: 13-2-6 最近的帖子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