<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="menu" > <i class="fa fa-times" aria-hidden="true"></i> <ul class="listg"> <li class="list-item">Ayran</li> <li class="list-item">Çay</li> <li class="list-item">Kahve</li> </ul> </div> <div class="mainClose"> <i class="fa fa-bars" aria-hidden="true"></i> <div class="container-fluid" style="margin-top: 30px"> <div class="jumbotron"> <div class="container"> <h1>Hello, Çay!</h1> <p>Contents ...</p> <p> <a class="btn btn-primary btn-lg">Learn more</a> </p> </div> </div> <div class="jumbotron"> <div class="container"> <h1>Hello, kahve!</h1> <p>Contents ...</p> <p> <a class="btn btn-primary btn-lg">Learn more</a> </p> </div> </div> <div class="jumbotron"> <div class="container"> <h1>Hello, ayran!</h1> <p>Contents ...</p> <p> <a class="btn btn-primary btn-lg">Learn more</a> </p> </div> </div> </div> <script src="https://use.fontawesome.com/6892e344e3.js"></script>

.menu{ width: 0px; transition:all 0.3s; height: 100%; position: fixed; z-index: 1; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; background-color: #673AB7; padding-top: 30px; color:white; } .menu i{ margin:5px 0px; top: 0px; right: 10px; position: absolute; font-size: 30px; } .fa.fa-bars{ margin:5px 0px; right: 10px; font-size: 30px; color:#673AB7; z-index: 1; } .menu li{ list-style: none; font-size: 20px; padding: 5px 0px; font-weight: 600; } .menu li:hover{ background-color: #E91E63; font-size: 25px; } .menu ul{ padding-top: 20px; padding-left: 0px; text-align: center; } .menuOpen{ width: 400px; background-color: #673AB7; transition:all 0.3s; } .menuClose{ background-color: #673AB7; transition:all 0.3s; padding-left: 0px!important; transition:all 0.3s; } .mainOpen{ transition:all 0.3s; margin-left:410px; transition:all 0.3s; } .mainClose{ transition:all 0.3s; margin-left: 5px; transition:all 0.3s; } .jumbotron{ border-radius: 0px; background-color: #673AB7; color:white; } .jumbotron .btn{ border-radius: 0px; padding: 10px 40px; background-color: #E91E63; border:none; }

$(document).ready(function(){ $(".fa-bars").click(function() { $(".menu").removeClass('menuClose'); $(".menu").addClass('menuOpen'); $(".mainClose").addClass('mainOpen'); $(".mainOpen").removeClass('mainClose'); $(".fa-bars").hide(500); $(".fa-times").show(500); }); $(".fa-times").click(function() { $(".menu").addClass('menuClose'); $(".menu").removeClass('menuOpen'); $(".mainOpen").addClass('mainClose'); $(".mainClose").removeClass('mainOpen'); $(".fa-times").hide(500); $(".fa-bars").show(500); }); });