Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Pure CSS3 Simple Drawer Transition Menu Navigation


Code Snippet </> Info


Snippet Name: Pure CSS3 Simple Drawer Transition Menu Navigation

Description: Add a pure CSS3 simple drawer menu navigation with transitions to your web page. This is a complete website template ready for your content.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-03-20 00:20:00

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <title>Pure HTML5 CSS3 Simple Drawer Transition Menu Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> /* Begin Pure HTML5 CSS3 Simple Drawer Transition Menu Navigation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} a {color:#69C;text-decoration:none;} a:hover {color:#F60;} * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out; margin:0; padding:0; -webkit-text-size-adjust:none; } /* Let's be sure that everything is set to 100% height */ html,body { height:100%; overflow:hidden; } /* Let's style the label */ #drawer-toggle { position:absolute; opacity:0; } #drawer-toggle-label { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; left:0px; height:50px; width:50px; display:block; position:fixed; background:rgba(255,255,255,.0); z-index:1; } /* Let's style the menu icon */ #drawer-toggle-label:before { content:''; display:block; position:absolute; height:2px; width:24px; background:#8d8d8d; left:13px; top:18px; box-shadow:0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d; } header { width:100%; position:fixed; left:0px; background:#efefef; padding:10px 10px 10px 50px; font-size:30px; line-height:30px; z-index:0; /* bottom border color */ border-bottom:solid 1px #ddd; /* bottom border shadow - remove or comment out if not wanted */ box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.5); } /* Let's style the drawer menu pane */ #drawer { position:fixed; top:0; left:-300px; height:100%; width:300px; background:#eee; overflow-x:hidden; overflow-y:scroll; padding:20px; -webkit-overflow-scrolling:touch; } /* Let's style the page content pane */ #page-content { margin-left:0px; margin-top:50px; width:100%; height:calc(100% - 50px); overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; padding:20px; } /* Checked styles (menu open state) */ #drawer-toggle:checked ~ #drawer-toggle-label { height:100%; width:calc(100% - 300px); background:rgba(255,255,255,.8); } #drawer-toggle:checked ~ #drawer { left:0; } #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header { left:300px; } #drawer-toggle:checked ~ #page-content { margin-left:300px; } /* Let's style the menu items with transitions */ #drawer ul { list-style-type:none; } #drawer li a { background-color:#eee; width:100px; padding:5px 15px; margin-top:7px; display:block; text-decoration:none; color:#333; font-family:verdana, arial, helvetica, sans-serif; font-size:12px; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; border-radius:10px; -webkit-box-shadow:3px 3px 3px rgba(0,0,0,.3); -moz-box-shadow:3px 3px 3px rgba(0,0,0,.3); -o-box-shadow:3px 3px 3px rgba(0,0,0,.3); -ms-box-shadow:3px 3px 3px rgba(0,0,0,.3); box-shadow:3px 3px 3px rgba(0,0,0,.3); -webkit-transition:all 0.25s ease; -moz-transition:all 0.25s ease; -o-transition:all 0.25s ease; -ms-transition:all 0.25s ease; transition:all 0.25s ease; } #drawer li a:hover { background-color:#666; color:#eee; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2); z-index:2; margin-left:25px; } /* Let's not forget Responsive Media Queries */ @media all and (max-width:350px) { #drawer-toggle:checked ~ #drawer-toggle-label { height:100%; width:50px; } #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header { left:calc(100% - 50px); } #drawer { width:calc(100% - 50px); left:-100%; } #drawer-toggle:checked ~ #page-content { margin-left:calc(100% - 50px); } } </style> </head> <body> <input type="checkbox" id="drawer-toggle" name="drawer-toggle"/> <label for="drawer-toggle" id="drawer-toggle-label"></label> <header> <!-- insert your own logo image or use font text --> <img src="http://snapbuilder.com/images/logo.png"> </header> <nav id="drawer"> <!-- add as many links that you need --> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <div id="page-content"> <h3>Pure CSS3 Drawer Transition Menu Navigation</h3> <br /> <p>Simply click on the drawer toggle <img src="http://snapbuilder.com/code_snippets/view_code_example/css/menu_and_navigation/images/icon-menu.png"> at the top of the page for an example of the drawer menu opening effect.</p> <br /> <p>This is a complete website template ready for your additions.</p> <br /> <p>This drawer menu has a transition menu navigation style.</p> <br /><br /> <div id="link"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_213.html">Pure HTML5 CSS3 Simple Drawer Transition Menu Navigation Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library