JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<nav>
    <ul>
        <li><a href="#">Anasayfa</a></li>
				<li><a href="#">Tarihçe</a></li>
				<li><a href="#">Yönetim</a></li>
				<li><a href="#">Akedemik Personel<i class="fa fa-sort-asc"></i></a></li>
				<li><a href="#">İdari Personel<i class="fa fa-sort-asc"></i></a></li>
				<li><a href="#">Programlar<i class="fa fa-sort-asc"></i></a></li>
				<li><a href="#">Öğrenci İşleri<i class="fa fa-sort-asc"></i></a></li>
				<li><a href="#">Fotoğraflar</a></li>
				<li><a href="#">İletişim</a></li>
    </ul>
</nav>
<div id="bosluk"></div

CSS

@import url("");
nav{
    background: #167dc5;
    color: #FFF;
    position:absolute;
    top:126px;
    width:100%;
    height:52px;
}
nav ul{
    width: 960px;
    height: 52px;
    margin: 0 auto;
}
nav li{
    float:left;
    font-size:14px;
    font-family: tahoma;
}
nav li a{
    line-height: 52px;
    padding: 14px 20px 0px 20px;
    text-decoration: none;
    color: #fff;
    /*
    -moz-transition: color 0.1s linear;
    -webkit-transition: color 0.1s linear; 
    -o-transition: color 0.1s linear;
    transitions: color 0.1s linear;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    */
}
nav li a:hover{
    color: #167dc5;
}
nav li a i{
    top: 16px;
    margin-left: 6px;
    position: absolute;
    font-size: 15px;
}
.fixed {
    position:fixed;
    top:0;
}
#bosluk{
    height: 1000px;
}

JavaScript

$(document).ready(function(){
				
    var num = 100; 
    
    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > num) {
            $('nav').addClass('fixed');
        } else {
            $('nav').removeClass('fixed');
        }
    });
    
    
    $("nav li a").mouseover(function(){
        $(this).stop().css({
            background:'#fff'
        }).animate({
            paddingBottom:'14px'
        },{
            queue:false,
            duration:800,
            easing: 'easeOutQuint'
        })
    });
    
    $("nav li a").mouseout(function(){           
        $(this).stop().css({
            background:'none'
        }).animate({
            paddingBottom:'-14px'
        },{
            queue:false,
            duration:800,
            easing: 'easeInQuint'
        })
    });
});