CSS3 Animated Navigation Menu With Dropdown

Author
In CSS Tutorial, Navigation Aug 19, 2015
CSS3 Animated Navigation Menu

In this quick tutorial, we can be growing a CSS3 Animated Navigation Menu using simplest CSS3. These menus work well on all kind of browsers with awesome simple effect. To implement this navigation is pretty easy. Having Easy to used navigation is important for any website. By using CSS3, you can transform boring old HTML means into good looking animated navigation menu. These menus are very useful when you are making the flat web design. We used unique eye catching color.

This Animated Navigation also supports drop-down menus using only HTML and CSS. Many navigation menus have created the usage of an aggregate of HTML, CSS, and Javascript. This simple CSS only approach will exhibit that Javascript isn’t always essential!

The code of Animated Navigation Menu, we will create includes handiest the most relevant CSS required for the structure and simple styling. It a great deal less difficult to observe and recognize the motive of every line of code. It additionally manner that gives up product is primed and prepared to your particular customization.

As for as animation concern, we created the ease-in effect with slow down its timer but you can add your own effect. We already write an article about CSS Hover Effect.

CSS3 Animated Navigation Menu HTML

Each object of the main menu is a toddler of the topmost unordered listing. Internal it’s far a hyperlink and every other un-ordered list, in order to be displayed as a drop down on hover.

<nav class="animatedNav"> <ul> <li> <a href="#">Home</a> <ul> <li><a href="#">Dropdown Menu One</a></li> <li><a href="#">Dropdown Menu Two</a></li> <li><a href="#">Dropdown Menu Three</a></li> </ul> </li> </ul> </nav> 

CSS3 Animated Navigation Menu Style

As you spot within the HTML fragment above, we have unordered lists nested within the fundamental ul, so we must write our CSS with caution. We don’t want the styling of the top UL to cascade into the descendants. Fortuitously, this is precisely what the CSS toddler selector ‘>’ is for:

The class .animatedNav is only used to set the background color so it should be full with color bar. As for as .animatedNav > ul we need to limits the width and margin declarations to simplest the primary unordered listing.

.animatedNav { /* Add background only if you want full-width navigation color bar */ background: #00c08b none repeat scroll 0 0; height: 52px; } .animatedNav > ul{ margin:0 auto; width:710px; } 

We’re placing a float: left; show value in order that the list items are proven in a single line, and we’re assigning a relative role in order that we are able to offset the dropdowns efficaciously. We also added CSS3 Animated -webkit-transition: all 0.3s ease-in; but you can add CSS3 Navigation Slide Hover Effect if you like. The anchor elements will have only basic stuff like font-family and color etc.

.animatedNav > ul > li{ background-color:#00c08b; float: left; cursor: pointer; list-style-type: none; padding: 15px 25px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; position:relative; } .animatedNav > ul > li > a{ font-family: 'Raleway', sans-serif; color:inherit; text-decoration:none; font-size:18px; color:#fff; } 

Now let’s move on with dropdowns menus. Here we can be defining a CSS3 transition animation. We can be setting a maximum peak of zero px, as a way to hide the dropdown. On hover, we will animate the maximum top to a larger price, so as to reason the list to be regularly discovered:

.animatedNav li ul{ position:absolute; list-style:none; text-align:center; width:250px; left:50%; margin-left:-90px; top:32px; /* This is important for the show/hide CSS animation */ max-height:0px; overflow:hidden; -webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; } 

The The max-height:300px; value is unfair and you’ll have to increase it if your drop down list incorporates a whole lot of values which do no longer fit. Sadly there may be no css-only way to detect the peak, so we must difficult code it.

.animatedNav li:hover ul{ max-height:300px; /* Increase when adding more dropdown items */ } 

The next and last step is to style the actual dropdown items:

.animatedNav li ul li{ background-color:#00c08b; } .animatedNav li ul li a{ padding:12px; color:#fff; text-decoration:none; display:block; } .animatedNav li ul li:hover{ background-color:#05936c; } .animatedNav li ul li:first-child{ border-radius:3px 3px 0 0; margin-top:25px; position:relative; } .animatedNav li ul li:first-child:before{ /* the pointer tip */ content:''; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#00c08b; left:50%; top:-10px; margin-left:-5px; } .animatedNav li ul li:last-child{ border-bottom-left-radius:3px; border-bottom-right-radius:3px; } 

If you like our this tutorial called CSS3 Animated Navigation, please leave a comment and let’s know about it. You can also leave your comments if you need any help. We will try our best to provide you the best solution.

Leave a Reply

Your email address will not be published. Required fields are marked *