-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathcss-mobile-navigation-concept.html
142 lines (120 loc) · 2.69 KB
/
css-mobile-navigation-concept.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile Navigation Concept with Media Queries</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
h1 {
font:normal bold 30px Arial,Sans-Serif;
color:black;
margin:30px 30px 0;
}
/* horizontal navigation: define the navigation font and basic background */
nav {
background-color:black;
font:normal bold 11px Arial,Sans-Serif;
color:gray;
height:30px;
}
/* lists: remove the nested list margin, padding & bullets */
nav ul,
nav li {
margin:0 0;
padding:0 0;
list-style:none;
}
/* navigation height */
nav ul {height:30px}
/* inline layout menu */
nav li {
float:left;
display:inline;
}
/* the anchor */
nav a {
display:block;
line-height:30px;
padding:0 14px;
text-decoration:none;
color:white;
}
/* hover state menu */
nav a:hover {background-color:#39f}
/* checkbox element: for mobile navigation button */
nav input {
display:none;
margin:0 0;
padding:0 0;
width:30px;
height:30px;
opacity:0;
cursor:pointer;
}
/* for visual purpose */
nav label {
display:none;
font-size:200%;
width:30px;
height:30px;
/* center vertically and horizontally */
line-height:30px;
text-align:center;
}
/* MOBILE NAVIGATION */
@media (max-width:767px) {
nav {
/* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */
position:relative;
}
nav ul {
background-color:#200;
position:absolute;
top:100%;
right:0;
left:0;
height:auto;
display:none; /* hide the menu */
}
/* set the menu as a block list item */
nav li {
display:block;
float:none;
width:auto;
}
/* now show the checkbox and label element in mobile device */
nav input,
nav label {
position:absolute;
top:0;
right:0;
display:block; /* show the menu icon */
}
nav input {z-index:4} /* always place the checkbox above the label element */
/* highlight the label element and show the menu if the checkbox is checked */
nav input:checked + label {color:white}
nav input:checked ~ ul {display:block}
}
</style>
</head>
<body>
<!-- required markup: <nav>, <ul>, <li>, <input type=checkbox>, <label>, <a> -->
<nav>
<input type="checkbox">
<label>≡</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Resize the window...</h1>
<script>window.onresize = function() {
document.getElementsByTagName('h1')[0].style.display = "none";
};</script>
</body>
</html>