Colorful Navigation With Dark Icon

by sanaullah Rais

HTML

<!-- Add this HTML in your website where you want to show Colorful Navigation With Icons -->

<nav class="menu-navigation-dark">
    <a href="#"><i class="fa fa-camera-retro"></i><span>Pictures</span></a>
    <a href="#"><i class="fa fa-code"></i><span>Code</span></a>
    <a href="#" class="selected"><i class="fa fa-comment"></i><span>Talks</span></a>
    <a href="#"><i class="fa fa-plane"></i><span>Travel</span></a>
    <a href="#"><i class="fa fa-heart"></i><span>Favorites</span></a>
</nav>

CSS

<!-- Add this hosted CSS above </head> in your website or custom download source code -->

 <link rel="stylesheet" href="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/navigation-dark.css">

 <link rel="stylesheet" href="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/slicknav/slicknav.min.css">

<!-- MaxCDN Bootstrap Icon to show in menu -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

JavaScript

<!-- Add this javascript above </body> in your website -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/slicknav/jquery.slicknav.min.js"></script>

<script>

    $(function(){

        var menu = $('.menu-navigation-dark');

        menu.slicknav();

        // Mark the clicked item as selected

        menu.on('click', 'a', function(){
            var a = $(this);

            a.siblings().removeClass('selected');
            a.addClass('selected');
        });
    });

</script>