Responsive navigation – hide & move items's to dropdown when space runs out

[grimski]

Hi guys,

Has anyone seen anything like this before? This is a request (I say request, it’s in the wireframes).

A pretty standard looking navigation by default but when there is not enough horizontal room for a list-item it’s hidden. At the end of the navigation menu, there’d be an icon/button, when clicked it activates a menu listing all the list items that can’t be displayed.

Ideally this would be a div and not a select element. The icon/button wouldn’t be displayed if there was enough horizontal space for all list-items.

Anyone have any ideas on this? I feel like I’ve seen this sort of thing before but maybe more in apps? Hope someone can help…

Cheers,
Steve

[bearhead]

There may be more efficient code out there for this application, but here is how I do it:

http://codepen.io/kvana/pen/ZbENqr

[grimski]

Thanks a lot @bearhead, that’s it! Good to have a name for it now, “Priority Navigation” :)

[Paulie_D]

Indeed, Chris did a post on it a few months back

https://css-tricks.com/the-priority-navigation-pattern/

[grimski]

Thanks @Paulie_D, I was actually just having a look through that article and this one: https://css-tricks.com/diy-priority-plus-nav/

Using Johan van Tongeren’s method I’ve created this:

http://codepen.io/moy/pen/qOYeqN

The desired effect works in principle, but as you can see I have the added complication of a form (search field) in the same bar. I’m playing around with this now but does anyone have an idea for the best approach for this?

In theory, I’m thinking wrapping the current mark-up in a div <div id="menu-bar"></div> and moving the form out of the navigation section, which would mean the nav and form are separate from each other – no luck yet though! The form is currently 200px wide but I’ll shrink this on mobile devices, probably to a button, that when clicked toggles show/hides the form..

It’s maybe worth noting I’ll have another menu similar to this, where a heading is to the left of the navigation. So similar to the mark-up containing the search but with a heading preceding the navigation, inline.

I imagine the mark-up for this would be similar to this (using the example above):

<div class="bar">
    <h2>Heading name</h2>
    <ul>
        <li><a href="#" title="TITLE TEXT.">Menu item 1</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 2</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 3</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 4</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 5</a></li>
        <li class="more hidden" data-width="80">
            <a href="#">More</a>
            <ul></ul>
        </li>
    </ul>
</div>

Cheers,
Steve

[grimski]

Incase it’s useful for anyone else I managed to get this working by changing :

var availablespace = $('#nav-main').outerWidth(true) - morewidth;
to
var availablespace = $('#nav-main').width() - morewidth;

which calculates the width and ignores any margin/padding, allowing me to set padding on the right of the container which the form could be positioned in.

Codepen: http://codepen.io/moy/pen/qOYeqN

I thought I had a similar example working where an elements width was unknown, heading/text for example. But to get the text and nav to display inline and not wrap I had to set overflow: hidden; on the nav element. This does create the required layout but now, obviously, the dropdown is hidden when the ‘more’ link is hovered over.

Codepen: http://codepen.io/moy/pen/ZbjbNM

I’m aware this issue might be better suited to the CSS forum but can anyone think of an alternative ‘fix’? I had a play with display inline-block and floating different elements but the script doesn’t seem to like floating certain elements as it freezes up.

I thought I’d document this issue here first before creating another thread in the CSS forum if it can be avoided.

Cheers again,
Steve

[grimski]

As a javascript fix for the second codepen, I guess I could update the line:

var availablespace = $('.wrap').outerWidth(true) - morewidth;

to

var availablespace = $('.wrap').outerWidth(true) - morewidth - $('.title').outerWidth(true);

So the calculation deducts the width of the title from the available width. I guess this would work and I can’t see it doing much harm as the script is already calculating the width of every element – one more isn’t going to hurt?!

Though I get a CSS solution (if possible) makes it more flexible and reusable?

[grimski]

Thanks @Paulie_D, I was actually just having a look through that article and this one: https://css-tricks.com/diy-priority-plus-nav/

Using Johan van Tongeren’s method I’ve created this:

http://codepen.io/moy/pen/qOYeqN

The desired effect works in principle, but as you can see I have the added complication of a form (search field) in the same bar. I’m playing around with this now but does anyone have an idea for the best approach for this?

In theory, I’m thinking wrapping the current mark-up in a div <div id="menu-bar"></div> and moving the form out of the navigation section, which would mean the nav and form are separate from each other – no luck yet though! The form is currently 200px wide but I’ll shrink this on mobile devices, probably to a button, that when clicked toggles show/hides the form..

It’s maybe worth noting I’ll have another menu similar to this, where a heading is to the left of the navigation. So similar to the mark-up containing the search but with a heading preceding the navigation, inline.

I imagine the mark-up for this would be similar to this (using the example above):

<div>
    &lt;h2&gt;Heading name&lt;/h2&gt;
    <ul>
        <li><a href="#" title="TITLE TEXT.">Menu item 1</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 2</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 3</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 4</a></li>
        <li><a href="#" title="TITLE TEXT.">Menu item 5</a></li>
        &lt;li class="more hidden" data-width="80"&gt;
            <a href="#">More</a>
            <ul></ul>
        </li>
    </ul>
</div>

Cheers,
Steve

[Author]

Posts