Website sidebar menu with animation
How do I make an website sidebar menu with animation?
Website sidebar menu using plain CSS3.No trickery involved, what you see is what you get.. What is a website sidebar menu with animation? How do you make a website sidebar menu with animation? This script and codes were developed by Wafs on 12 September 2022, Monday.
Website sidebar menu with animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Website sidebar menu with animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="aside"> <div id="logo"> <span class="logotext" id="logotext1">Awesome</span><span class="logotext" id="logotext2">Logo</span><span id="missionstatement">and mission statement</span> </div> <ul> <li><a href="#"><span class="icon">1 </span>Home</a></li> <li><a href="#"><span class="icon">2 </span>Gallery</a></li> <li><a href="#"><span class="icon">3 </span>Browse</a></li> <li><a href="#"><span class="icon">4 </span>Contact</a></li> </ul>
</div>
</body>
</html>
Website sidebar menu with animation - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900,300);
*
{ -moz-transition:all .2s ease-out; -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; -webkit-transition:all .2s ease-out; border:0; margin:0; padding:0; transition:all .2s ease-out;
}
.logotext
{ font-family:Roboto, sans-serif; font-weight:300; text-transform:uppercase;
}
#logotext1
{ border-bottom:2px solid #111; font-size:3em; height:50px; left:10px; position:absolute;
}
#logotext2
{ font-weight:400; left:65px; letter-spacing:1.5em; position:absolute; top:54px;
}
#missionstatement
{ bottom:3px; color:#999; font-style:italic; position:absolute; text-align:center; width:100%;
}
#aside
{ -webkit-box-shadow:2px 0 10px 1px rgba(0,0,0,.4); background-color:#ddd; height:100%; position:fixed; width:250px;
}
#logo
{ height:115px; margin-top:5px; position:relative; width:100%;
}
#aside ul
{ list-style-type:none; position:relative;
}
#aside ul li
{ background-color:#ddd; box-shadow:inset 10px 1px 0 0 #ccc; padding:10px 0; text-align:center; width:100%;
}
ul li a
{ color:#666; font-family:arial; text-decoration:none; text-transform:uppercase; padding : 10px 80px;
}
ul li a .icon
{ -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); font-size:100%; left:-18px; position:absolute; transform:rotate(-45deg);
}
#aside ul li:last-child
{ box-shadow:inset 10px -1px 0 0 #ccc, inset 0 1px 0 0 #ccc;
}
#aside ul li:hover
{ box-shadow:inset 50px 0 0 0 #c4c,inset 1px 0 15px 0 #aaa,inset 0 1px 0 0 #ccc,inset 1px 0 0 0 #ccc; font-weight:700; margin-top:-5px; padding:20px 0;
}
#aside ul li:hover > a > .icon
{ -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); color:#FFF; font-size:150%; left:15px; transform:rotate(0deg);
}
Developer | Wafs |
Username | wafs |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 2,193 Kb |
Views | 32,384 |
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 |
Title follows mouseover menu | 1,940 Kb |
Faux 3d hover blocks in CSS | 1,894 Kb |
Barbara Walters | 2,463 Kb |
Jquery Dynamic background-colours | 4,488 Kb |
A Pen by wafs | 2,545 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 |
React Template | Isac | 1,241 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Speech bubbles | Something | 1,547 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Ghost | Mghayour | 11,738 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Slider | Mohammed-fawzy | 2,634 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!