Adaptive menu using CSS. Approaches to implementing a responsive menu

The responsive code snippets provided in this article are ideal for any type of layout. You will find in this list vertical and horizontal menus for the site, drop-down and side menus with various animation effects. Responsive design is a technique that appears every year. These snippets will serve as a starting point for designers for many web projects.

CSS-Only Dark Menu by John Erbank

In addition to the design, this snippet defines a responsive drop-down menu. The navigation bar in a standard window occupies the usual horizontal position.

At smaller breakpoints, the menu fills the entire screen. When you hover the cursor over the main menu items, submenu items with a lighter gray background are displayed. This solution is ideal for sites that do not have too many links to sections. This way they can be displayed on the page as a block of elements.

View demo

Full Responsive Portfolio by Celine

This fully responsive portfolio layout includes a simple yet effective navigation bar. When the viewing window is reduced to a certain control point, the responsive menu items for the site are hidden, leaving only the menu toggle button on the screen. The user can click on it to expand or hide the menu that expands below the title.

View demo

Bootstrap Navbar by Bobby

This code snippet contains several breakpoints and is installed on top of Bootstrap.

At larger viewport sizes, the navigation links are positioned next to the logo, and at smaller breakpoints they move down into their own bar. When the viewing window becomes even smaller, the links are “hidden” under the menu switch. This is a common method that works in all browsers.

View demo

Clean Dropdown Toggle by Boyd Massier

This flat responsive navigation bar with dropdown menus is created using pure CSS. In the responsive state, the navigation bar turns into a floating menu in which links are displayed as a block. Each internal dropdown menu can also be toggled to provide access to submenu items.

View demo

Animated Sliding Bar by Antoine Vinial

This website dropdown menu is one of the most unique examples of navigation. You see a light green tab that, when clicked, expands a navigation bar at the top with menu links. Each link has a floating width and adjusts to any screen size.

On smaller screens, the same effect is used, but the menu is displayed vertically instead of horizontally. Notice the beautiful animation effect that is controlled using the .active CSS class.

View demo

Basic Responsive Menu by Ash Nelson

At first glance, this menu seems standard: traditional links, a hamburger menu toggle, and a flat color scheme. Although it lacks the glamorous sheen, the menu works and is easy to use. All of its code is written in Haml and SASS.

View demo

Sliding Drawer Hamburger Nav by Hanlin Chong

The emergence of sliding menus for websites has given rise to many disputes between designers and developers. Some people believe that this implementation allows you to fit a lot of content into the menu without taking up useful space. Others criticize this type of menu because the links are hidden from the user's view.

For this reason, slide-out menus should be used with caution. First of all, when the site has a large number of navigation elements. And if you are looking for a template of this type of menu, I advise you to pay attention to this snippet. It implements a structure that many users are familiar with.

View demo

Single-Page Mic Nav by Travis

In this menu, links take up most of the screen, and background patterns create a matrix effect. This isn't entirely practical for regular websites, but this effect can be used for creative projects or web portfolios.

View demo

Morphing Circular Menu by Sergio

Let's experiment a little with this website menu example. Looking at it, you might think that this is an ordinary sliding menu. But after clicking on the icon, you will see a unique animated menu display effect.

This solution is unlikely to find wide application in the commercial sphere. But still, this is a wonderful example of the wide scope for creativity that responsive design provides.

View demo

Pure CSS Flexbox Nav by Joe Watkins

Flexbox CSS3 is a term used by developers to refer to the flexible CSS3 layout model. We have already published, which I advise you to read.

This menu is built on Flexbox, in which links are distributed evenly in the panel, regardless of screen size. All code is written in pure HTML and CSS, support for drop-down menus for the site is implemented.

View demo

Animated Toggle by Joe Baggaley

If you love animation effects, then you can use this solution. By default, links are aligned side by side, and drop-down submenus are supported.

When you shrink the viewport, the navigation bar disappears under the toggle link. The menu is converted into a large block, which is then displayed on the screen using animation.

View demo

Flexible Nav Menu by gantit

The most practical approach is to use multiple control points in a responsive design. That's why I like this navigation system. It shows how a standard horizontal navigation bar can go through many different phases. This snippet provides flexibility in customization and can fit seamlessly into any website.

View demo

Pure CSS Tabs by Martin Gaidichar

Tabs are considered an acceptable navigation solution, allowing movement between pages and internal content. When the viewport is reduced, they behave like a normal navigation block with animation effects. Design styles can be easily expanded to suit your tastes.

View demo

Pure CSS Breadcrumbs by Oliver Noblitch

Breadcrumbs are not very popular among designers and developers, but they can be used for navigation interfaces. These breadcrumbs are implemented without animation effects, but are written in pure CSS.

View demo

Batman Nav by Mighty Shaban

In this responsive website menu, the links are set to a single-page scrollable layout that allows you to navigate between sections. When resizing the viewport, the horizontal menu is converted into a vertical block, which is hidden behind the icon.

The menu system is beautifully laid out. It can be useful when developing any one-page layout.

View demo

Multilevel Dropdown by Stephanie Water

Designing multi-level navigation requires careful planning. Not only is this snippet functional, but it also supports responsive effects via CSS. When the navigation bar is minimized, the user can click on an icon located next to a specific menu item and display a hidden submenu. This technique helps keep your code manageable.

View demo

Pure CSS eBook Webapp by Andy Fitzsimon

The menu interface was designed to mimic the standard iOS solution, with navigation bars at the top and bottom of the screen. This snippet used CSS flexbox, with which the site's multi-level menu links and page elements resize proportionally to fit the size of the browser window.

View demo

Equal-Width Navigation by Dorian Kovran

This interface contains equal-width blocks of navigation bar links. Each link takes up the same percentage of the screen horizontally until a certain small reference point is reached. After this, the menu bar is hidden under the switch icon. Compact, beautiful and functional code.

View demo

Stylized Multilevel Navbox by Andrew DeBrew

In this snippet, the same effect was reproduced in combination with an adaptive function. This menu is surprisingly flexible and quite unique compared to other examples of responsive solutions.

All web developers have long known that websites need to be made responsive, but not everyone knows how to do it correctly. In this lesson, you will learn how to make a responsive menu for a website.

For clarity, we will make one section with a large background image, consisting of a header with a logo and a horizontal menu.

HTML markup

The task is clear, inside the section tag there will be a site header, inside which there will be a div block with a logo and a nav navigation bar. It will be used as a container for a menu of bulleted lists ul with menu items-links a .








  • Home

  • Search

  • Services

  • News

  • Photos

  • Rules





As usual, the HTML structure looks very simple - clean code and nothing superfluous, it's nice to look at. However, if you look at the result in the browser, you will want to quickly open the styles file and start making things beautiful.

This is what we will do now.

Section styling - section

In our case, the section occupies the first screen of the computer and the section tag is filled with a large background photo, against which all other elements will be located.

Section (
background: url(bg.jpg);
}

We need to ensure that the background, without disturbing the proportions of the photo, fills all the free space on any device.

Background-size: cover;
height: 100vh;

When viewed on large monitors, if the photo is not large enough, it will begin to multiply. Let's disable background repeating.

Background-repeat: no-repeat;

On mobile phones, without centering the background, it may get cut off.

Background-position: center center;

The section is ready, in it we will write styles for the header.

Styling the website header

Let's jump ahead a little and see what blocks the header will consist of - this is a div block with a logo and a nav navigation block.

How to put two blocks in a row, because in their natural form the blocks stand one under the other? The Flexbox method copes with this task perfectly - it lines up and aligns it relative to the header container the way we need it.

Header(
display: flex;
justify-content: space-between;
align-items: center;
}

The box-shadow property draws a lower shadow under the header, thus visually separating the site header from the content. It is preferable to set the height of the header not in pixels, but in relative units, for example in percentages, then the proportions of the site elements will be preserved on any screen.

Height: 18%;
box-shadow: 0 5px 15px rgba(0,0,0,.2);

We see the result of flexbox and the shadow that appears below.

Working with a logo

Now the logo is pressed to the left edge of the browser window, let's move it a little to the right.

Logo img (
margin-left: 2.3em;
}

The following code makes the logo responsive.

Max-width: 100%;

Menu styling - ul

Remove markers from menu items.

Ul(
list-style-type: none;
}

We turn a vertical menu into a horizontal one, aligning everything in the center, using the flexbox method. The transition property ensures smooth operation of the hover effect, more on that later.

Ul(
display: flex;
flex-flow: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
transition: .5s;
}

The li menu items are very close to each other and we need to work with the font and links.

Let's set the margins around the menu items.

Ulli a (
padding: 10px 20px;
}

We will make the text in capital letters and remove the underlining of links.

Text-transform: uppercase;
text-decoration: none;

We choose a darker font for contrast and make it bold (I hate it when the text color blends in with the background color of the site).

Color: #262625;
font-weight: bold;

Create a simple hover effect and don’t forget about the smooth transition.

Ulli a:hover (
background: #000;
color: #fff;
transition: .5s
}

In the next lesson, we'll make our menu responsive by making media queries. See all the code at jsfiddle.

I propose for consideration a technique for creating a simple, very flexible in settings, and also quite effective, adaptive menu, using pure semantic markup, to implement an adaptive design, without connecting javascript. As a result, using CSS, we will get a menu that can be aligned to the left, right, or positioned exactly in the center, active/current items are highlighted, a menu that can quickly rearrange itself when the browser window is resized, into a drop-down, vertical navigation bar that looks great on screens various mobile user devices (tablets, smartphones, laptops and mobile phones).

We looked at the example and made sure that our menu works. This method is generally very useful when a menu uses a large number of links. You can easily group all the buttons into one attractive panel that opens on hover.


HTML Markup

First of all, we need to mark up the entire main structure of our menu. We are creating a navigation element, which means it is logical and even practical to use an HTML5 element, a tag with a class of the same name assigned to it, for subsequent formatting of CSS styles, as well as the creation and absolute positioning of a drop-down navigation bar. The current class points to the active / current menu link, the appearance of which will be created using css.

  • Home
  • About Us
  • Portfolio
  • Our Services
  • Contacts

As you can see, the menu is a simple unordered list with a certain number of links. The number of points may be different, but still there is no need to fuss, everything is within reasonable limits.
Further, before we go too far, I want to remind you and explain to those who don’t know that HTML5 and media queries are not supported by IE versions older than 9 (not at all surprising). In order to avoid headaches in the future and do everything right, there are special scripts and, with the help of which we can solve the problem of compatibility by prudently connecting them to the document in the section.

All. We have sorted out the basic markup, the classes have been written, and the crutches have been added. Now let's move on to defining the styles of menu items, shaping the appearance and making our menu truly adaptive.

CSS Defining Styles

The set of CSS menu styles for desktop monitor screens is quite standard; I don’t see any point in going into details. I just want to draw your attention to the fact that I specified display:inline-block instead of float:left element

  • in the navigation container nav . This will allow menu items to be aligned left, right, and exactly centered by specifying the text-align property to the list item
      .

      /* menu */ .nav ( margin : 20px 0 ; ) .nav ul ( margin : 0 ; padding : 0 ; ) .nav li ( margin : 0 5px 10px 0 ; padding : 0 ; list-style : none ; display : inline-block ; * display : inline ; /* ie7 */ ) .nav a ( padding : 3px 12px ; text-decoration : none ; color : #999 ; line-height : 100% ; ) .nav a : hover ( color : #000 ; ) .nav .current a ( background : #999 ; color : #fff ; border-radius : 3px ; )

      /* menu */ .nav ( margin: 20px 0; ) .nav ul ( margin: 0; padding: 0; ) .nav li ( margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display:inline; /* ie7 */ ) .nav a ( padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( color : #000; ) .nav .current a ( background: #999; color: #fff; border-radius: 3px; )

      The .nav a:hover and .nav .current a sections are responsible for changing the color of links and the background of active/current menu items, respectively. I didn’t try to be too clever in this example, I did everything in the spirit of minimalism, when you hover over the link the color changes, the text becomes black color: #000; , and for active items I added background: #999; , replaced the font color with white color: #fff; and rounded the edges a little border-radius: 3px; at the resulting button. You can fantasize and experiment in this regard to your heart’s content.

      Align center and right

      As I mentioned above, we can change the alignment of navigation items using the text-align property by adding a few lines of CSS code:

      /* menu on the right */ .nav .right ul ( text-align : right ; ) /* menu in the center */ .nav .center ul ( text-align : center ; )

      /* menu on the right */ .nav.right ul ( text-align: right; ) /* menu in the center */ .nav.center ul ( text-align: center; )

      Adapting the menu

      The fun begins. Our menu at this stage has a rubber format (the width is determined as a percentage) and is not yet adaptive at all. Start resizing the screen and you will see that the menu is built into a chaotic jumble of buttons.


      We will correct the situation using media queries. At the media query application point at 600px, I set the relative positioning to position: relative; for the nav element so that we can later place the menu list

        on top in absolute position position: absolute; . Using the display: none property, we will hide all li menu items, leaving only currently active links with the current class, assigning them the display: block property
        When you hover over a grouped navigation bar, all menu items should be shown as a drop-down list; for this, we define the rule .nav ul:hover li with the function code>display: block . For active/current items we add an icon to highlight them from the rest.
        If you need to move the menu to the right or center it, use the left and right positioning properties for our menu's ul list.

        @media screen and (max-width: 600px) (.nav (position: relative; min-height: 40px;).nav ul (width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0 ; border : solid 1px #aaa ; background : #FAFAFA url (images/icon-menu.png ) no-repeat 10px 11px ; border-radius : 5px ; box-shadow : 0 1px 2px rgba ( 0 , 0 , . 3) ; .nav li ( display : none ; /* hide all
      • points */ margin : 0 ; ) .nav .current ( display : block ; /* show only currently active
      • items */ ) .nav a ( display : block ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( background : none ; color : #666 ; ) /* when hovering over menu items * / .nav ul: hover ( background-image : none ; ) .nav ul: hover li ( display : block ; margin : 0 0 5px ; ) .nav ul : hover . current ( background : url ( images/icon-check. png ) no-repeat 10px 7px ; ) /* responsive menu on the right */ .nav .right ul ( left : auto ; right : 0 ; ) /* responsive menu in the center */ .nav .center ul ( left : 50% ; ) margin-left : -90px ; )
        		•

        @media screen and (max-width: 600px) ( .nav ( position: relative; min-height: 40px; ) .nav ul ( width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0 ; border: solid 1px #aaa; background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,. 3); ) .nav li ( display: none; /* hide all

      • points */ margin: 0; ) .nav .current ( display: block; /* show only currently active
      • items */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( background: none; color: #666; ) /* when hovering over menu items * / .nav ul:hover ( background-image: none; ) .nav ul:hover li ( display: block; margin: 0 0 5px; ) .nav ul:hover .current ( background: url(images/icon-check. png) no-repeat 10px 7px; ) /* responsive menu on the right */ .nav.right ul ( left: auto; right: 0; ) /* responsive menu in the center */ .nav.center ul ( left: 50%; margin-left: -90px; ) )

        That's probably all! Our wonderful, 100% adaptive menu is ready, as you can see by looking at the example again. For a more detailed study of the material, you can download the sources and calmly, without unnecessary fuss, delve into the topic.

        The lesson was prepared using materials
        Free translation and adaptation: Andrey /driver/

        Hello friends, colleagues! How are you doing? I hope everyone is doing great :) Today we will make a simple adaptive menu for our landing page. People are asking about this more and more often, and I write down such questions in and try to write articles on these topics in my free time.

        Thank you for giving me new ideas in this way and helping to develop the blog. By the way, what topic would you like to read the next article on? Please write in the comments, this is very important to me. Now, let's begin...

        How to make a responsive menu for a website

        Google has confirmed that starting from mid-April, website responsiveness for mobile devices will become one of the ranking factors. In this regard, all materials on how to make your landing page adaptive are more relevant than ever. Today I won’t explain anything complicated, but on the contrary, I’ll tell you how to make a very simple adaptive menu with a minimum of time.

        Basically it will be html + css, but you will need a very small script to process the click. So…

        Responsive horizontal menu

        Let's start with html. First of all, let's connect the jquery library. You've probably been using it for a long time, so make sure you don't connect it a second time:

        Now the markings. A regular unordered list, and a small div that contains a menu icon. It will be visible only at low resolutions.

      • Download price
      • Contacts
      • Reviews

        • As you can see, it’s not complicated, I think you can improve it yourself as needed.
        Now let's add styles:

        #menu ( background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; ) #menu a ( color: #fff; text-decoration: none; padding: 12px 12px; ) #menu a: hover ( border-bottom: 4px solid #fff; background: #078ecb; ) .itemsMenu li ( display:inline; padding-right: 35px; width:100%; margin: 0 auto; ) .itemsMenu li img( vertical-align : middle; margin-right: 10px; .iconMenu ( color: #fff; cursor: pointer; display: none; ) .showitems ( display:block !important; ) @media screen and (max-width: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0; ) )

        Now, when you reduce the browser window, you will see the following picture:

        I would really not like to describe every line, because the blog is not about layout as such. Let me just try to explain.

        First, we set the display:inline property to the li elements to make them appear horizontally next to each other. I could have used float:left, but I decided to do it this way. And hide the menu icon with the display:none property. When the screen resolution is less than 600 pixels, remove the inline from the li elements, hide them, and show the icon. In a nutshell - yes.

        Now we need a simple script that would process a click on the menu icon and show its elements:

        $(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

        Like this. I put it in a separate file and included it before the closing body tag.

        That's it. This way you can quickly create a simple adaptive menu for your landing page.

        Of course, there are disadvantages. Indents are specified in pixels, but you can also set all distances as a percentage. There was simply no need for it. If this were a full-fledged site, then I would use svg or font icons, not png, and I would recalculate the indents as a percentage. And so, it was a little impromptu :) I hope everything is clear? Bye.

        Habr, hello!

        There are a lot of good solutions from different specialists appearing on Codepen, and I believe that the best of them should be collected in one place. Therefore, 2 years ago I started saving interesting scripts on various topics on my computer.

        I used to post them in the mr cloud IDE product group. Gefest, these were assemblies of 5-8 solutions. But now I have started to accumulate 15-30 scripts in different topics (buttons, menus, tooltips, and so on).

        Such large sets should be shown to more specialists. That's why I'm posting them on Habr. I hope they will be useful to you.

        In this review we will look at multi-level menus.

        Flat Horizontal Navigation

        Beautiful navigation bar with smoothly appearing submenus. The code is well structured and uses js. Judging by the features used, it works in ie8+.
        http://codepen.io/andytran/pen/kmAEy

        Material Nav Header w/ Aligned Dropdowns

        Adaptive link bar with two-column submenu. Everything is done in css and html. Used css3 selectors that are not supported in ie8.
        http://codepen.io/colewaldrip/pen/KpRwgQ

        Smooth Accordion Dropdown Menu

        Stylish vertical menu with smoothly opening elements. Transition, transform js code is used.
        http://codepen.io/fainder/pen/AydHJ

        Pure CSS Dark Inline Navigation Menu

        Dark vertical navigation bar with icons from ionicons. JavaScript is used. In ie8 it will most likely work without animation.
        http://codepen.io/3lv3n_snip3r/pen/XbddOO

        Pure CSS3 Mega Dropdown Menu With Animation

        Stylish menu with two output formats: horizontal and vertical. Icons and css3 animation are used. It will definitely look terrible in ie8, but in other browsers everything is cool.
        Vertical link: http://codepen.io/rizky_k_r/full/sqcAn/
        Link to horizontal: http://codepen.io/rizky_k_r/pen/xFjqs

        CSS3 Dropdown Menu

        Horizontal menu with large elements and a drop-down list of links. Clean and minimalistic code without js.
        http://codepen.io/ojbravo/pen/tIacg

        Simple Pure CSS Dropdown Menu

        Simple but stylish horizontal menu. Uses font-awesome. Everything works on css and html, without js. It will work in ie8.
        http://codepen.io/Responsive/pen/raNrEW

        Bootstrap 3 mega-dropdown menu

        An excellent solution for online stores. Displays several levels of categories and large images (for example, a product on sale). It is based on boostrap 3.
        http://codepen.io/organizedchaos/full/rwlhd/

        Flat Navigation

        Stylish navigation bar with smooth submenu. In older browsers it will display problems.
        http://codepen.io/andytran/pen/YPvQQN

        3D nested navigation

        Horizontal menu with very cool animation without js!
        http://codepen.io/devilishalchemist/pen/wBGVor

        Responsive Mega Menu - Navigation

        Horizontal responsive menu. It looks good, but the mobile version is a little lame. CSS, html and js are used.
        http://codepen.io/samiralley/pen/xvFdc

        Pure Css3 Menu

        Original menu. With simple and clean code without js. Use for "wow" effects.
        http://codepen.io/Sonick/pen/xJagi

        Full CSS3 Dropdown Menu

        Colorful drop-down menu with one nesting level. Icons from font-awesome, html and css are used.
        http://codepen.io/daniesy/pen/pfxFi

        Css3 only dropdown menu

        A fairly good horizontal menu with three levels of nesting. Works without js.
        http://codepen.io/riogrande/pen/ahBrb

        Dropdown Menus

        A minimalistic menu with the original effect of a nested list of elements appearing. I'm glad that this solution is also without javascript.
        http://codepen.io/kkrueger/pen/qfoLa

        Pure CSS DropDown Menu

        A primitive but effective solution. Only css and html.
        http://codepen.io/andornagy/pen/xhiJH

        Pull Menu - Menu Interaction Concept

        Interesting menu concept for a mobile phone. I've never seen anything like this before. Uses html, css and javascript.
        http://codepen.io/fbrz/pen/bNdMwZ

        Make Simple Dropdown Menu

        Clean and simple code, no js. It will definitely work in ie8.
        http://codepen.io/nyekrip/pen/pJoYgb

        Pure CSS dropdown

        The solution is not bad, but it uses too many classes. I'm glad there's no js.
        http://codepen.io/jonathlee/pen/mJMzgR

        Dropdown Menu

        Nice vertical menu with minimal javascript code. JQuery is not used!
        http://codepen.io/MeredithU/pen/GAinq

        CSS 3 Dropdown Menu

        A horizontal menu with additional captions can decorate your website well. The code is simple and clear. Javascript is not used.
        http://codepen.io/ibeeback/pen/qdEZjR

        Beautiful solution with a lot of code (html, css and js). 3 submenu formats have been created. The solution is well suited for online stores.
        http://codepen.io/martinridgway/pen/KVdKQJ

        CSS3 Menu Dropdowns (special solution)!

        Dark horizontal menu with thirteen (13) animation options! I definitely advise you to read it, it will be useful in everyday life.
        http://codepen.io/cmcg/pen/ofFiz

        P.S.
        I hope you liked the collection of 23 solutions. If you want to continue reading them, take the survey below.
        Enjoy your work everyone.