menu style : demo 4

CSS

                        .demo{ background: #36251b; }
                        .navbar{ color: #b9a791; }
                        .navbar .nav-toggle{
                            width: 60px;
                            height: 50px;
                            background: transparent;
                            border: transparent;
                            margin: 25px;
                        }
                        .navbar .nav-toggle span{
                            margin: 0 auto;
                            position: relative;
                        }
                        .navbar .nav-toggle span:before,
                        .navbar .nav-toggle span:after{
                            content: "";
                            position: absolute;
                        }
                        .navbar .nav-toggle span,
                        .navbar .nav-toggle span:before,
                        .navbar .nav-toggle span:after{
                            display: block;
                            width: 30px;
                            height: 6px;
                            background: #b9a791;
                        }
                        .navbar .nav-toggle span:before{
                            margin-top: -12px;
                        }
                        .navbar .nav-toggle span:after{
                            margin-top: 12px;
                        }
                        .navbar .modal{
                            width: 100%;
                            height: 100%;
                            padding: 0.5%;
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 1;
                            overflow: auto;
                        }
                        .navbar .nav-content{
                            width: 100%;
                            height: 98vh;
                            background: #b9a791;
                            padding: 0;
                            margin: auto;
                            position: relative;
                            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
                            -webkit-animation-duration: .3s;
                            animation-duration: .3s;
                            -webkit-animation-fill-mode: both;
                            animation-fill-mode: both;
                            -webkit-animation-name: scale-1;
                            animation-name: scale-1;
                        }
                        .navbar .nav-header{
                            height: 35vh;
                            padding: 2px 16px;
                            background: #b9a791;
                            border-bottom: none;
                        }
                        .navbar .nav-close{
                            font-size: 5em;
                            font-weight: bold;
                            color: #36251b;
                            float: left;
                            opacity: 1;
                        }
                        .navbar .nav-close:hover,
                        .navbar .nav-close:focus{
                            color: #2688b6;
                            text-decoration: none;
                            cursor: pointer;
                        }
                        .navbar .menu{
                            padding: 2px 16px;
                            background: #b9a791;
                        }
                        .navbar .menu ul{
                            width: 100%;
                            text-align: center;
                            clear: both;
                        }
                        .navbar .menu ul li{
                            display: inline-block;
                            font-size: 3em;
                        }
                        .navbar .menu ul li a{
                            font-size: 3vw;
                            font-weight: 700;
                            color: #36251b;
                            letter-spacing: -0.05em;
                            padding: 1em;
                            text-decoration: none;
                            text-transform: uppercase;
                            transition: all 0.3s ease 0s;
                        }
                        .navbar .menu ul li a:hover{
                            text-decoration: none;
                            color: #2688b6;
                        }
                        @-webkit-keyframes scale-1{
                            from{
                                opacity: 0;
                                -webkit-transform: scale3d(.3, .3, .3);
                                transform: scale3d(.3, .3, .3);
                            }
                            50%{
                                opacity: 1;
                            }
                        }
                        @keyframes scale-1{
                            from{
                                opacity: 0;
                                -webkit-transform: scale3d(.3, .3, .3);
                                transform: scale3d(.3, .3, .3);
                            }
                            50%{
                                opacity: 1;
                            }
                        }
                        @media screen and (min-width:768px) and (max-width:979px){
                            .navbar .menu ul{
                                width: 100%;
                                padding: 0;
                                text-align: center;
                                clear: both;
                            }
                            .navbar .menu ul li{
                                display: block;
                            }
                            .navbar .menu ul li a{
                                padding: 0;
                                font-size: 6vw;
                                font-weight: 700;
                                letter-spacing: -0.05em;
                                text-transform: uppercase;
                            }
                        }
                        @media only screen and (max-width:767px){
                            .navbar .menu ul{
                                width: 100%;
                                padding: 0;
                                text-align: center;
                                clear: both;
                            }
                            .navbar .menu ul li{
                                display: block;
                            }
                            .navbar .menu ul li a{
                                padding: 0;
                                font-size: 6vw;
                                font-weight: 700;
                                letter-spacing: -0.05em;
                                text-transform: uppercase;
                            }
                        }
                    

JavaScript

(Menu depend on jQuery.)
                        

                        $(document).ready(function(){
                            var modal = document.getElementById('navigation');
                            var btn = document.getElementsByClassName("nav-toggle")[0];
                            var span = document.getElementsByClassName("nav-close")[0];
                            btn.onclick = function(){
                                modal.style.display = "block";
                            };
                            span.onclick = function(){
                                modal.style.display="none";
                            };
                            window.onclick = function(event){
                                if (event.target == modal){
                                    modal.style.display = "none";
                                }
                            }
                        });
                    
License Terms