Side navigation

Developer
Sander
Size
3,043 Kb
Views
8,096
  1. Side navigation Previews
  2. Side navigation HTML Codes
  3. Side navigation CSS Codes
  4. Side navigation JS Codes

How do I make an side navigation?

An hidden side navigation menu wich appears when you get close with the mouse, and dissapears again when your mouse leaves the menu.. What is a side navigation? How do you make a side navigation? This script and codes were developed by Sander on 18 December 2022, Sunday.

Side navigation Previews
IQ Test

Side navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Side navigation</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="sideBar"> <ul class="navigation"> <li><a href="" title="Home">Home<span class="icon iconHome"></span></a></li> <li><a href="" title="Configuration">Configuration<span class="icon iconConfiguration"></span></a></li> <li><a href="" title="Settings">Settings<span class="icon iconSettings"></span></a></li> <li><a href="" title="Contact">Contact<span class="icon iconContact"></span></a></li> <li><a href="" title="Information">Information<span class="icon iconInformation"></span></a></li> </ul>
</div>
<div class="wrapper"> <h1 class="pageTitle">Side navigation</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis orci vel odio vehicula pellentesque. Aenean eget venenatis tortor. In convallis tincidunt lacinia. Suspendisse et magna at nulla dignissim malesuada eu quis urna. Fusce mollis sodales nisl bibendum malesuada. Phasellus eu justo varius, molestie ipsum eu, porttitor dolor. Mauris sem nulla, vehicula eu libero ac, condimentum dictum ligula. Integer ut porttitor dolor. Sed pulvinar ipsum leo. In non tortor blandit, placerat ante non, rutrum velit. Aenean quis vestibulum turpis, a placerat purus. Nam imperdiet ipsum velit, quis volutpat sapien suscipit malesuada. Morbi pellentesque risus sit amet quam tempor dapibus. Ut mattis convallis suscipit. Praesent consequat, turpis at lobortis tincidunt, lectus lectus consectetur nulla, ac aliquet mauris orci ac lorem. Quisque non aliquet odio.</p>
</div>
<div class="posCursor"></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>

Side navigation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600,700);
body { font-family: 'Titillium Web', sans-serif; letter-spacing: 1px; line-height: 1.4em; background: #f0f0f0;
}
.pageTitle { margin-bottom: 0.5em; font-size: 2em; font-weight: 700; line-height: 1em; color: #FF5C00;
}
.wrapper { width: 40%; padding: 5%; margin: 5% auto; background: #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
}
.posCursor { width: 40%; padding: 5%; margin: 5% auto;
}
.sideBar { position: fixed; left: -160px; top: 0; width: 200px; height: 100%; background: #222; border-right: solid 1px #000;
}
.navigation {
}
.navigation li {
}
.navigation li a { position: relative; display: block; padding: 0 5%; text-decoration: none; line-height: 40px; color: #fff;
}
.navigation li a:hover { color: #FF5C00;
}
.icon { position: absolute; right: 0; top: 0; display: blok; width: 40px; height: 40px;
}
.iconHome { background: url('http://www.sanderkeurentjes.nl/icons/white/icon-home.png') no-repeat center center; background-size: 20px auto;
}
.iconConfiguration { background: url('http://www.sanderkeurentjes.nl/icons/white/icon-configuration.png') no-repeat center center; background-size: 20px auto;
}
.iconSettings { background: url('http://www.sanderkeurentjes.nl/icons/white/icon-settings.png') no-repeat center center; background-size: 20px auto;
}
.iconContact { background: url('http://www.sanderkeurentjes.nl/icons/white/icon-contact.png') no-repeat center center; background-size: 20px auto;
}
.iconInformation { background: url('http://www.sanderkeurentjes.nl/icons/white/icon-information.png') no-repeat center center; background-size: 20px auto;
}

Side navigation - Script Codes JS Codes

$(document).mousemove(function(e){ $('.posCursor').html("X Axis : " + e.pageX + " Y Axis : " + e.pageY); var $mouseX = e.pageX if($mouseX <= '40') { openSubNavigation(); }
});
$('.sideBar').mouseleave(function(){ closeSubNavigation();
});
function openSubNavigation() { $('.sideBar').animate({ left: '0px' });
}
function closeSubNavigation() { $('.sideBar').stop(true, true).animate({ left: '-160px' });
}
Side navigation - Script Codes
Side navigation - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 4
Size 3,043 Kb
Views 8,096
Do you need developer help for Side navigation?

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
Flexbox table
Animates search input with only css
Flexbox layout
Custom input radio buttons
Search field
Sidenavigation
Button hover effects
Parallax scrolling background
Card flip
Image gallery with caption
Create amazing marketing copy 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!