How to Build CSS3 Creative Navigation Menus with Hover Effect

Author
In CSS Tutorial, Navigation Nov 13, 2015
Creative Navigation

In this short tutorial, we’d like to share CSS3 Creative Navigation with you. The idea to create simple menus and then animate them by using modern effect. In the example, we are using hover transitions, but you could also add these effects on click or as an initial animation. With CSS3 we will transform boring HTML menus into good-looking Creative Navigation.

Please note that pseudo-element transitions might doesn’t work in each browser. Best viewed in Chrome and Firefox.

Creative Navigation is list of links and it needs standard HTML as a base. In our examples we will build the CSS3 Navigation Menu from a standard HTML list. In most cases the HTML is simply a nav with some links:

<section class="color-red">
<nav class="creativenav_SF">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Sigup</a>
</nav>
</section>

But for 3D effects we might use a data-title attribute in span for repeating the link text in the pseudo-element:

<section class="color-pink">
<nav class="creativenav_3D">
<ul>
<li><a href="#"><span data-title="silent">silent</span></a></li>
<li><a href="#"><span data-title="Efficiency">Efficiency</span></a></li>
<li><a href="#"><span data-title="travel">travel</span></a></li>
<li><a href="#"><span data-title="agency">agency</span></a></li>
<li><a href="#"><span data-title="online">online</span></a></li>
</ul>
</nav>
</section>

An example for an effect of Creative CSS3 Navigation is the following style. Firs of all we need to style the links by adding font-size, padding and color etc and than on-hover, we added the background color. Next we will positions a pseudo-element ::after and add it’s position: absolute; plus we added transition for animations and scaling the element.

/* Effect 1: Bottom Line*/
.creativenav_SF a {
font-size: 18px;
padding: 20px 50px;
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
.creativenav_SF a:hover,
.creativenav_SF a:focus {
outline: none;
background:#b82e20;
}
.creativenav_SF a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: rgba(0,0,0,0.1);
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
.creativenav_SF a:hover::after,
.creativenav_SF a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}

We hope this collection gives you some more inspiration for creating CSS3 Creative Navigation. If you like it, please share it with your friends so they may also add it into their next upcoming projects. If you are looking for more effects, you can buy Ayan. CSS3 Link Hover Effects that have more than 17 different hover effects.

Leave a Reply

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