Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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; }

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •