javascript - Bootstrap - how to make vertical sidebar with fixed width/not scrollable but still responsive? -
i new bootstrap , trying figure out how could:
- have vertical sidebar fixed width, doesnt scroll content still responsive(if screen width small, become top bar hamburger menu used to)
- have main content div take 100% of remaining width(minus sidebar fixed width)
here have far(codes found somewhere accomplish want, sidebar scroll content , content div doesnt take 100% remamining width):
imports:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <link rel="stylesheet" type="text/css" href="scripts/css/bootstrap.css" /> <script type="text/javascript" src="scripts/js/bootstrap.min.js"></script> js
<script type="text/javascript"> $(document).ready(function () { $('[data-toggle=offcanvas]').click(function () { $('.row-offcanvas').toggleclass('active'); }); }); </script> css:
body { padding-top: 51px; } .text-center { padding-top: 20px; } .col-xs-12 { background-color: #fff; } #sidebar { height: 100%; padding-right: 0; padding-top: 20px; } #sidebar .nav { width: 95%; } #sidebar li { border:0 #f2f2f2 solid; border-bottom-width:1px; } @media screen , (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; transition: 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -41.6%; } .row-offcanvas-left .sidebar-offcanvas { left: -41.6%; } .row-offcanvas-right.active { right: 41.6%; } .row-offcanvas-left.active { left: 41.6%; } .sidebar-offcanvas { position: absolute; top: 0; width: 41.6%; } #sidebar { padding-top:0; } } .fixed { width: 200px; float: left; } html:
<body> <div class="page-container"> <!-- top navbar --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> </div> </div> </div> <div class="container-fluid"> <div class="row row-offcanvas row-offcanvas-left"> <!-- sidebar --> <div class="col-xs-6 col-sm-3 sidebar-offcanvas fixed" id="sidebar" role="navigation"> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </div> <!-- main area --> <div class="col-xs-12 col-sm-9" style="background-color: blue;"> <h1>shrink width collapse sidebar</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus in nisi eu arcu tempus vehicula. nulla faucibus cursus metus in sagittis. nunc elit leo, imperdiet in ligula in, euismod varius est. aenean pellentesque lorem porttitor placerat. vestibulum placerat nunc ac rutrum fringilla. donec arcu leo, tempus adipiscing volutpat id, congue in purus. pellentesque scelerisque mattis nibh vel semper. sed risus purus. fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, euismod diam metus eu enim. nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. nam neque tellus, tristique in est vel, sagittis congue turpis. aliquam nulla lacus, laoreet dapibus odio vitae, posuere volutpat magna. nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim eleifend. integer sit amet ante auctor, lacinia sem quis, consectetur nulla. </p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus in nisi eu arcu tempus vehicula. nulla faucibus cursus metus in sagittis. nunc elit leo, imperdiet in ligula in, euismod varius est. aenean pellentesque lorem porttitor placerat. vestibulum placerat nunc ac rutrum fringilla. donec arcu leo, tempus adipiscing volutpat id, congue in purus. pellentesque scelerisque mattis nibh vel semper. sed risus purus. fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, euismod diam metus eu enim. nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. nam neque tellus, tristique in est vel, sagittis congue turpis. aliquam nulla lacus, laoreet dapibus odio vitae, posuere volutpat magna. nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim eleifend. integer sit amet ante auctor, lacinia sem quis, consectetur nulla. </p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus in nisi eu arcu tempus vehicula. nulla faucibus cursus metus in sagittis. nunc elit leo, imperdiet in ligula in, euismod varius est. aenean pellentesque lorem porttitor placerat. vestibulum placerat nunc ac rutrum fringilla. donec arcu leo, tempus adipiscing volutpat id, congue in purus. pellentesque scelerisque mattis nibh vel semper. sed risus purus. fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, euismod diam metus eu enim. nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. nam neque tellus, tristique in est vel, sagittis congue turpis. aliquam nulla lacus, laoreet dapibus odio vitae, posuere volutpat magna. nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim eleifend. integer sit amet ante auctor, lacinia sem quis, consectetur nulla. </p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus in nisi eu arcu tempus vehicula. nulla faucibus cursus metus in sagittis. nunc elit leo, imperdiet in ligula in, euismod varius est. aenean pellentesque lorem porttitor placerat. vestibulum placerat nunc ac rutrum fringilla. donec arcu leo, tempus adipiscing volutpat id, congue in purus. pellentesque scelerisque mattis nibh vel semper. sed risus purus. fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, euismod diam metus eu enim. nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. nam neque tellus, tristique in est vel, sagittis congue turpis. aliquam nulla lacus, laoreet dapibus odio vitae, posuere volutpat magna. nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim eleifend. integer sit amet ante auctor, lacinia sem quis, consectetur nulla. </p> <p> vestibulum porttitor massa eget pellentesque eleifend. suspendisse tempor, nisi eu placerat auctor, est erat tempus neque, pellentesque venenatis eros lorem vel quam. nulla luctus malesuada porttitor. fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. quisque facilisis risus in lacus sagittis malesuada. suspendisse non purus diam. nunc commodo felis sit amet tortor adipiscing varius. fusce commodo nulla quis fermentum hendrerit. donec vulputate, tellus sed venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem. </p> <p> vestibulum porttitor massa eget pellentesque eleifend. suspendisse tempor, nisi eu placerat auctor, est erat tempus neque, pellentesque venenatis eros lorem vel quam. nulla luctus malesuada porttitor. fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. quisque facilisis risus in lacus sagittis malesuada. suspendisse non purus diam. nunc commodo felis sit amet tortor adipiscing varius. fusce commodo nulla quis fermentum hendrerit. donec vulputate, tellus sed venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem. </p> <p> vestibulum porttitor massa eget pellentesque eleifend. suspendisse tempor, nisi eu placerat auctor, est erat tempus neque, pellentesque venenatis eros lorem vel quam. nulla luctus malesuada porttitor. fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. quisque facilisis risus in lacus sagittis malesuada. suspendisse non purus diam. nunc commodo felis sit amet tortor adipiscing varius. fusce commodo nulla quis fermentum hendrerit. donec vulputate, tellus sed venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem. </p> <p> fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. aenean velit ipsum, vestibulum nec tincidunt eu, lobortis vitae erat. nullam ultricies fringilla ultricies. sed euismod nibh quis tincidunt dapibus. nulla quam velit, porta sit amet felis eu, auctor fringilla elit. donec convallis tincidunt nibh, quis pellentesque sapien condimentum a. phasellus purus dui, rhoncus id suscipit id, ornare et sem. duis aliquet posuere arcu ornare. pellentesque consequat libero id massa accumsan volutpat. fusce hendrerit lacus. nam elementum ac eros eu porttitor. phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. in volutpat scelerisque quam, nec lacinia libero. </p> <p> aliquam lacinia orci, iaculis porttitor neque. nullam cursus dolor tempus mauris posuere, eu scelerisque sem tincidunt. praesent blandit sapien @ sem pulvinar, vel egestas orci varius. praesent vitae purus @ ante aliquet luctus vel quis nibh. mauris id nulla vitae est lacinia rhoncus vel justo. donec iaculis quis sapien vel molestie. aliquam sed elementum orci. vestibulum tristique tempor risus et malesuada. sed eget ligula sed quam placerat dapibus. integer accumsan ac massa @ tempus. </p> <p> vestibulum porttitor massa eget pellentesque eleifend. suspendisse tempor, nisi eu placerat auctor, est erat tempus neque, pellentesque venenatis eros lorem vel quam. nulla luctus malesuada porttitor. fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. quisque facilisis risus in lacus sagittis malesuada. suspendisse non purus diam. nunc commodo felis sit amet tortor adipiscing varius. fusce commodo nulla quis fermentum hendrerit. donec vulputate, tellus sed venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem. </p> <p> fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. aenean velit ipsum, vestibulum nec tincidunt eu, lobortis vitae erat. nullam ultricies fringilla ultricies. sed euismod nibh quis tincidunt dapibus. nulla quam velit, porta sit amet felis eu, auctor fringilla elit. donec convallis tincidunt nibh, quis pellentesque sapien condimentum a. phasellus purus dui, rhoncus id suscipit id, ornare et sem. duis aliquet posuere arcu ornare. pellentesque consequat libero id massa accumsan volutpat. fusce hendrerit lacus. nam elementum ac eros eu porttitor. phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. in volutpat scelerisque quam, nec lacinia libero. </p> <p> aliquam lacinia orci, iaculis porttitor neque. nullam cursus dolor tempus mauris posuere, eu scelerisque sem tincidunt. praesent blandit sapien @ sem pulvinar, vel egestas orci varius. praesent vitae purus @ ante aliquet luctus vel quis nibh. mauris id nulla vitae est lacinia rhoncus vel justo. donec iaculis quis sapien vel molestie. aliquam sed elementum orci. vestibulum tristique tempor risus et malesuada. sed eget ligula sed quam placerat dapibus. integer accumsan ac massa @ tempus. </p> <p> vestibulum porttitor massa eget pellentesque eleifend. suspendisse tempor, nisi eu placerat auctor, est erat tempus neque, pellentesque venenatis eros lorem vel quam. nulla luctus malesuada porttitor. fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. quisque facilisis risus in lacus sagittis malesuada. suspendisse non purus diam. nunc commodo felis sit amet tortor adipiscing varius. fusce commodo nulla quis fermentum hendrerit. donec vulputate, tellus sed venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem. </p> <p> fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. aenean velit ipsum, vestibulum nec tincidunt eu, lobortis vitae erat. nullam ultricies fringilla ultricies. sed euismod nibh quis tincidunt dapibus. nulla quam velit, porta sit amet felis eu, auctor fringilla elit. donec convallis tincidunt nibh, quis pellentesque sapien condimentum a. phasellus purus dui, rhoncus id suscipit id, ornare et sem. duis aliquet posuere arcu ornare. pellentesque consequat libero id massa accumsan volutpat. fusce hendrerit lacus. nam elementum ac eros eu porttitor. phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. in volutpat scelerisque quam, nec lacinia libero. </p> <p> aliquam lacinia orci, iaculis porttitor neque. nullam cursus dolor tempus mauris posuere, eu scelerisque sem tincidunt. praesent blandit sapien @ sem pulvinar, vel egestas orci varius. praesent vitae purus @ ante aliquet luctus vel quis nibh. mauris id nulla vitae est lacinia rhoncus vel justo. donec iaculis quis sapien vel molestie. aliquam sed elementum orci. vestibulum tristique tempor risus et malesuada. sed eget ligula sed quam placerat dapibus. integer accumsan ac massa @ tempus. </p> </div> </div> </div> </div> </body> thanks in advance!
i have working menu stuck left content 100% of rest of pages width. this;
sidebar postion fixed
step one
change - <div class="col-xs-6 col-sm-3 sidebar-offcanvas fixed" id="sidebar" role="navigation"> - <div class="col-xs-6 col-sm-3 sidebar-offcanvas fixedside" id="sidebar" role="navigation">
step two
add following css @ bottom of css -
.fixedside { position: fixed; top: 75px; left: 0px; bottom: 0px; right: 0px; } step 3
remove following current css;
.fixed { width: 200px; float: left; } content 100%
step 1
add content fix class <div class="col-xs-12 col-sm-9" style="background-color: blue;">
step 2
add following css;
.contentfix { margin-left: 20%; width: 100%; } @media screen , (max-width: 767px) { .contentfix { margin-left: 0%; } }
Comments
Post a Comment