Geek asks and answers

Collapse horizontal menu for answer design

I have a menu that looks like this:

|Home|Options|Settings|Tools|Preferences|Edit|

This is great when the phone has a lot of horizontal space, but when the device with a narrow viewport accesses the page, I want the menu to look like

|Home|Options|Settings|+MORE+|

If a click on the “MORE” menu displays other items in a vertical drop-down list.

I don’t want to set manual breakpoints because I don’t know how wide the individual menu items will be when displayed.

My menu is currently a set <li>in<ul>

CSS for horizontal layout

#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { overflow: auto; }
#menu li { float: left; }
#menu  a { display: block; padding: 0.5em; text-decoration: none; border-right: 1px solid #fff; font-size: 110%; }

- jQuery - , . , .

CSS () JavaScript ?

+5
1

, JavaScript , - ( + , , ) :nth-last-child ( - Opera Mini).

( , , )

:

<nav id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Options</a></li>
        <li><a href='#'>Settings</a></li>
        <li><a href='#'>Tools</a></li>
        <li><a href='#'>Preferences</a></li>
        <li><a href='#'>Edit</a></li>
        <li><a href='#'>+ MORE +</a></li>
    </ul>
</nav>

, display none:

#menu li:nth-last-child(-n+4):not(:last-child) { display: none; }

li:nth-last-child(-n+4) . :not(:last-child), + MORE +.

, .

, -, :

@media (min-width: 30em) {
    #menu li:nth-last-child(-n+4):not(:last-child) { display: block; }
    #menu li:last-child { display: none; }
}

- em, px, :

  • one, ;
  • , , px - ;

. , :

<nav id='menu'>
    <a tabindex=1 class='ctrl' href='#'>+ MORE +</a>
    <ul>
        <li><a href='#' class='menu-link'>Home</a></li>
        <li><a href='#' class='menu-link'>Options</a></li>
        <li><a href='#' class='menu-link'>Settings</a></li>
        <li><a href='#' class='menu-link'>Tools</a></li>
        <li><a href='#' class='menu-link'>Preferences</a></li>
        <li><a href='#' class='menu-link'>Edit</a></li>
    </ul>
</nav>

CSS:

#menu .ctrl { float: right; }
#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { overflow: auto; }
#menu li { float: left; }
#menu li:nth-last-child(-n+5) { display: none; }
#menu a {
    padding: 0.5em;
    text-decoration: none;
    border-right: 1px solid #fff;
    font-size: 110%;
}
#menu li a { display: block; }
#menu li:first-child a { border-left: 1px solid #fff; }
#menu .ctrl:focus, #menu .ctrl:active { display: none; outline: 0; }
#menu .ctrl:focus ~ ul li, #menu .ctrl:active ~ ul li { display: block; }

@media (min-width: 15em) {
    #menu li:nth-child(2) { display: block; }
}
@media (min-width: 20em) {
    #menu li:nth-child(3) { display: block; }
}
@media (min-width: 25em) {
    #menu li:nth-child(4) { display: block; }
}
@media (min-width: 30em) {
    #menu .ctrl ~ ul li { display: block; }
    #menu .ctrl { display: none; }
}

( 5 , , )

JavaScript-, , Opera Mobile, Android- iOS Safari. Opera Mini, .

№ 2: , Opera Mini ( , + MORE + ). JavaScript ( ), Opera Mini ( ).

# 3. , jQuery. Opera Mini. ( ), . , :

$('.ctrl').click(function() {
    $(this).css({'display': 'none'}).next().children().css({'display': 'block'});
});

EDIT # 4: :target - demo ( CSS-only). Chrome ( ), Opera Mini ( , + + ). Opera Mobile, .

+7

More articles:


All Articles