For animated drop down menu

Developer
Tingyu
Size
1,828 Kb
Views
34,408
  1. For animated drop down menu Previews
  2. For animated drop down menu HTML Codes
  3. For animated drop down menu CSS Codes

How do I make an for animated drop down menu?

Using max-height and transition to make drop down menu animated. What is a for animated drop down menu? How do you make a for animated drop down menu? This script and codes were developed by Tingyu on 13 September 2022, Tuesday.

For animated drop down menu Previews
IQ Test

For animated drop down menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>For animated drop down menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="navigation">
<ul class="main"> <li><a href="#">Home</a></li> <li><a href="#">GAMING</a> <div class="sub"> <ul> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> </ul> </div> </li> <li><a href="#">LIQUOR</a> <ul class="sub"> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> </ul> </li> <li><a href="#">CASINO</a> <ul class="sub"> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> </ul> </li> <li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>

For animated drop down menu - Script Codes CSS Codes

.navigation{ width:700px; margin:0 auto;
}
a{ text-decoration:none; color:red; padding:5px;
}
ul{ list-style:none;
}
.main{ height:0px;
}
.main li{ float:left; border:1px solid #000; margin: 0 10px;
}
.main li a{ display:block;
}
.main .sub{ position:absolute; overflow:hidden; margin-left:-48px; max-height:0px; transition:max-height 0.4s ease;
}
.main .sub li{ float:none;
}
.main .sub li a{ display:block; background:#1c3947; color:#fff;
}
.main .sub{
}
.main li a:hover{ background:#fff; color:#000;
}
.main li:hover > .sub{ max-height:200px; transition:max-height 1s ease 0.3s;
}
For animated drop down menu - Script Codes
For animated drop down menu - Script Codes
Home Page Home
Developer Tingyu
Username TingChe
Uploaded September 13, 2022
Rating 3
Size 1,828 Kb
Views 34,408
Do you need developer help for For animated drop down menu?

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!

Tingyu (TingChe) Script Codes
Name
Implement Flip effect with css3
A Pen by Tingyu
Play with Raphael.js
Play around velocity js
Chart with Chart.js
Using MixItUp plugin
Animation - moving from bottom
Responsive mansory layout
Mixitup and jPages
Translate Overlay hover effect
Create amazing art & images 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!