CSS3 Minimalistic Navigation Menu Using CSS3 Transition

Author
In CSS Tutorial, Navigation Sep 9, 2015
CSS3 Minimalistic Navigation Menu

The Minimalistic Menu is another great example of minimum uses of Website page space. These CSS3 Minimalistic Navigation Menu not only best for the less used off-site area also give awesome looking CSS3 Animations effect. In the previous tutorial, I introduced CSS3 Navigation Overlay which work with one button but this Minimalistic Navigation work as an iconic menu, and when the user hovers the menu, it will show the menu text.

The CSS3 animations are very powerful tool, which allows you to create animated menus, slider, tabs and much more without using any javascript. What is, even more, better thing, in next generation of browsers will have more powerful tools like 3D transformation.

At this moment, only three browsers fully support the CSS3 animations, and they have the ability to animate CSS3 properties. These browsers are Safari, Opera, and Chrome which together take only small part of the browser market.

Today, I design CSS3 Navigation Menu which is minimalistic, unique in design, excellent in look and feels and fully animated. This navigation created by using the only CSS3 that can be applied to any website and it’s very flexible. I am pretty sure that this kind of menu will outstand your site look.

CSS3 Minimalistic Navigation Menu HTML Markup

The menu organized as a unordered list ul, li which most used and best practice for navigation. It provides you an easy way to style the menus links and semantically correct. Remember that we make three different variations for these lists which called Left, Right, and Horizontal Minimalistic Menu.

<ul id="MiniLeftNav">
    <li>
        <a class="navtext" href="#"><i class="fa fa-home fa-2x"></i> <span>Home</span></a>
    </li>
    <li>
        <a class="navtext" href="#"><i class="fa fa-cab fa-2x"></i> 
            <span>Services</span>
        </a>
    </li>
    <li>
         <a class="navtext" href="#"><i class="fa fa-briefcase fa-2x"></i> 
            <span>Products</span>
         </a>
    </li>
    <li>
        <a class="navtext" href="#"><i class="fa fa-photo fa-2x"></i> 
            <span>Gallery</span>
        </a>
    </li>
    <li>
        <a class="navtext" href="#"><i class="fa fa-envelope fa-2x"></i> 
            <span>Contact us</span>
        </a>
    </li>
</ul>

Inside each li we have a hyperlink with a span and i inside it. By default these spans are hidden, and are only shown when you hover the link. As for as is used for different icon for each link. The icons are used from Font Awesome

CSS3 Minimalistic Navigation Menu Styling

Our basic HTML structure is ready and now we move to creating awesome CSS3 effect and styling. This will work on browsers which don’t support CSS3 transition animations effects. Also menu even perfectly usable in browsers as old as IE6 or IE7.

For the styling of the body background, I first supplied a background color, which acts as a fallback, and then added two CSS3 radial gradients (for Firefox and Chrome/Safari respectfully) as background images. If the visitor’s browser does not support gradients, it will just ignore the rules and go with the background color.

I first apply some basic styling for Li and hyperlink. I set some width for icon menu and add border style to make them look good.

#MiniLeftNav li{
	list-style: outside none none;
    margin: 20px 0;
    padding: 0;
    width: 48px;
}
#MiniLeftNav li a{
    border:solid 1px #fff;
	display: block;
    padding: 7px;
    position: relative;
}

Next i will go and play with span property which need to make hidden by using overflow: hidden; and add position: absolute;. I also added some style like font-size etc. Another most important thing that we need to add CSS3 Transition so it should open with nice effect when hovering.

#MiniLeftNav span {
	font-family: 'Raleway', sans-serif;
	font-size:14px;
    font-weight: 400;
    letter-spacing: 1px;
	text-transform: uppercase;
	
    bottom: 0;
    left: 47px;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 0;
    
    /* CSS3 Transition: */
	-webkit-transition: 0.50s;

	/* Future proofing (these do not work yet): */
	-moz-transition: 0.50s;
	transition: 0.50s;
    
}
#MiniLeftNav a:hover span{ width:auto; padding:0 30px;overflow:visible; }
#MiniLeftNav a:hover{text-decoration:none;}
#MiniLeftNav a span{
	background-color:#fff;
	color:#3d4f0c;
}

The CSS3 transition is very powerful property. it allows you to animate the changes that occur on an element when a pseudo properties take effect. like when the user hovers the mouse on the menu link, the :hover pseudo-property takes effect, showing the span Slide Hover Effect which is otherwise hidden.

If we don’t define transition property, then the menu still show, but it doesn’t have any effect which didn’t look impressive. Here we are telling the browser, which the duration of the animation is 500 milliseconds.You can optionally specify a list of specific properties to be animated instead of all of them.

Make sure that the width should be auto on standard or hovering states. On hover, we just need to make overflow:visible

In the last part of the styling, we specify three different types of CSS3 Minimalistic Navigation Menu which included in demo and download zip file. Hope you like this creation and lets us know What do you think? How would you improve this navigation menu?

Leave a Reply

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