<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <header class=""> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1> Mahmutun Gözyaşları</h1> <hr> </div> </div> </div> </header> <div class="container"> <div class="row"> <aside class="leftside col-lg-3 col-md-3 col-sm-4 col-xs-12"> <button class="btn visible-xs-block btn-raised btn-default btn-block" type="button" data-toggle="collapse" data-target="#mobilkat" aria-expanded="false" aria-controls="mobilkat"> Kategorileri Göster </button> <div class="collapse navbar-collapse" id="mobilkat"> <ul class="nav navbar-nav navbar-dikey"> <li><a href="#">Link</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </aside> <main class="content col-lg-9 col-md-9 col-sm-8 col-xs-12"> content </main> </div> </div>

.leftside { background-color:#F4F4F4; padding:0; height:100vh; } .leftside .collapse { padding:0;} .nav.navbar-nav.navbar-dikey { display: block; float: none; width: 100%; } .nav.navbar-nav.navbar-dikey > li { display: block; float: none; width: 100%; } .nav.navbar-nav.navbar-dikey > li > a { display: block; float: none; width: 100%; color:#3F3F3F; } @media only screen and (min-width : 768px) { .nav.navbar-nav.navbar-dikey li.open .dropdown-menu { box-shadow: 10px 3px 12px 0 rgba(0, 0, 0, 0.26); left: 100%; top: 0; -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); opacity:1; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; display:block; z-index:99; width:auto; } .nav.navbar-nav.navbar-dikey li .dropdown-menu { -moz-transform: translateX(-100px); -webkit-transform: translateX(-100px); -o-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); opacity:0; display:block; left:100%; top:0; z-index:-10; width:0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } } .nav.navbar-nav.navbar-dikey .dropdown-menu > li > a { padding: 10px 24px; } .nav.navbar-nav.navbar-dikey > li > a .caret { border-width: 6px; display: block; float: right; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 5px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .nav.navbar-nav.navbar-dikey > li.open > a .caret { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }