Mobile Menu Navigation Structure
-
Hi Guys,
With the Mobile Menu, I am hoping you can tell me how to add in a third navigation layer. Basically I need to add another 'layer' to the menu so a an example I have a 1st layer menu item called MENS. This category needs to open out to the 2nd layer showing CLOTHING / FOOTWEAR / ACCESSORIES. Then CLOTHING needs to open out to show a 3rd layer T-SHIRTS / HOODIES etc .FOOTWEAR needs to open out to show a 3rd layer SNEAKERS / SLIDERS etc. ACCESSORIES needs to open out to show a 3rd layer HATS / BAGS etc
I really hope this makes sense. Is it possible to do this?
Cheers
Kev. -
This can easily be achieved Kev using basic HTML code and the tags for Unordered List (UL) and Item List (IL) it's just knowing how they work, below is an example for you to see how it works, drop another mobile menu frag box on to a blank test page and copy and paste the code below using ALT+S to get to the source code and paste accordingly
<div id="page"><nav id="menu"><ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Education Concept</a></li>
<li><a href="#">References</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Sub Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Buy Products</a></li>
</ul>
</li>
</ul></nav></div>
When you preview in a browser, you should get a 3rd sub activation from the Products / Sub Products links
Hope this helps a little more -
Thanks ever so much for your help Mick, although I'm really struggling. I did as instructed above and set up a new page with a new frag box and added your code above and it worked perfectly, but when I try to apply the same to my own I just cant get it to do the same.
Ive put a link to how my own menu is curremntly working below, and added the code I have. If you can help me I'll be happy to pay for your expertise. Basically I just need the first menu item 'MENS' to open out to show
MENS CLOTHING
MENS FOOTWEAR
MENS ACCESSORIES
MENS CLOTHING OPENS OUT TO
T_SHIRTS
HOODIES & SWEATSHIRTS
POLOS
MENS FOOTWEAR opens out to
SNEAKERS
SLIDERS
MENS ACCESSORIES opens out to
HATS
BAGS
The demo link is https://www.luxuryconnected.co.uk/dev/mobile20
And Ive added my code below. At the point of tearing my hair out now so again if you can help I'd be endlessly grateful and am happy to pay if needed.
Thanks Mick,
Kev
-
Try the below code Kev, again, paste into a new mobile html frag and then preview in a browser, you are not far off doing it right, its just a matter of getting the opening and closing tags of UL and IL in the right place and also making sure what ever gets opened via these tags, also gets closed.
<div id="page"><nav id="menu"><ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENS</a>
<ul>
<li><a href="#">MENS CLOTHING</a>
<ul>
<li><a href="#">T-SHIRTS</a></li>
<li><a href="#">HOODIES & SWEATSHIRTS</a></li>
<li><a href="#">POLOS</a></li>
</ul>
<li><a href="#">MENS FOOTWEAR</a>
<ul>
<li><a href="#">SNEAKERS</a></li>
<li><a href="#">SLIDERS</a></li>
</ul>
<li><a href="#">MENS ACCESSORIES</a>
<ul>
<li><a href="#">HATS</a></li>
<li><a href="#">BAGS</a></li>
</ul>
</ul>
</li>
<li><a href="#">WOMENS</a>
<ul>
<li><a href="#">SNEAKERS</a></li>
<li><a href="#">SLIDERS</a></li>
</ul>
</li>
<li><a href="#">BRANDS</a>
<ul>
<li><a href="#">ALEXANDER MCQUEEN</a></li>
<li><a href="#">AMIRI</a></li>
<li><a href="#">DIOR</a></li>
<li><a href="#">DSQUARED2</a></li>
<li><a href="#">FENDI</a></li>
<li><a href="#">GIVENCHY</a></li>
<li><a href="#">GUCCI</a></li>
<li><a href="#">VALENTINO</a></li>
<li><a href="#">YEEZY</a></li>
</ul>
</li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">MY ACCOUNT</a></li>
<li><a href="#">ABOUT DELIVERY</a></li>
<li><a href="#">ABOUT RETURNS</a></li>
<li><a href="#">PRIVACY</a></li>
</ul></nav></div>
Let us know if that sorts the problem out for you ;-) -
Perfect!! What can I say Mick... you've helped me out no end over the years and have just saved the day yet again :)
Cant thank yiou enough ... -
Well done Mick!! :)
-
Guys thanks so much once again. One last quick question if I may. The link in the menu to MENS
MENS
What would I do if I didn't want to have that linking to a page in the site, and it was just a heading link to open the next layer of the menu?
Thanks again for all your help, sorry if I'm reaching out too much.
Kev -
No problem Kev, try removing the following section of the link to prevent it from being a hyperlink:
<a href="#">
Neil -
Thanks Neil thats perfect.
I know I'm asking too much but there's something else you might be able to solve for me if you wouldn't mind. I've changed the menu background to white with grey text which looks great, but when you as an example select MENS, the menu opens out and there is an area at the top which is faded and contains < MENS which takes you back to the main menu. The word MENS remains white though whereas everything else is set to be grey - how can I change this if its possible. Likewise the faded area at the top - can the colour of this be changed so it is white like the rest of the menu.
The code in the frag box on page looks like this below at the moment. Sorry again if I'm being a pain Neil / Mick.
Thank you,
Kev
$(function() {
$('nav#menu').mmenu();
});
.mm-menu {background: #ffffff;} /* Menu background colour */
.mm-list {font-family: "Arial", Helvetica, sans-serif; /* Menu font family */
font-size: 14px; /* Menu font size */
color: #393939;} /* Menu font colour */
.mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before {
border-color: rgba(57, 57, 57, 0.9)!important;
}
-
Hi Kev,
The link you posted the problem page seems to be dead now, do you have a live version we can look at to debug?
Neil
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Categories
- All Discussions1,327
- Suggestions412
- Addons804
- General111
In this Discussion
- KevinRoberts October 2019
- Mick October 2019
- Neil October 2019