menu style : demo 1

CSS

                        .demo{ background: #2097ab; }
                        .navbar{
                            height: 100px;
                            border-radius: 0;
                            position: relative;
                        }
                        .navbar.on{
                            display: block;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0, 0, 0, 0.93);
                            position: absolute;
                            top: 0;
                            z-index: 10;
                        }
                        .navbar .nav-toggle{
                            width: 40px;
                            height: 30px;
                            position: absolute;
                            top: 20px;
                            right: 25px;
                            cursor: pointer;
                        }
                        .navbar .first,
                        .navbar .second,
                        .navbar .third{
                            width: 100%;
                            height: 5px;
                            background: #fff;
                            margin: 6px auto;
                            backface-visibility: hidden;
                            -moz-transition-duration: 0.3s;
                            -o-transition-duration: 0.3s;
                            -webkit-transition-duration: 0.3s;
                            transition-duration: 0.3s;
                        }
                        .navbar .nav-toggle.on .first{
                            -moz-transform: rotate(45deg) translate(7px, 7px);
                            -ms-transform: rotate(45deg) translate(7px, 7px);
                            -webkit-transform: rotate(45deg) translate(7px, 7px);
                            transform: rotate(45deg) translate(7px, 7px);
                        }
                        .navbar .nav-toggle.on .second{
                            opacity: 0;
                        }
                        .navbar .nav-toggle.on .third{
                            -moz-transform: rotate(-45deg) translate(8px, -10px);
                            -ms-transform: rotate(-45deg) translate(8px, -10px);
                            -webkit-transform: rotate(-45deg) translate(8px, -10px);
                            transform: rotate(-45deg) translate(8px, -10px);
                        }
                        .navbar .menu{
                            padding: 0;
                            list-style: none;
                            margin: 4em auto;
                            text-align: center;
                        }
                        .navbar .menu.hidden{
                            display: none;
                        }
                        .navbar .menu a{
                            display: block;
                            width: 100%;
                            font-size: 3em;
                            color: #fff;
                            line-height: 1.5;
                            text-decoration: none;
                            text-transform: capitalize;
                            -moz-transition-duration: 0.5s;
                            -o-transition-duration: 0.5s;
                            -webkit-transition-duration: 0.5s;
                            transition-duration: 0.5s;
                        }
                        .navbar .menu a:hover{
                            color: #484848;
                            background-color: #fff;
                        }
                    

JavaScript

(Menu depend on jQuery.)
                        

                        $(document).ready(function(){
                            $(".nav-toggle").on('click', function(){
                                $(this).toggleClass("on");
                                $('.navbar').toggleClass("on");
                                $(".menu").toggleClass('hidden');
                            });
                        });
                    
License Terms