How to build animated fixed menu with css3 & jquery

Friday 04th, Dec, 2015 | # # #

Fixed menus are a definitive a great ux resource for our website. They look good, and they are also super useful for visitors. Today, I’m showing you how you can create a very simple fixed menu with CSS3 transitions and  some jquery code.

HTML

Copy and Paste this code just after the opening body tag of your html document, or into you header file template.

<div id="menufix">
    <ul class="menu" style="float:left; width:200px;">
    <li style="text-align:left"><a href="#" class="back">< Back to Article</a></li>
    </ul>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Porfolio</a></li>
        <li><a href="#">Top</a></li>
    </ul>
</div>

css code

#menufix{
	background: #333;
	moz-transition: all 1s ease-in-out;
	opacity: 0;
	o-transition: all 1s ease-in-out;
	overflow: auto;
	padding: 20px 20px;
	position: fixed;
	top: 0;
	transition: all 1s ease-in-out;
	webkit-transition: all 1s ease-in-out;
	width: 100%;
}
#menufix .back{
	background-color: #2FC192;
	color: #fff;
	display: block;
	height: 20px;
	margin-top: 10px;
	padding: 10px;
	text-decoration: none;
	width: 200px;
}
#menufix.active_more{
	opacity: 100;
	padding-bottom: 50px;
	padding-top: 50px;
	position: fixed;
	z-index: 1;
}
#menufix.active{
	opacity: 100;
	position: fixed;
	z-index: 1;
}
.menu{
	float: right;
	list-style-type: none;
	padding: 10px 10px;
	text-align: right;
	width: 260px;
}
.menu li{
	display: inline;
}
.menu a{
	color: #fff;
	padding: 0 0 0 10px;
	padding: 10px;
	text-shadow: 1px 1px #5E8BC5;
}

Jquery code

Paste this code before the tag

 <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script>
$(document).ready(function() {
         $window = $(window);
    $(window).scroll(function(){

        if($window.scrollTop() > 100)
            $("#menufix").addClass("active");
        else    
            $("#menufix").removeClass("active");
            
        if($window.scrollTop() > 300)
            $("#menufix").addClass("active_more");
        else    
            $("#menufix").removeClass("active_more");
    });


});
</script>