Sidebar Nav

Developer
Mark Thomes
Size
3,808 Kb
Views
40,480
  1. Sidebar Nav Previews
  2. Sidebar Nav HTML Codes
  3. Sidebar Nav CSS Codes
  4. Sidebar Nav JS Codes

How do I make an sidebar nav?

Animated sidebar with floating activator button/tab. #sorry. What is a sidebar nav? How do you make a sidebar nav? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Sidebar Nav Previews
IQ Test

Sidebar Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sidebar Nav</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Raleway:500);
body { font-family: Raleway, helvetica, arial, sans-serif; background-color: #59611d;
}
nav { position: absolute; width: 200px; left: 0; top: 0; bottom: 0; background-color: #b3c33a; transform: translate(-200px, 0); transition: transform 0.5s linear;
}
nav.active { transform: translate(0, 0);
}
button { position: absolute; top: 0; right: 0; border: 0; width: 50px; height: 50px; background-color: #b3c33a; transform: translate(50px, 0); transition: transform 0.125s linear 0.375s;
}
button:focus, button:active, button:hover { outline: 0;
}
button:hover { background-color: #7d8828;
}
button:before, button:after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 10px; border-radius: 2px; background-color: white; transition: all 0.125s linear 0.5s;
}
button:before { transform: translate(10px, 10px) rotate(0);
}
button:after { transform: translate(10px, 30px) rotate(0);
}
.active button { transform: translate(0, 0); transition: all 0.125s linear;
}
.active button:before, .active button:after { width: 40px; transition: all 0.375s linear 0.125s;
}
.active button:before { transform: translate(5px, 20px) rotate(45deg);
}
.active button:after { transform: translate(5px, 20px) rotate(-45deg);
}
ul { margin: 50px 0 0 0; padding: 0;
}
ul li { list-style-type: none;
}
ul li:nth-child(6) a:hover { background-color: rgba(128, 0, 0, 0.7);
}
a { display: block; padding: 20px; color: white; text-decoration: none; transition: all 0.0625s linear;
}
a:hover { background-color: #7d8828;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">Games</a></li> <li><a href="#">New Game</a></li> <li><a href="#">Leaderboard</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Logout</a></li> </ul> <button class="menu"></button>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sidebar Nav - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway:500);
body { font-family: Raleway, helvetica, arial, sans-serif; background-color: #59611d;
}
nav { position: absolute; width: 200px; left: 0; top: 0; bottom: 0; background-color: #b3c33a; transform: translate(-200px, 0); transition: transform 0.5s linear;
}
nav.active { transform: translate(0, 0);
}
button { position: absolute; top: 0; right: 0; border: 0; width: 50px; height: 50px; background-color: #b3c33a; transform: translate(50px, 0); transition: transform 0.125s linear 0.375s;
}
button:focus, button:active, button:hover { outline: 0;
}
button:hover { background-color: #7d8828;
}
button:before, button:after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 10px; border-radius: 2px; background-color: white; transition: all 0.125s linear 0.5s;
}
button:before { transform: translate(10px, 10px) rotate(0);
}
button:after { transform: translate(10px, 30px) rotate(0);
}
.active button { transform: translate(0, 0); transition: all 0.125s linear;
}
.active button:before, .active button:after { width: 40px; transition: all 0.375s linear 0.125s;
}
.active button:before { transform: translate(5px, 20px) rotate(45deg);
}
.active button:after { transform: translate(5px, 20px) rotate(-45deg);
}
ul { margin: 50px 0 0 0; padding: 0;
}
ul li { list-style-type: none;
}
ul li:nth-child(6) a:hover { background-color: rgba(128, 0, 0, 0.7);
}
a { display: block; padding: 20px; color: white; text-decoration: none; transition: all 0.0625s linear;
}
a:hover { background-color: #7d8828;
}

Sidebar Nav - Script Codes JS Codes

function sidebar() { $("nav").toggleClass("active");
}
$("button, a").on("click", sidebar);
Sidebar Nav - Script Codes
Sidebar Nav - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 3.5
Size 3,808 Kb
Views 40,480
Do you need developer help for Sidebar Nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Thomes (WithAnEs) Script Codes
Name
Save Bar
Twitter Feed Loading Animation
Animation Delay Debug
Popup Footer
Beer Color
Basic Menu CSS
Aperture
Running Character
Pharmacy Loader
Social Icons
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!