Simple Sidebar with Animated Icon

Developer
Isaac
Size
2,405 Kb
Views
18,216
  1. Simple Sidebar with Animated Icon Previews
  2. Simple Sidebar with Animated Icon HTML Codes
  3. Simple Sidebar with Animated Icon CSS Codes
  4. Simple Sidebar with Animated Icon JS Codes

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 Previews
IQ Test

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');
}
});
Simple Sidebar with Animated Icon - Script Codes
Simple Sidebar with Animated Icon - Script Codes
Home Page Home
Developer Isaac
Username graphiteisaac
Uploaded October 30, 2022
Rating 3
Size 2,405 Kb
Views 18,216
Do you need developer help for Simple Sidebar with Animated Icon?

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!

Isaac (graphiteisaac) Script Codes
Name
Enjin friendly top section design
CCrama Inspired
Theme Examples 1
Fully responsive top section design
Gallifrey-Craft Mockup
Enjin design center navbar
Creative Grenade Navbar
Gallifrey-Craft Navbar
Cursed Realm Footer
A simple yet functional navbar
Create amazing love letters 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!