menu with round corner

by sanaullah Rais

HTML

<!-- Add this HTML in your website where you want to show Round Corner Menu -->

<nav class="menu-navigation-round">
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">Services</a>
    <a href="#">Reach us</a>
    <a href="#" class="selected">About</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-round.css"/>

 <link rel="stylesheet" href="http://demo.tutorialzine.com/2015/05/4-sweet-responsive-navigation-menus/assets/slicknav/slicknav.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-round');

        menu.slicknav();

        // Mark the clicked item as selected

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

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


</script>