Sidenavigation

Developer
Sander
Size
3,421 Kb
Views
14,168
  1. Sidenavigation Previews
  2. Sidenavigation HTML Codes
  3. Sidenavigation CSS Codes
  4. Sidenavigation JS Codes

How do I make an sidenavigation?

A simple jquery driven sidenavigation that slides in and out. Ideal for large navigations on small screens to save space.. What is a sidenavigation? How do you make a sidenavigation? This script and codes were developed by Sander on 18 December 2022, Sunday.

Sidenavigation Previews
IQ Test

Sidenavigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sidenavigation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="overlayContainer">
</div>
<div class="side"> <div class="btnSide"> M </div> <ul class="catalogueList"> <li class="catalogueItem"><p>Books</p> <ul class="catalogueSubList"> <li class="catalogueSubItem"><a href="" title="" class="animation">English books</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Dutch books</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">German books</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">French books</a></li> </ul> </li> <li class="catalogueItem"><p>Music</p> <ul class="catalogueSubList"> <li class="catalogueSubItem"><a href="" title="" class="animation">Pop</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Hip hop</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Rock</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Metal</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Classic</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Singer/songwriter</a></li> </ul> </li> <li class="catalogueItem"><p>Movies</p> <ul class="catalogueSubList"> <li class="catalogueSubItem"><a href="" title="" class="animation">Action</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Drama</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Thriller</a></li> <li class="catalogueSubItem"><a href="" title="" class="animation">Horror</a></li> </ul> </li> </ul>
</div>
<div class="top">
</div>
<div class="wrapper"> <h1>Sidebar slide</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio nisl, luctus quis feugiat sed, ultrices tincidunt odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac est sit amet mi vestibulum rhoncus. Aenean interdum mi odio, eu tincidunt neque facilisis sed. Vestibulum imperdiet sodales felis, sed posuere leo tempus vitae. Etiam risus enim, bibendum et diam ut, sollicitudin commodo nibh. Sed sed dictum leo. Mauris vitae turpis lectus. Phasellus consequat ante eu enim posuere euismod. Duis semper mollis justo, quis blandit velit ornare ac. Maecenas augue elit, consectetur ac ornare at, pulvinar a leo. Pellentesque malesuada erat eros, at rhoncus diam dapibus eu.</p> <p>Vestibulum vitae semper quam. Morbi laoreet eu tortor vitae lacinia. Suspendisse tempor nunc ac convallis accumsan. Donec sed urna nec leo consequat ultricies non eu nibh. Nam suscipit mauris a metus aliquam lobortis. Vivamus eget elit libero. Nulla elementum ligula vitae vehicula bibendum. Donec tempus blandit magna. Aenean quis libero eget purus egestas molestie eu non lorem. Phasellus a placerat quam, sed hendrerit est. Sed bibendum rutrum libero, sit amet vulputate massa auctor sit amet.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sidenavigation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
body { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 16px; line-height: 1.4em; color: #333; background: #eee;
}
h1 { margin: 0.5em 0 1em 0; font-size: 1.8em; font-weight: 700; color: #00A287;
}
p { margin-bottom: 1em;
}
.animation { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.overlayContainer { position: fixed; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 10;
}
.top { position: relative; width: 100%; height: 40px; color: #222; background: #00A287; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); z-index: 20;
}
.side { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); z-index: 100;
}
.btnSide { position: absolute; top: 0; right: -40px; width: 40px; height: 40px; font-weight: 700; text-align: center; line-height: 40px; color: #333; background: #fff; border-right: solid 1px #eee; cursor: pointer; z-index: 50;
}
.wrapper { width: 80%; padding: 4%; margin: 20px auto; background: #fff;
}
.catalogueList,
.catalogueList p { padding: 0; margin: 0;
}
.catalogueItem { padding: 0 2%; font-weight: 700; line-height: 40px; cursor: pointer;
}
.catalogueSubList { display: none;
}
.catalogueItem:first-child .catalogueSubList { display: block;
}
.catalogueSubItem { padding: 0 5%; font-weight: 400;
}
.catalogueSubItem a { display: block; text-decoration: none; color: #00A287;
}
.catalogueSubItem a:hover { padding-left: 20px;
}

Sidenavigation - Script Codes JS Codes

var $sideContainer = false;
$('.btnSide').click(function(){ if(!$sideContainer) { $sideContainer = true; $('.side').animate({ left: '0' }); $('.overlayContainer').animate({ opacity: '0.8' }); } else { $sideContainer = false; $('.side').animate({ left: '-300px' }); $('.overlayContainer').animate({ opacity: '0' }); }
});
$('.catalogueItem > p').click(function(){ $('.catalogueList > li').find('ul').slideUp(); $(this).parent().find('.catalogueSubList').slideDown();
});
Sidenavigation - Script Codes
Sidenavigation - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 3,421 Kb
Views 14,168
Do you need developer help for Sidenavigation?

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!

Sander (skeurentjes) Script Codes
Name
Sticky widget
Custom input radio buttons
Flexbox layout
Text 3d effct
Card flip
Image clip path mask
Side navigation
Animates search input with only css
Spinning loader
Automatic scroll
Create amazing video scripts 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!