Bootstrap Snippet Vertical Affix Menu [CSS only] using HTML CSS Bootstrap

"Vertical Affix Menu [CSS only] "
Bootstrap 3.1.0 Snippet by iosdsv

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row affix-row">
    <div class="col-sm-3 col-md-2 affix-sidebar">
        <div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <span class="visible-xs navbar-brand">Sidebar menu</span>
    </div>
    <div class="navbar-collapse collapse sidebar-navbar-collapse">
      <ul class="nav navbar-nav" id="sidenav01">
        <li class="active">
          <a href="#" data-toggle="collapse" data-target="#toggleDemo0" data-parent="#sidenav01" class="collapsed">
          <h4>
          Control Panel
          <br>
          <small>IOSDSV <span class="caret"></span></small>
          </h4>
          </a>
          <div class="collapse" id="toggleDemo0" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#">ProfileSubMenu1</a></li>
              <li><a href="#">ProfileSubMenu2</a></li>
              <li><a href="#">ProfileSubMenu3</a></li>
            </ul>
          </div>
        </li>
        <li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* make sidebar nav vertical */ 
@media (min-width: 768px){
  .affix-content .container {
    width: 700px;
  }   
  html,body{
    background-color: #f8f8f8;
    height: 100%;
    overflow: hidden;
  }
    .affix-content .container .page-header{
    margin-top: 0;
  }
  .sidebar-nav{
        position:fixed; 
        width:100%;
  }
  .affix-sidebar{
    padding-right:0; 
    font-size:small;
    padding-left: 0;
  }  
  .affix-row, .affix-container, .affix-content{
    height: 100%;
    margin-left: 0;
    margin-right: 0;    
  } 
  .affix-content{
    background-color:white; 
  } 
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar{
    border-radius:0; 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

How can I add another submenu and where does the id = toggleDemo2 come from?

What is it linked with?

jeanpiloso8 () - 4 years ago - Reply 0

Sidebar doesn't scroll vertically

tivewsalaeharad () - 5 years ago - Reply 0

Thanks for your contribution, but there seems to be an issue with the sidebar-nav and the correct display of toggles (arrows) and the badge (number). The sidebar has 100% width and stretches across the whole browser window! Since the arrows/badge are pulled to the right side, they are underneath the main content area. Good for mobile and small screens, but not correct for normal display widths.
Can this be fixed?

pepperstreet () - 10 years ago - Reply 0

hmm, I had the same issue here, couldn't fix it and keep that f***** menu fixed; so I had to change the sidebar-nav position from Fixed to relative, now it displays the toggles and badges, Hope that helps

.sidebar-nav{
position:relative;
width: 100%;
border-right: 4px solid #aaa;
}

Sid3r () - 9 years ago - Reply 0

Thanks..., but the actual idea is to have the sticky effect.

pepperstreet () - 9 years ago - Reply 0

Keep the collapsed menu fixed

just add navbar-fixed-top
<div class="navbar navbar-default navbar-fixed-top" role="navigation">

student3000 () - 9 years ago - Reply 0

Hi, I want to know how I charge the content of any link in the same place that you named "Navigation"? Thanks

Pepito () - 10 years ago - Reply 0

Is hat possible to make one sub menu open by default?

JiPeng Tan () - 10 years ago - Reply 0

Hi JiPeng,

You can replace, for example:
<div class="collapse" id="toggleDemo2" style="height: 0px;">
by
<div id="toggleDemo2" style="height: auto;">
And the second toogle will be open

I hope this will help you

Code Solutions () - 10 years ago - Reply 0

any reason why you have the

.affix-row,
.affix-container,
.affix-content {

overflow:scoll;
}
with the html,body{ overflow:hidden;}

it makes for double scroll bar.

would it not be easier to just have th e.sidebar-nav{position:fixed; width:100%;}

gerdi bot () - 10 years ago - Reply 0

I'm curious about this, too.

Joe () - 10 years ago - Reply 0

I really don't remember why i did it but going to fix it, thanks for your comment

"Vertical Affix Menu [CSS only] " Bootstrap 3.1.0 Snippet by iosdsv

Related: See More

Questions / Comments:

"Vertical Affix Menu [CSS only] "
Bootstrap 3.1.0 Snippet by iosdsv