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

 

Category: Javascript Codes Library >> Navigation / Menus >> Responsive CSS3 JS Side Navigation Menu


Code Snippet </> Info


Snippet Name: Responsive CSS3 JS Side Navigation Menu

Description: Easily add this Responsive CSS3 JS Side Navigation Menu to your web site.


Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser


Example: View Code Demo

Note: Change navigation icons and link URLs to your needs.

Author: Sara Soueidan

Last Modified: 2019-12-10 00:26:34

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
Copied To Clipboard!

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Responsive CSS3 JS Side Navigation Menu</title> <!-- /* Point towards your existing font-awesome.css file, or leave this code in place */ // --> <link rel="stylesheet prefetch" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css"> <style> *{box-sizing:border-box;} body{height:100%;background-color:#eee;} h1{font-size:1em;text-align:center;color:#444;letter-spacing:1px;text-shadow:1px 1px 1px rgba(0,0,0,0.5);} .nav-container{width:300px;margin-top:10px;box-shadow:0 2px 2px 2px black;transition:all 0.3s linear;} .nav{list-style-type:none;margin:0;padding:0;} li{height:50px;position:relative;background:linear-gradient(#292929, #242424);} a {border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid black;text-decoration:none;display:block;height:100%;width:100%;line-height:50px;color:#bbb;text-transform:uppercase;font-weight:bold;padding-left:25%;border-left:5px solid transparent;letter-spacing:1px;transition:all 0.3s linear;} .active a{color:#B93632;border-left:5px solid #B93632;background-color:#1B1B1B;outline:0;} li:not(.active):hover a{border-left:5px solid #FCFCFC;background-color:#1B1B1B;color:#eee;} span[class ^= "icon"]{position:absolute;left:20px;font-size:1.5em;transition:all 0.3s linear;} @media only screen and (max-width:860px){ .text{display:none;} .nav-container, a{width:70px;} a:hover{width:200px;z-index:1;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid black;box-shadow:0 0 1px 1px black;} a:hover.text {display:block;padding-left:30%;} } @media only screen and (max-width:480px){ .nav-container, a{width:50px;} span[class ^= "icon"]{left:8px;} } </style> <script> <!-- /* Begin Responsive CSS3 JS Side Navigation Menu == This Script Free To Use Providing This Notice Remains == == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == == Created by: Sara Soueidan : http://twitter.com/SaraSoueidan : Creative Commons License == */ $('li').click(function(){ $(this).addClass('active') .siblings() .removeClass('active'); }); // --> </script> </head> <body> <h1>Responsive CSS3 JS Side Navigation Menu</h1> <h1>Slowly resize screen to see the width transition</h1> <div class="nav-container"> <ul class="nav"> <!-- /* Add as many links as you need */ // --> <li class="active"><a href="https://snapbuilder.com"><span class="icon-home"></span><span class="text">home</span></a></li> <li><a href="https://snapbuilder.com"><span class="icon-user"></span><span class="text">about</span></a></li> <li><a href="https://snapbuilder.com"><span class="icon-headphones"></span><span class="text">Audio</span></a></li> <li><a href="https://snapbuilder.com"><span class="icon-picture"></span><span class="text">Portfolio</span></a></li> <li><a href="https://snapbuilder.com"><span class="icon-facetime-video"></span><span class="text">video</span></a></li> </ul> </div> <!-- /* Point towards your existing jQuery file, or leave this code in place */ // --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library