Left-aligned collapsible navigation menu built with Bootstrap

Looking for a unique template or code snippet to implement the same menu as the one on this website:

I want the menu to slide in from the left while darkening the rest of the screen, just like the site I referenced.

Is there a bootstrap template that can achieve this easily? Or would it be better to code the navbar section from scratch?

Thank you,

Answer №1

If you're looking for a sidebar navigation demo, this one from Bootsnipp might be what you need. Check out the modified example Snippet below.

$(document).ready(function() {
  var trigger = $('.hamburger'),
    overlay = $('.overlay'),
    isClosed = false;

  trigger.click(function() {
    hamburger_cross();
  });

  function hamburger_cross() {

    if (isClosed == true) {
      overlay.hide();
      trigger.removeClass('is-open');
      trigger.addClass('is-closed');
      isClosed = false;
    } else {
      overlay.show();
      trigger.removeClass('is-closed');
      trigger.addClass('is-open');
      isClosed = true;
    }
  }

  $('[data-toggle="offcanvas"]').click(function() {
    $('#wrapper').toggleClass('toggled');
  });
});
body {
  position: relative;
  overflow-x: hidden;
}
body,
html {
  height: 100%;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: transparent;
}
/*-------------------------------*/

/*           Wrappers            */

/*-------------------------------*/

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  
<!-- MORE CSS CODE HERE -->
                  
			
        
<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">
  <div class="overlay"></div>
  <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
      
     <!-- SIDEBAR NAVIGATION ITEMS HERE --> 
	              
	             
	            
               
                 
		  
        </ul>
      </li>
     
      

       
		  
		  
		   
       
			 
		
         
	   </div>
	   

        	   
	 
                   
                    </a>
					
					
					
                      f beef jerky.</p>
        <p>Chicken ham hock shankle, strip steak ground round meatball pork belly jowl pancetta sausage spare ribs. Pork loin cow salami pork belly. Tri-tip pork loin sausage jerky prosciutto t-bone bresaola frankfurter sirloin pork chop ribeye corned
            beef chuck. Short loin hamburger tenderloin, landjaeger venison porchetta strip steak turducken pancetta beef cow leberkas sausage beef ribs. Shoulder ham jerky kielbasa. Pig doner short loin pork chop. Short ribs frankfurter rump meatloaf.</p>
        <p>Filet mignon biltong chuck pork belly, corned beef ground round ribeye short loin rump swine. Hamburger drumstick turkey, shank rump biltong pork loin jowl sausage chicken. Rump pork belly fatback ball tip swine doner pig. Salami jerky cow,
            boudin pork chop sausage tongue andouille turkey.</p>
      </div>
    </div>
  </div>
  <!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

Answer №2

Have you considered using a jQuery plugin to create the side menu?

You can check out for an option that may fit your requirements.

Implementing a dim effect on the rest of the screen can be achieved with a simple jQuery trick. You can find more information on this in the Stack Overflow answer provided below.

Check out Jquery - dim entire page and fade up one div element

Answer №3

Recently, I've delved into a similar endeavor. Rather than relying on an overlay to create the modal effect, I am exploring different approaches that could yield similarly effective results. By carefully analyzing the provided example, you should be able to grasp the concept effortlessly. While this can serve as a solid starting point, it's crucial to remember that there are numerous ways to achieve the desired outcome.

var $navbarToggle = $('.navbar-toggle'),
    $flyoutContainer = $('.navbar-flyout-container'),
    $flyoutDropdownItem = $('.flyout-dropdown-item');

function openFlyout (evt) {
  $(this).toggleClass('navbar-toggle-open');
  $flyoutContainer.toggleClass('navbar-flyout-open');
}

function openDropdownNavList (evt) {
  $(this).find('.flyout-dropdown-container').toggleClass('flyout-dropdown-open');    
}

$navbarToggle.on('click', openFlyout);

$flyoutDropdownItem.on('click', openDropdownNavList);
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

/* CSS code trimmed for brevity */

</script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>
</nav>
<!-- Flyout Navbar -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revamp the UI Framework's CSS to accommodate the latest Web Components

I've implemented Grommet as the UI Framework for my React page. However, I encountered a situation where certain web components, like a web chat control, are not covered by Grommet's CSS. What is the simplest way to style these additional web com ...

Optimizing jQuery UI autocomplete choices through filtering

Currently utilizing the jqueryUI autocomplete feature on my website. Let's say I have the following entries in my database... apple ape abraham aardvark Upon typing "a" in the autocomplete widget, a list appears below the input field displaying the ...

Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few p ...

unnecessary shading effect on SVG text

My SVG text suddenly has a strange drop shadow that I can't seem to get rid of. Despite checking the reference guide I purchased on Amazon, I still haven't found any solutions. There are no filters applied and the markup seems to align with examp ...

Submitting information to the server utilizing a POST request through jQuery

What I'm attempting to achieve: I am currently working on sending data to my server using the $.post jQuery shortcut. The issue at hand: It seems that my program is not entering my switch case, possibly due to a problem with sending the action prop ...

invoking a function from an attached HTML file using Angular

How can I invoke a function in Angular using inner HTML? I attempted the following: cellTemplateFunc(cellElement, cellInfo){ var subContainer = document.createElement('div'); subContainer.innerHTML = "<a href='javascript:v ...

Incorporate the Coreui admin bootstrap template into a Symfony project

I am currently working on implementing the CoreUi Admin Bootstrap template into my first Symfony project. However, I have encountered some issues. Firstly, the sidebar is not functioning properly and I am unable to minimize it. In addition, there seems t ...

Displaying a division when a button is pressed

Despite my best efforts, I can't seem to get the chosen div to show and hide when the button is pressed. <button id="showButton" type="button">Show More</button> <div id="container"> <div id="fourthArticle"> <i ...

Updating pages dynamically using AJAX

There's a glitch I can't seem to shake off. I've successfully implemented AJAX for page loading, but an issue persists. When I navigate to another page after the initial load, the new page contains duplicate tags like <head> and <f ...

The Bootstrap navigation bar is experiencing issues and is not functioning properly, as the classes are not

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" d ...

Session availability extends to subdomains, even though it may not be visible in a physical

Currently in the process of building a website Red Sec using a single account for all subdomains: Latest Updates Community Forum Personal Blog News Feed Support Us All pages share the same layout with different content by linking them to . Below i ...

Styling your Vuetify V-data-table with CSS

Struggling to add extra spacing between table rows, despite inspecting the page and verifying that my styles are not being overridden. Have read other Vuetify posts on applying CSS but still no luck. Any suggestions for why I can't style my table as d ...

Stopping the continuous re-sending of a script via Ajax when a key is pressed

My script is set up to save messages into a database when the enter key is pressed. <textarea class="comment" name="comment" id="comment" onKeyPress="return checkSubmit(event)" onKeyDown="return checkTypingStatus(event)" >Comment/Reply</textarea& ...

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

Utilizing this jQuery script, I am able to center a website vertically within the browser window if it exceeds the height of the outer wrapper-div, which has fixed dimensions. $( document ).ready(function() { centerPage(); )}; // center page vertic ...

JavaScript counter unexpectedly resetting to zero instead of the specified value

After gathering feedback from voters: My current issue revolves around a Java counter I created. Ideally, the numbers should start at 0 and increment to the specified number upon page load. You can see an example of this functionality here: https://codepe ...

Ensures that two divs have the same dimensions

Currently, I have a line of sections set up like this: I am attempting to ensure that the second div matches the height of the first one, despite the fact that their heights are determined by the size of the pictures which may vary. Do you have any sugges ...

What causes the `d-none` class to toggle on and off repeatedly when the distance between two div elements is less than 10 during window resizing?

My primary objective is to display or hide the icon based on the width of the right container and the rightButtonGroupWrapper. If the difference between these widths falls below 10, the icons should be shown, otherwise hidden. However, I'm facing an i ...

Activate the capture property for the file selection based on the label that is selected

This is a form that consists of two labels: <form method="POST" action='/process' enctype="multipart/form-data"> <div> <label for="file" class="upload-button"><i class=" ...

What is the reason for the improper setting of the div position?

Welcome to the interactive Pointer Pin application! The red-bordered box is where you can drop your Pointer Pins. This area has a background image set. The blue-bordered box is where you can drag various Pointer Pins from. These pins can be dropped into ...

Tips for achieving consistent outcomes on both IE and Chrome when utilizing the `min` attribute in HTML input tags

The display of input fields is inconsistent between IE (version 11) and Chrome (version 46.0.2490.71) when using the min option in the HTML input tag. In Chrome, the input fields appear extra long, while in IE they display correctly (same as when min is no ...