how to make a left aligned navigation with dropdown elements


Tags: javascript,jquery,html,css,twitter-bootstrap

Problem :

I have been struggling to get my head around this for over a week now and I think my main problem is that I don't know where I should be looking.

Basically what I want to create is a navigation area that is on the left side of the page. The person who I am building the website for has given me a TON of navigation elements (seriously there's about 25-30) that they would like.

I have managed to categorise them into proper headers and sub-headers but now I'm faced with the problem that I just don't know how to build in the dropdown functionality.

I'm very new to web development and this is a great challenge to take on but I don't know where to start.

I have watched hours of tutorial vids talking about how to build navbars that are top aligned, that pop out on top of the content etc but none that "slide" open (if that makes sense) so that when you click on an element, the other links below it slide down to make room for the sub-headers.

Here is what I have so far (it's a bit of a mess I know) have mercy!

http://www.fabio-felizzi.com/

It's just so I can show you what I mean by the styling of the navigation area.

I've found myself wrapped up in a giant knot with this particular problem and could really use some help even if it's just a point in the right direction.

I have tried to search for threads which have this particular problem but nothing has really hit the nail on the head so to speak, I apologise if I've missed something.

Many Thanks

Here is the HTML that contains the navbar

	<!-- Sidebar -->
			<nav id="sidebar-wrapper">
				<a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a>
				<ul class="sidebar-nav">
					<li><a href="#" id="dropdown-toggle">About Us</a>
						<ul class="dropdown-wrapper">
							<li><a href="about-us">About Us</a></li>
							<li><a href="our-journey">Our Journey</a></li>
							<li><a href="where-we-are-going">Where We Are Going</a></li>
						</ul>
					</li>
					<li><a href="what-we-do">What We Do</a></li>
					<li><a href="the-building">The Building</a></li>
					<li><a href="volunteer">Volunteer With Us</a></li>
					<li><a href="get-involved">Get Involved</a></li>
					<li><a href="products">Unique Products</a></li>
					<li><a href="donate">Donate</a></li>
					<li><a href="contact">Contact Us</a></li>
					<li><a href="calendar">Calendar</a></li>
				</ul>
			</nav>

and here is the Javascript

  //handle menu clicks and animate loading in of new content
  $('ul.sidebar-nav li a').click(function () {
      var toLoad = $(this).attr('href');
    	$('#ajax-content-wrapper').load('html/' + toLoad + '.php', function(){
        $('#ajax-content-wrapper').hide('slow',loadContent);
        function loadContent() {
            $('#ajax-content-wrapper').load(toLoad,'',showNewContent());
          }
        function showNewContent() {
            $('#ajax-content-wrapper').show('slow');
          }
        $('.bxslider').bxSlider();
      });
  	return false;
  });

  //hide/display sidebar nav
    $("#menu-toggle").click(function (e){
      e.preventDefault();
      $("#wrapper").toggleClass("menuDisplayed");
    });

  //hide/display dropdown nav
    $("#dropdown-toggle").click(function (e){
      e.preventDefault();
      e.stopPropagation();
      $(".dropdown-wrapper").toggleClass("dropdownDisplayed");
    });
});

I have yet to get to the CSS as frankly I've run into a brick wall with this and my brain has kind of short circuited. I'm now at the stage where I'm so confused with all of this that I wouldn't even be able to explain my work.



Solution :

Here are some adjustments to your code to factor in submenu's and a somewhat improved mobile setup.

It simply uses the Bootstrap Toogle that normal nav menus use.

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});
body,
html {
  height: 100%;
  overflow: hidden;
}
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
  padding-left: 250px;
}
.btn-default#menu-toggle,
.btn-default#menu-toggle:hover,
.btn-default#menu-toggle:focus {
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
  color: #419ca6;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #419ca6;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}
#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}
/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}
.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #ddd;
}
.sidebar-nav li a:hover {
  text-decoration: none;
  color: #444;
  background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.sidebar-nav .sidebar-brand {
  text-align: center;
}
.sidebar-nav ul {
  list-style: none;
  list-style-position: outside;
  padding: 0;
  margin: 0;
}
.sidebar-nav ul > li {
  font-size: 13px;
}
.sidebar-nav ul > li > a {
  color: #ddd;
  text-decoration: none;
  padding-left: 10px;
}
.sidebar-nav ul > li > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.6);
}
@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand">
        <img src="http://www.fabio-felizzi.com/img/logo.png" alt="People's Centre for Change">
      </li>
      <li> <a href="#">Home</a>

      </li>
      <li> <a href="#nope" data-toggle="collapse" data-target="#drop1"> About Us<span class="caret"></span></a>

        <ul id="drop1" class="collapse" data-parent="#sideNavParent">
          <li><a href="about-us">About Us</a>

          </li>
          <li><a href="our-journey">Our Journey</a>

          </li>
          <li><a href="where-we-are-going">Where We Are Going</a>

          </li>
        </ul>
      </li>
      <li><a href="what-we-do">What We Do</a>

      </li>
      <li><a href="the-building">The Building</a>

      </li>
      <li><a href="volunteer">Volunteer With Us</a>

      </li>
      <li><a href="get-involved">Get Involved</a>

      </li>
      <li><a href="products">Unique Products</a>

      </li>
      <li><a href="donate">Donate</a>

      </li>
      <li><a href="contact">Contact Us</a>

      </li>
      <li><a href="calendar">Calendar</a>

      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper"> <a href="#" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a>

    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <h1>People's Centre for Change</h1>

        </div>
      </div>
    </div>
  </div>
  <!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->


    CSS Howto..

    How to :hover one div on two other divs and make it dynamic with JS/JQuery?

    How to achive this design CSS

    joomla, CSS - show joomla module only for smartphone screens

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How do I make template colors update when I choose them from a list or radio buttons? [closed]

    How to make a pie chart in CSS

    how fix bug with white lines between the cells of the table in IE11

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    How can I request a CSS attribut in HtmlUnit?

    how to add a different text box in input text type

    How do I pass a background-image url from one div onto another using jQuery?

    how to embed css in sass, or use + selector in sass?

    How to have img popout when containing div is clicked (Image gallery)?

    CKEditor 4: How to add CSS stylesheet from plugin?

    how to change properties of a parent div on hover of child div

    How to create this type of element using XHTML & CSS?

    How to transition a CSS class between two separate additional classes?

    How to do line animation using CSS and SVG

    iOS How to access Library in CSS Url's?

    How to specify another font size for IE7 and IE8

    How to layout list items in groups

    How to make Zig Zag borders using CSS? [closed]

    How to ensure broswer does not cache my JS/CSS [duplicate]

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    How make input element take up available space next to a fixed width element?

    How to scroll through a div before the page scrolls?

    How can I track down a:hover jquery source?

    How to achieve this gradient using valid HTML & CSS only

    How to design resolution independent CSS elements?

    How to create a variable from CSS class attribute?