how to make a left aligned navigation with dropdown elements

Question

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.

Answer 1

If you want to use panel for drop down menu you may try what Peter Geerts said. If you ar looking for old traditional fly out menu then this basic example may be helpful for you.

 <nav id="sidebar-wrapper"> <a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a> <ul class="sidebar-nav"> <li id="dropdown-toggle"> <a href="#">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>

 #sidebar-wrapper { background:teal; width:200px; } #sidebar-wrapper a { color:#fff; text-decoration:none } #dropdown-toggle ul { background:red; width:200px; /*Adjust as per requirement*/ position:absolute; left:150px; /*Adjust as per requirement*/ top:50px; /*Adjust as per requirement*/ display:none } #dropdown-toggle:hover ul { display:block }

 <nav id="sidebar-wrapper"> <a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a> <ul class="sidebar-nav"> <li id="dropdown-toggle"><a href="#">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>

Helpful Bootstrap based resources from where you may learn more in details.

Fiddle

Simple Sidebar Menu

bootsnipp

Answer 2

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 -->