-
Notifications
You must be signed in to change notification settings - Fork 1
/
CSS-Slider-Menu.html
101 lines (82 loc) · 5.5 KB
/
CSS-Slider-Menu.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
CSS Menu Slider
</title>
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
<link href="style.css" rel="stylesheet" />
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<input type="checkbox" name="nav" id="nav" />
<div id="page">
<!-- Anything in the header tag show in a fixed position at the top of the screen -->
<header>
<label id="navbuttontop" for="nav">
<h6>Navigation</h6>
</label>
<h1>Header</h1>
</header>
<!-- navbuttontop is the navigation button, while contentsideoverlay is the transparent label used to let the user return to the content menu from the nav menu by clicking anywhere out of the navigational menu -->
<label id="contentsideoverlay" for="nav"></label>
<!-- Anything in the nav tag shows up in the side navigational bar -->
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li>
<ul>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
</li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
<li><a href="#">Link 13</a></li>
<li><a href="#">Link 14</a></li>
<li><a href="#">Link 15</a></li>
</ul>
</nav>
<!-- Area for page content -->
<div id="content">
<div class="wrap">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit. Vivamus ultrices risus auctor magna suscipit malesuada. Etiam eget tellus nec enim accumsan aliquam. Phasellus neque ipsum</a>, bibendum in mattis in, fringilla ut arcu. Curabitur iaculis ullamcorper magna scelerisque mollis. Donec id laoreet enim. Pellentesque eu sem ac nisl feugiat malesuada non sed erat. Ut nulla leo, aliquet aliquam varius non, luctus sed magna. Pellentesque non massa lectus. Maecenas lobortis rhoncus nulla. Mauris at lectus orci. Nunc leo purus, egestas id luctus ac, viverra a nisi. Nam commodo faucibus lacus, et cursus nunc convallis eu. Vestibulum augue urna, mollis at venenatis eget, sodales non libero. Nullam non diam dignissim ligula pellentesque gravida. Cras condimentum venenatis mauris vitae egestas.
</p>
<p>
Nulla quis diam dolor, non fermentum mauris. Morbi eros quam, dignissim ut elementum quis, rhoncus non orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus enim, porta non convallis at, tincidunt non justo. Morbi dignissim lorem a augue laoreet consequat at a odio. <a href="#">Nunc at eros leo, ac lacinia libero. Donec ultricies consectetur tortor quis tincidunt.</a> Vestibulum dignissim, neque non venenatis vestibulum, urna justo venenatis felis, nec scelerisque mi lacus nec dui. Nam nisi elit, hendrerit rutrum ullamcorper nec, feugiat sit amet libero. Duis gravida felis et elit mattis sollicitudin at non nulla. Sed pulvinar, ligula scelerisque porttitor dictum, nulla nulla adipiscing purus, ut tristique quam lorem at orci.
</p>
<p>
Aenean porta dui non diam malesuada molestie. Suspendisse fringilla suscipit auctor. Sed a iaculis leo. Nunc sit amet rutrum justo. Cras luctus lectus a metus iaculis quis dapibus sapien facilisis. Aenean nec posuere metus. Maecenas et elit at nulla bibendum porttitor. Nunc non diam dui, non tincidunt risus.
</p>
<a href="#">
<img src="http://dummyimage.com/640x480" />
</a>
<p>
Mauris volutpat nisi sed nunc fermentum quis volutpat sem hendrerit. Nulla tincidunt, purus at sagittis faucibus, lectus diam ultricies odio, et tincidunt libero sapien eu orci. Nullam elit metus, iaculis ac auctor sed, sodales vel dui. Integer et augue ac metus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam malesuada interdum lectus. Nullam cursus, lorem non scelerisque ultrices, risus nibh luctus urna, ac congue est metus volutpat urna. Duis faucibus, elit eget facilisis semper, odio purus lobortis mauris, sit amet ultricies tortor eros faucibus tellus. Mauris consectetur ullamcorper nisl aliquet consectetur. Ut tellus purus, tempus vitae laoreet sit amet, aliquet sed quam. Aenean mauris dolor, porttitor et laoreet eu, sollicitudin et quam.
</p>
<p>
Nunc gravida semper eleifend. Duis consequat elit id velit lobortis ut semper dui lobortis. Ut posuere vestibulum egestas. In vehicula turpis cursus nisl bibendum hendrerit. Donec ultrices faucibus elit, ac lacinia dolor eleifend quis. Aliquam at ultrices mauris. Sed mattis pellentesque libero, sed volutpat ligula bibendum sit amet. Proin eget tortor vitae risus dignissim elementum vitae a urna. Integer non egestas felis. Maecenas sodales elit eu ligula rutrum ut laoreet purus egestas.
</p>
</div>
</div>
</div>
</body>
</html>