JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<menu>
    <div id='cssmenu'>
        <ul>
           <li class='active'><a href='#'><i class="fa fa-home"></i><span>Anasayfa</span></a></li>
           <li><a href='#'><i class="fa fa-book"></i><span>Hakkımızda</span></a></li>
           <li class='has-sub'><a href='#'><i class="fa fa-truck"></i><span>Ürünlerimiz</span></a>
              <ul>
                 <li><a href='#'><span>Sılaj Grubu</span></a></li>
                 <li><a href='#'><span>Yemleme Grubu</span></a></li>
                 <li><a href='#'><span>Gübre Grubu</span></a></li>
                 <li class='last'><a href='#'><span>Çiftlik Ekipmanları</span></a></li>
              </ul>
           </li>
           <li><a href='#'><i class="fa fa-pie-chart"></i><span>Bayi ve Servislerimiz</span></a></li>
           <li><a href='#'><i class="fa fa-newspaper-o"></i><span>Haberler</span></a></li>
           <li class='last'><a href='#'><i class="fa fa-map-marker"></i><span>İletişim</span></a></li>
        </ul>
    </div>
</menu>
<div id="bosluk"></div

CSS

@import "http://fonts.googleapis.com/css?family=PT+Sans:400,700";
menu{
    position:absolute;
    top:100px;
    width:100%;
    padding: 0px;
    margin: 0px;
}
.fixed {
    position:fixed;
    top:0;
}
#bosluk{
    height: 1000px;
}
#cssmenu {
    background: none repeat scroll 0 0 #ed1f24;
    display: block;
    font-family: "PT Sans",sans-serif;
    line-height: 1;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto;
}
#cssmenu ul {
    display: block;
    list-style: outside none none;
    margin: 0 auto;
    padding: 0;
    max-width: 960px;
}
#cssmenu ul:after, #cssmenu:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
#cssmenu ul li {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}
#cssmenu ul li i{
    font-size: 28px;
    margin-right: 8px;
    vertical-align: middle;
}
#cssmenu ul li a {
    box-sizing: border-box;
    display: block;
    margin: 0;
    text-decoration: none;
    transition: color 0.2s ease 0s;
}
#cssmenu ul li ul {
    left: -9999px;
    position: absolute;
    top: auto;
}
#cssmenu ul li ul li {
    background: none repeat scroll 0 0 #ffffff;
    max-height: 0;
    position: absolute;
    transition: max-height 0.4s ease-out 0s;
}
#cssmenu ul li ul li.has-sub:after {
    background: none repeat scroll 0 0 #222222;
    border-radius: 5px;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    right: 15px;
    top: 12px;
    width: 10px;
    z-index: 1;
}
#cssmenu.align-right ul li ul li.has-sub:after {
    left: 15px;
    right: auto;
}
#cssmenu ul li ul li.has-sub:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent transparent #ffffff;
    border-image: none;
    border-style: solid;
    border-width: 3px;
    content: "";
    display: block;
   ...

JavaScript

$(document).ready(function(){
				
    var num = 100; 
    
    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > num) {
            $('menu').addClass('fixed');
        } else {
            $('menu').removeClass('fixed');
        }
    });
        
    $('#cssmenu').prepend('<div id="menu-button">Menu</div>');
    $('#cssmenu #menu-button').on('click', function(){
        var menu = $(this).next('ul');
        if (menu.hasClass('open')){
            menu.removeClass('open');
        }else{
            menu.addClass('open');
        }
    });
});