Ajax Loader
×

Untitled

HTML 
<!-- required markup: <nav>, <ul>, <li>, <input type=checkbox>, <label>, <a> -->
1
<!-- required markup: <nav>, <ul>, <li>, <input type=checkbox>, <label>, <a> -->
2
 
3
<nav>
4
  <input type="checkbox">
5
  <label>&equiv;</label>
6
  <ul>
7
    <li><a href="#">Home</a></li>
8
    <li><a href="#">About</a></li>
9
    <li><a href="#">Archive</a></li>
10
    <li><a href="#">Contact</a></li>
11
  </ul>
12
</nav>
13
 
14
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
* {
1
* {
2
  margin:0;
3
  padding:0;
4
}
5
 
6
/* horizontal navigation: define the navigation font and basic background */
7
nav {
8
  background-color:black;
9
  font:normal bold 11px Arial,Sans-Serif;
10
  color:gray;
11
  height:30px;
12
}
13
 
14
/* lists: remove the nested list margin, padding & bullets */
15
nav ul,
16
nav li {
17
  margin:0 0;
18
  padding:0 0;
19
  list-style:none;
20
}
21
 
22
/* navigation height */
23
nav ul {height:30px}
24
 
25
/* inline layout menu */
26
nav li {
27
  float:left;
28
  display:inline;
29
}
30
 
31
/* the anchor */
32
nav a {
33
  display:block;
34
  line-height:30px;
35
  padding:0 14px;
36
  text-decoration:none;
37
  color:white;
38
}
39
 
40
/* hover state menu */
41
nav a:hover {background-color:#39f}
42
 
43
/* checkbox element: for mobile navigation button */
44
nav input {
45
  display:none;
46
  margin:0 0;
47
  padding:0 0;
48
  width:30px;
49
  height:30px;
50
  opacity:0;
51
  cursor:pointer;
52
}
53
 
54
/* for visual purpose */
55
nav label {
56
  display:none;
57
  font-size:200%;
58
  width:30px;
59
  height:30px;
60
  /* center vertically and horizontally */
61
  line-height:30px;
62
  text-align:center;
63
}
64
 
65
 
66
/* MOBILE NAVIGATION */
67
 
68
@media (max-width:767px) {
69
 
70
  nav {
71
    /* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */
72
    position:relative;
73
  }
74
 
75
  nav ul {
76
    background-color:#200;
77
    position:absolute;
78
    top:100%;
79
    right:0;
80
    left:0;
81
    height:auto;
82
    display:none; /* hide the menu */
83
  }
84
 
85
  /* set the menu as a block list item */
86
  nav li {
87
    display:block;
88
    float:none;
89
    width:auto;
90
  }
91
 
92
  /* now show the checkbox and label element in mobile device */
93
  nav input,
94
  nav label {
95
    position:absolute;
96
    top:0;
97
    right:0;
98
    display:block; /* show the menu icon */
99
  }
100
101
  nav input {z-index:4} /* always place the checkbox above the label element */
102
 
103
  /* highlight the label element and show the menu if the checkbox is checked */
104
  nav input:checked + label,
105
  nav label.active {color:white}
106
  nav input:checked ~ ul,
107
  nav ul.show {display:block}
108
 
109
}
110
 
111
/* NOTE: If you can't resize the window, you can increase the `max-width` value in the media queries temporary to see the mobile result */
 
JavaScript 
$('nav input[type="checkbox"]').on("change", function() {
1
$('nav input[type="checkbox"]').on("change", function() {
2
  $(this).next()[this.checked ? "addClass" : "removeClass"]('active')
3
    .next()[this.checked ? "addClass" : "removeClass"]('show');
4
});
 

Untitled

CSSDeck G+