Simple Sidebar with Animated Icon
How do I make an simple sidebar with animated icon?
What is a simple sidebar with animated icon? How do you make a simple sidebar with animated icon? This script and codes were developed by Isaac on 30 October 2022, Sunday.
Simple Sidebar with Animated Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Sidebar with Animated Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link type="text/css" rel="stylesheet" media="screen" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"></link>
<div class="sidebar"> <ul> <a href="/home"><li><i class="fa fa-home"></i> <div>Home</div></li></a> <a href="/home"><li><i class="fa fa-home"></i> <div>Home</div></li></a> <a href="/home"><li><i class="fa fa-home"></i> <div>Home</div></li></a> </ul>
</div>
<div class="icon"> <div class="bar"></div> <div class="bar mdl"></div> <div class="bar"></div>
</div>
<div class="content"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Sidebar with Animated Icon - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600);
body{ margin:0px; background:#2c3e50;
}
.sidebar{ transition:200ms all ease-in-out; position:fixed; width:200px; background:rgba(0,0,0,0.22); height:100%; left:-200px; transition:300ms all ease-in-out;
}
.sidebar ul{ margin:0px; padding:0px;
}
.sidebar.out li div{ display:inline-block;
}
.sidebar .fa{ font-size:24px; text-align:center; display:inline-block;
}
.sidebar.thin div{ display:none;
}
.sidebar li{ font-family:'Titillium Web', sans-serif; font-size:24px; text-transform:uppercase; color:#eee; display:block; padding:8px 5px; margin:0; width;100%; text-align:center; text-decoration:none; transition:200ms all ease-in-out;
}
.sidebar li:hover{ color:#111; background:#eee;
}
.icon{ width:50px; height:50px; position:realtive; top:-6px; cursor:pointer; transition:300ms all ease-in-out; margin-left:6px;
}
.sidebar a{ text-decoration:none;
}
.icon .bar{ border-radius:1000px; background:#eee; width:30px; height:3px; margin:0px 2px; position:relative; top:17px; transition:300ms all ease-in-out;
}
.icon .bar:first-child{top:10px;}
.icon .bar:last-child{top:25px;}
.icon.out .bar:first-child{transform:rotate(45deg);top:18px;}
.icon.out .bar:last-child{transform:rotate(-45deg);top:12px;}
.icon.out .bar.mdl{ opacity:0;
}
.icon{ cursor:pointer;
}
.icon.out{ margin-left:85px;
}
.sidebar ul{ margin-top:40px;
}
.sidebar.out{ left:0px;
}
.sidebar.thin{ width:80px;
}
.icon.thin{ margin-left:22px !important;
}
Simple Sidebar with Animated Icon - Script Codes JS Codes
$(function(){ $('.sidebar').addClass('out'); if ($('.sidebar').is('.out')){ $('.icon').addClass('out'); }
});
$(document).ready(function(){ $('.icon').click(function(){ $(this).toggleClass('out'); $('.sidebar').toggleClass('out'); });
});
$(function(){
if ($(window).width() < 1024) { $('.sidebar').toggleClass('thin'); $('.icon').toggleClass('thin');
}
});
Developer | Isaac |
Username | graphiteisaac |
Uploaded | October 30, 2022 |
Rating | 3 |
Size | 2,405 Kb |
Views | 18,216 |
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!
Name | Size |
Enjin friendly top section design | 3,264 Kb |
Cursed Realm Footer | 2,044 Kb |
Enjin design center navbar | 2,429 Kb |
ImpactMC Network Footer | 2,561 Kb |
Gallifrey-Craft Mockup | 1,965 Kb |
Fully responsive top section design | 2,343 Kb |
Simple Sidebar with Animated Icon | 2,405 Kb |
A simple yet functional navbar | 2,237 Kb |
Mineplex-ish navbar | 2,742 Kb |
Television Screen in CSS3 | 1,754 Kb |
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!
Name | Username | Size |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Video mute | Leon9208 | 2,131 Kb |
Svg sky | Omodev | 7,070 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Css or Czz.. | Judag | 4,111 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!