Hello and welcome to our community! Is this your first visit?
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
    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

    -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):

    		Navbar 3
    	<meta name="viewport" content="width=device-width, user-scalable=no">
    	<link href="style.css" rel="stylesheet" />
    	<input type="checkbox" name="nav" id="nav" />
    	<div id="page">
    		<label id="top" for="nav">
    		<label id="side" for="nav"></label>
    				<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>
    		<div id="scroll">
    			This is a scrollable div.
    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. AdSlot6
  3. #2
    New to the CF scene
    Join Date
    Jul 2012
    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