| paintba11er89 |
07-21-2012 04:06 AM |
CSS Menu Slider for Mobile Devices - Collaboration
Have you ever used Facebook's mobile site or app? The app sports a cool scrollable menu that slides out from the left. For mobile versions of sites, this is a fantastic way to deal with your navigation menu so you don't take up valuable space with nav links! I've created a working version of that type of layout, and I decided to see if anyone wants to help collaborate on it. More information is provided in my repo - https://github.com/NicholasRBowers/CSS-Menu-Slider.
Live Demo: http://woodysenterprises.com/other/CSS-Menu-Slider.html
Highlights:
-Based off of Checkbox Hack
-Meant for mobile
-Works in major browsers (except IE, but I'm designing for mobile, so this doesn't concern me TOO much)
-Tested on Android browser and Chrome on Android, and works moderately well in both (if you zoom, Chrome freaks out a little bit)
-Collaboration welcome!
Code at the time of posting (updated version will always be in Github):
HTML
Code:
<html>
<head>
<title>
Navbar 3
</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="style.css" rel="stylesheet" />
</head>
<body>
<input type="checkbox" name="nav" id="nav" />
<div id="page">
<header>
Header
</header>
<label id="top" for="nav">
Navigation
</label>
<label id="side" for="nav"></label>
<nav>
<ul>
<a href="#"><li>Link 1</li></a>
<a href="#"><li>Link 2</li></a>
<a href="#"><li>Link 3</li></a>
<a href="#"><li>Link 4</li></a>
<a href="#"><li>Link 5</li></a>
</ul>
</nav>
<div id="scroll">
This is a scrollable div.
</div>
</div>
</body>
</html>
CSS
Code:
body, div {
padding: 0;
margin: 0; }
input {
display: none !important;
visibility: hidden; }
div#page {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
header {
width: 100%;
height: 100px;
background-color: red;
position: fixed;
left: 0;
top: 0;
text-align: center; }
label#top {
padding: 0;
margin: 10px;
position: fixed;
left: 0;
top: 0;
width: 30%;
height: 80px;
text-align: center;
cursor: pointer;
background-color: yellow; }
label#side {
visibility: hidden;
position: fixed;
left: 60%;
top: 0;
overflow: auto;
width: 40%;
height: 100%;
opacity: 0; }
nav {
position: fixed;
left: -60%;
top: 0;
overflow: auto;
width: 60%;
margin: 0;
padding: 0;
height: 100%;
background-color: black; }
nav ul {
list-style: none;
background-color: green;
margin: 0;
padding: 1%;
width: 98%;
height: 1000px;
position: relative;
left: 0;
top: 0; }
nav a {
text-decoration: none;
color: black;
display: block;
margin: 5px;
background-color: cyan; }
input[id=nav]:checked + div#page, input[id=nav]:checked + div#page header,
input[id=nav]:checked + div#page label#top {
left: 60% !important;
overflow: hidden; }
input[id=nav]:checked + div#page nav {
left: 0 !important; }
input[id=nav]:checked + div#page label#side {
visibility: visible; }
div#scroll {
position: absolute;
left: 0;
top: 100px;
background-color: pink;
height: 2000px;
width: 100%;
z-index: -1; }
header, input, label, nav, div {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s; }
|
