«
»

Responsive CSS menu with a disappearing “Menu” button

December 7th, 2012

The idea of this menu is that it has a “Menu” button to open a menu in small screens. When the menu’s been opened the “Menu” button is hidden. It’s pure CSS responsive menu with no JavaScript through :target CSS pseudo class. Let’s walk step by step on concepts of this menu:

1. It’s looked like a classic horizontal menu on the desktop. The menu has inline-block items.

2. The menu has a main container with a certain id, for example, “menu”. Here’s the HTML for the menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  <div id="menu">
    <div class="menu-container">
      <a href="#menu" class="menu-button">Menu</a>
      <div class="menu">
        <a href="#">Home</a>
        <a href="#">Blog</a>
        <a href="#">News</a>
        <a href="#">Forum</a>
        <a href="#">Support</a>
        <a href="#">About</a>
        <a href="#" class="active">Contact Us</a>  
      </div>
    </div>
  </div>

3. Besides the menu, there’s another container that has a hidden link by default. It’s a “Menu” button for responsive. Also, this container has the menu itself.

4. The “Menu” button has “#menu” as a “href” attribute value. This allows to scroll the screen to “menu” id when the “Menu” button is clicked.

5. If there’s an id on the page that is matched to URI part after “#” the :target CSS pseudo class points to the element with this id. This allows to detect when the “Menu” button is clicked.

6. When the small screen is detected (with help of CSS media queries), the menu is hidden and the “Menu” button is shown. Also, the display property is changed from inline-block to block for menu items for responsive.

7. With help of :target the “Menu” button click is detected and based on :target the button’s hidden and the menu’s shown.

Here’s the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

  /* Links */
 
  a, a:link, a:visited, a:hover {
    color: #fff;
    text-decoration: none;
  }
 
  /* Menu */
 
  .menu-container {
    border: 1px solid #999;
    border-radius: 5px;
    margin: 0 auto;
    padding: 20px;
    width: 500px;
  }
 
  /* Menu items */
 
  .menu-container a {
    background: #1E90FF;
    border-radius: 5px;
    display: inline-block;
    padding: 5px 10px;
    -moz-transition: background-color .3s;
    -o-transition: background-color .3s;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
  }
 
  .menu-container .active {
    background: #FFD700;
    color: #555;
  }
 
  .menu-container a:hover,
  .menu-container .active:hover {
    background: #ADD8E6;
    color: #555;
  }
 
  /* Responsive Menu Button */
 
  .menu-container .menu-button {
    background: #999;
    display: none;
  } 
 
  /* Responsive */
 
   all and (max-width: 550px) {
    .menu-container {
      width: 50%;
    }
 
    .menu-container .menu-button {
      display: block;
    }
 
    .menu-container .menu {
      height: 0;
      opacity: 0;
      overflow: hidden;
 
      -moz-transition: opacity 1s ease-out;
      -o-transition: opacity 1s ease-out;
      -webkit-transition: opacity 1s ease-out;
      transition: opacity 1s ease-out;   
      width: 100%;
    }
 
    .menu a {
      display: block;
      margin: 1px 0;
    }
 
    #menu:target .menu {
      opacity: 1; 
      height: auto;
    }
 
    #menu:target .menu-button {
      display: none;
    }
  }

Try it here http://codepen.io/starikovs/pen/kIrdo.

Posted in css, responsive web design
Links:
  • alt-checkbox jQuery plugin
Search
Categories
Archives

Copyright © 2009 Vacheslav Starikov. All Rights Reserved.