Adaptive navigation: where to get the menu on smartphones


    Many are already trying to adapt their site to mobile devices. Use the new features of CSS3 both on simple sites and on much more complex ones. In the process, some difficulties arise, and one of the most important is the behavior of the site menu when viewed on small screens. As it turned out, they solve this problem in several ways. For me, this task has recently become especially relevant, so I follow the materials on the network relating to adaptive design. And recently, I came across a good analysis of existing adaptive navigation patterns.

    Since I relate to the open source adaptive HTML5 template Simpliste, I decided all the existing possibilities for working with navigationtry in practice. But in addition to gaining my own experience, I was able to create several illustrative examples available for anyone to use, as well as prepare a description of the process with which I invite you to familiarize yourself.


    The article itself, which interested me and pushed me to action, is called Responsive Navigation Patterns . I will rely on it, and the pages of the Simpliste template with the implementation of patterns and a full description of how to achieve the same result will serve as examples.

    There are several approaches to adaptive navigation. Let's consider them in order.



    1. Navigation at the top or leave it as is


    The most obvious and most common way. You just need to make sure that everything fits in the width of the screen and does not bulge. Nothing changes in the HTML structure, but menu links can get slightly changed styles, all kinds of variations are possible with the appearance of links, which can be simplified, centered, replaced with icons or mimic the appearance of mobile device interfaces.

    This approach is used in Simpliste skins.

    Benefits

    It is reached easiest. No need to use Javascript (and no dependency on it), no incredible CSS maneuvers needed.

    disadvantages

    The problem may begin when the number of menu items is too large. Firstly, the height of the navigation block can become such that it completely covers the content of the site on the first page and the user will have to “scroll” the site down to get to the information he needs. And so on every page of the site. Secondly, the question arises of multi-level menus. If they are simply built one under the other, then we return to the problem of the height of the navigation block. Thirdly, if you do not foresee everything in advance, then adding new menu items can cause an unpleasant “moving out” and transfers.

    Examples

     



    2. Link to the footer, to navigation


    Demo with a full description.

    This method is not so common. Its essence is that a link is created in the header, which is hidden on wide monitors and displayed on mobile devices if necessary. This anchor link leads to the menu, which is located in the footer of the site. At the same time, the menu itself is either positioned using CSS, or duplicated in the header and footer, then the menu in the header is hidden at low resolutions. As a link, you can use both text and some understandable icon.

    Advantages

    There remains the only link in the header, which takes up very little space. No scripting dependency.

    disadvantages

    You will have to add additional CSS code to either move the menu from the footer up on desktop computers (using position: absolute or position: fixed), or hide the menu in the header on mobile devices if it duplicates the footer menu. In addition, the feeling of a sharp “jump” when moving through such a link can take the user by surprise.

    Example





    3. Drop-down list (


    Also popular now: