Animated Icon and Slide Out Menu
Alright... Got a good one to go over today. I looked online for maybe 8 hours it seemed like trying to find a simple way to make an animated icon with slide out menu and it is a task that I just couldn't find exactly what I was looking for. I mean there are hundreds of examples out there. I quit counting, but I couldn't find one code example that was simple clean and without using a jquery library or without a link out library of some kind. Frustrated me so bad, that I got out my thinking cap and wrote this great example for all of you that find my post. To use this example, you don't have to be online. You don't need a code library. You can do this with notepad and a browser! Quick too! Little html, little css, and little javascript. Less code than any working example I seen online. (Sorta like skinny dippin at midnight... Sorta) Straight into action...
html (index.html)
------------------
Make a web page. In between the body tags insert the code. First set has an onclick javascript command in the division attributes. Bar 1, 2, 3 is each line in the "hamburger" animated icon:
<!--
<div class="container" onClick="myFunction(this), openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
* This html code is for the slide out menu. (Note: I omitted code for menu cosmetics to cut down confusion)
<div id="mySidepanel" class="sidepanel">
<br><hr>
<div><p><strong>MENU</strong></p></div><hr>
<a href="#top"> Top</a><hr>
<a href="#"> Home</a><hr>
<a href="#"> About</a><hr>
<a href="#"> Info</a><hr>
<a href="#"> Services</a><hr>
<a href="#"> Contact</a><hr>
<div><p><strong>FEATURES</strong></p></div><hr>
</div>
-->
css (main.css)
-----------------
This is the placement container:
.container {
display: inline-block;
cursor: pointer;
}
* This is for the animated icon:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #FFB117;
margin: 6px 0;
position: relative;
left: 10px;
bottom: 10px;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
* This is for the slide out menu:
.sidepanel {
height: 0; /* NOT HERE - Use javascript */
width: 0; /* NOT HERE - Use javascript */
position: fixed;
z-index: 1;
top: 70px;
left: 0px;
background-color: #FFB917;
overflow-x: scroll;
padding-top: 40px;
transition: 0.3s;
border-top: 8px;
border-left: 0;
border-bottom: 7px;
border-right: 0;
border-color: #808080;
border-style: inset;
}
javascript ( main.js )
-----------------
* This is for changing of the animated icon and activating the slide out menu:
function myFunction(x){
x.classList.toggle("change");
var x = document.getElementById("mySidepanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
* This is for the slide out menu and dimention:
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
document.getElementById("mySidepanel").style.height = "90%";
}
Aaaaaaaand... that is all folks! Simple. You have an html page named index.html. Make a css file and call it: main.css. Make a javascript file and call it: main.js. You will have to make link out tags for the javascript and css file. Place the css link out in the head tags of your html file, and the javascript link out right above the ending body tag.
[tags] *css: <link href="main.css" rel="stylesheet" type="text/css" /> ( In the head tag )
* javascript: <script src="main.js"></script> ( Above the ending body tag )
Until the nextime...
