Pure CSS3 Vertical menu with nice hover effect
How do I make an pure css3 vertical menu with nice hover effect?
Vertical menu used font icon and nice hover effect. Thanks CSS3. What is a pure css3 vertical menu with nice hover effect? How do you make a pure css3 vertical menu with nice hover effect? This script and codes were developed by Jitendra on 04 July 2022, Monday.
Pure CSS3 Vertical menu with nice hover effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Vertical menu with nice hover effect</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <UL> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-mobile-phone icon-2x"></i> </div> <a href="#"><span>About Us</span></a> </div> </li> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-lightbulb icon-2x"></i> </div> <a href="#"><span>Ideas</span></a> </div> </li> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-wrench icon-2x"></i> </div> <a href="#"><span>Services</span></a> </div> </li> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-briefcase icon-2x"></i> </div> <a href="#"><span>Marketing</span></a> </div> </li> </UL>
</nav>
</body>
</html>
Pure CSS3 Vertical menu with nice hover effect - Script Codes CSS Codes
ul
{
margin:0px;
padding:0px;
list-style-type:none;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.var_nav
{
position:relative;
background:#ccc;
width:300px;
height:70px;
margin-bottom:5px;
}
.link_bg
{ width:70px; height:70px; position:absolute; background:#E01B6A; color:#fff; z-index:2;
}
.link_bg i
{ position:relative;
}
.link_title
{
position:absolute;
width:100%;
z-index:3;
color:#fff;
}
.link_title:hover .icon
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.var_nav:hover .link_bg
{
width:100%;
background:#E01B6A;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.var_nav:hover a
{
font-weight:bold;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out;
}
.icon
{
position:relative;
width:70px;
height:70px;
text-align:center;
color:#fff;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
float:left;
transition:all .5s ease-in-out;
float:left;
}
.icon i{top:22px;position:relative;}
a{
display:block;
position:absolute;
float:left;
font-family:arial;
color:#fff;
text-decoration:none;
width:100%;
height:70px;
text-align:center;
}
span
{
margin-top:25px;
display:block;
}
Developer | Jitendra |
Username | berdejitendra |
Uploaded | July 04, 2022 |
Rating | 4.5 |
Size | 2,079 Kb |
Views | 66,792 |
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 |
CSS3 Lion | 2,493 Kb |
Two joint circles - One element | 1,704 Kb |
Mail icon - One Element | 1,682 Kb |
Flat Music Player Playlist Mobile UI | 3,164 Kb |
One element - Steve Jobs | 3,550 Kb |
App login screen with CSS3 Animation | 3,145 Kb |
Services table | 2,136 Kb |
Mobile App UI | 3,180 Kb |
Mobile Sub Menu Concept | 2,790 Kb |
Social Icon Animation | 2,507 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 |
Wikipedia API | Coderpilot | 2,802 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Svg sky | Omodev | 7,070 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Double box-shadow | Daubac402 | 1,436 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Factorial | KeithleySLHS | 1,158 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!