Responsive Multi-level Navigation

  • mikehenden

    (@mikehenden)


    9 months ago

    Kind of hard to describe but…

    I’m building a site that has a two-level navigation structure. The first level is a ‘section’, the submenus are ‘topics’ within that ‘section’. To clarify, the ‘section’ items in the navigation don’t have any content, they are simply a ‘section’ that groups related content together. Clear as mud?

    So here’s the thing — in desktop mode everything works fine, click on a ‘section’ and the subnav with related ‘topics’ opens out. Cool.

    Mobile, however, is a different story. Initial view shows the ‘Menu’ button, click on that and EVERYTHING falls out — a big long list of ‘sections’ with all their related ‘topics’ displayed. The result is a big, long navigation list that requires endless scrolling before you actually get to see the page…

    So how do I get the ‘sections’ to act like buttons in mobile view, that you click to open the section and see related ‘topics’?

    Before you ask, yes, I’ve tried various plugins but these compromise the design and UX of the site. Not happy with the end result.

    I did find this page: https://awhitepixel.com/wordpress-menu-walkers-tutorial/

    I think that the answer is here somewhere, and I will be able to make the ‘event listener’ on parent element of ‘submenu’ act like the ‘event listener’ on ‘site navigation’ that produces the ‘Menu’ button? I have ‘menu walker’ loaded but not enabled. I’m not sure how to instruct it. I currently have the following loaded: 

    class AWP_Menu_Walker extends Walker_Nav_Menu {
    	function start_el(&$output, $item, $depth=0, $args=[], $id=0) {
    		$output .= "<li class='" .  implode(" ", $item->classes) . "'>";
     
    		if ($item->url && $item->url != '#') {
    			$output .= '<a href="' . $item->url . '">';
    		} else {
    			$output .= '<span>';
    		}
     
    		$output .= $item->title;
     
    		if ($item->url && $item->url != '#') {
    			$output .= '</a>';
    		} else {
    			$output .= '</span>';
    		}
     
    		if ($args->walker->has_children) {
    			$output .= '<i class="caret fa fa-angle-down"></i>';
    		}
    	}
    };

    This does nothing at all — doesn’t even produce the promised ‘caret’ much less give me a button to work with…

    Can anybody shed a bit of light here??

    • This topic was modified 9 months ago by mikehenden.
Viewing 3 replies - 1 through 3 (of 3 total)
  • VEFA AKIN AKTANSEL

    (@vefaakinaktansel)

    I am not sure if my idea works for you:

    you can add extra css code – at the end of style file of course – that makes sections appear like buttons, like adding extra classes and then adding button styles for these new classes which makes your sections look like buttons now!

    and lastly all you need to do to add the necessary media query rule for mobile view to activate your new styles for the sections.

    No PHP,only CSS! Do you think can this work?

    Moderator bcworkz

    (@bcworkz)

    FYI, the menu walker only manages the HTML that is output. It needs to output all items. What’s visible for any given situation is managed with CSS. Most theme’s I’ve seen will collapse mobile menus so that only the top level items are initially visible and one has to tap an item to see the related sub-menu. Would you consider changing to a theme whose menus behave as you wish?

    Or maybe it’s something your theme’s author might want to correct for all users. Perhaps try contacting them through your theme’s dedicated support channel.

    Like vefaakinaktansel had suggested, you could apply overriding CSS to accomplish what you want. The one thing the menu walker might help with is if you need certain additional classes added to certain items so that the correct CSS selectors can be used.

    Thread Starter mikehenden

    (@mikehenden)

    Thanks for feedback guys. Yes, it’s possible to do this in CSS only…

    /* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul{
	display: none;
	list-style: none;
	margin: 0;
    padding-bottom:20px;
    padding-left:16px
}
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.secondary-menu ul ul li:hover > ul, 
.secondary-menu ul ul li.focus > ul{
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	white-space:nowrap;
    width:100%
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul,
.secondary-menu ul li:hover > ul, 
.secondary-menu ul li.focus > ul{
	left: auto;
}
.main-navigation li {
	position: relative;
}
.main-navigation a {
	display: block;
	text-decoration: none;
    font-size: 12px;
    padding-top:10px;
    padding-bottom:10px;
}
.main-navigation a:hover {
	display: block;
	text-decoration: underline;
}
.main-navigation ul ul {
    width:100%;
    padding-bottom:20px
}
.main-navigation ul ul a {
    border-right:none;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
  position: static;
}
.main-navigation li > a:only-child:after {
    content: "";
}

.main-navigation li li > a:after {
    content: '\f501';
    position: relative;
    right: 0;
}
.secondary-menu {
    padding-right:20px
}
.secondary-menu ul{
    list-style: none;
    list-style-type:none
}

.secondary-menu li {
    float:left;
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    border-right:1px solid #000000
}

    That’s ‘Mobile First’. And for Desktop we have:

    @media screen and (min-width: 1085px){
    .main-navigation ul ul,
    .secondary-menu ul ul{
        float: left;
        position: absolute;
        width:auto;
        top: 100%;
        left: -999em;
        z-index: 99999;
    }
    .main-navigation li {
	position: relative;
    margin-right:20px;
    }
    .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
  position: absolute;
    }
}

    Done and dusted!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive Multi-level Navigation’ is closed to new replies.