Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML How to create a hamburger sidebar menu attached to top menu

B

bootsy

Coder
I need help attached a sidebar menu on to the the top menu. I have attached a image of what it looks like with the sidebar menu detached from the top menu. I want to move it up to the top menu as a hamburger menu. I shortened the side menu html because there is too many menu items so they won't much the image you see.

HTML: 
<body class="loggedin">
<div class="site-wrapper">
    <!-- HEADER -->
    <header id="header">           
        <nav class="navbar navbar-expand-lg mb-2">
            <a href='/' class="navbar-brand">
                <img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
            </a>
            <div class="vl"></div>

            <div class="nav-container">

   <ul class="nav-items">
    <!-- Navigation -->
  
    <!-- Dropdown menu -->
    <li class="nav-item-select nav-item-dropdown">
      <a class="dropdown-trigger" href="#">Select SFA</a>
      <ul class="dropdown-menu">
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 1</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 2</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
 <div class="vl"></div>
            <div class="nav-container">

   <ul class="nav-items">
    <!-- Navigation -->
  
    <!-- Dropdown menu -->
    <li class="nav-item-select nav-item-dropdown">
      <a class="dropdown-trigger" href="#">Select Program Year</a>
      <ul class="dropdown-menu">
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 1</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 2</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
                  
          
            <div class="navbar-collapse collapse" id="Div1">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="#" class="nav-link" title="Settings"><i class="fas fa-search"></i></a>
                    </li>
                    
                    <li class="nav-item rounded-icon">
                        <a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b class="caret"></b></a>
                    </li>
                </ul>
            </div>
        </nav>           
        <div id="appSideBar" class="hidden">
            <div class="appSideLinks">
                <nav aria-label="programs">
                    <ul class="programsSide">
                        <li class="program-item">
                            <i class="fas fa-apple-alt"></i> School Nutrition Programs
                        </li>
                        <li class="program-item">
                            <i class="fas fa-dollar-sign"></i> Accounting
                        </li>
                        <li class="program-item">
                            <i class="fas fa-child"></i> Child and Adult Care Food Program
                        </li>
                        <li class="program-item">
                            <i class="fas fa-cogs"></i> Maintenance and Configuration
                        </li>
                        <li class="program-item">
                            <i class="fas fa-temperature-hot"></i> Summer Food Service Program
                        </li>
                        <li class="program-item">
                            <i class="fas fa-shield-check"></i> Security
                        </li>
                        <li class="program-item">
                            <i class="fas fa-truck"></i> Food Distribution Program
                        </li>
                    </ul>
                </nav>
            </div>
        </div>


    </header>
    <!-- SPONSOR INFO SECTION -->

    <main role="main" id="main">
        <div id="wrapper">
            <!-- SIDEBAR -->
            <div id="sidebar-wrapper" class="sb-wrapper">
                <a href="#menu-toggle" class="sidebtn-holder" id="menu-toggle">
                    <i class="fas fa-chevron-circle-left"></i>
                </a>
                <div class="list-wrapper">
                    <div class="nav-wrapper">         
      <ul class="sidebar-nav">
      <li>
          <a href="#" v-b-tooltip.hover.right title="Entity Manager">               
            <div> Entity Manager</div>
          </a>
        </li>
        <li>
          <a href="/#/AZSiteApps" v-b-tooltip.hover.right title="Area Eligibility">
            <div> Area Eligibility
            </div>
          </a>
        </li>
        <li>
          <a href="/#/AZFFVP" v-b-tooltip.hover.right title="Site Applications">             
            <div> Site Applications</div>
          </a>
        </li>           
        <li>
          <a href="/#/AZProviderList" v-b-tooltip.hover.right title="Provider & Vendor List">
            <div> Providers &amp; Vendors</div>
          </a>
        </li>           
        <li>
          <a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provisions">
            <div> Provisions</div><span class="material-icons">chevron_right</span>
          </a>
          <ul>
        <li><a href="#">Stream 1</a></li>
        <li><a href="#">Stream 2</a></li>
        </ul>
        </li>           
        </ul>
      </div>
       <div class="nav-wrapper">
      
      </div>
                </div>


            </div>

            <!-- CONTENT -->
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                        <div id="midcol-nslp" class="p-3">
                ]]>.Value

        Dim sContentBottomHtml As String = _
         <![CDATA[
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>

    </main>
  </body>
 </html>

This is an image of what the page currently looks like

image.png

I definitely would appreciate any suggestions and help on this please.
 
Sort by date Sort by votes
Hey @bootsy đź‘‹

I played around with the code you provided and came up a few suggestions. I added a hamburger Icon and moved the program menu in front of the navigation (just after nav-container and nav-items). I then added some CSS that would make the menu items hidden by default using display: none;. To open and close the menu, I added some Javascript to help control the behaviour.

HTML:
HTML: 
<body class="loggedin">
    <div class="site-wrapper">
        <!-- HEADER -->
        <header id="header">          
            <nav class="navbar navbar-expand-lg mb-2">
                <a href='/' class="navbar-brand">
                    <img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
                </a>
                <div class="vl"></div>
   
                <div class="nav-container">
   
       <ul class="nav-items">
        <!-- Navigation -->

        <i class="fa-solid fa-bars" id="hamIcon"></i>
<nav aria-label="programs">
    <ul id="program-menu" class="programsSide">
        <li class="program-item">
            <i class="fas fa-apple-alt"></i>
            School Nutrition Programs
        </li>
        <li class="program-item">
            <i class="fas fa-dollar-sign"></i>
            Accounting
        </li>
        <li class="program-item">
            <i class="fas fa-child"></i>
            Child and Adult Care Food Program
        </li>
        <li class="program-item">
            <i class="fas fa-apple-alt"></i>
            Maintenance and Configuration
        </li>
        <li class="program-item">
            <i class="fa-solid fa-temperature-sun"></i>
            Summer Food Service Program
        </li>
        <li class="program-item">
            <i class="fa-solid fa-shield-check"></i>
            Security
        </li>
        <li class="program-item">
            <i class="fas fa-truck"></i>
            Food Distribution Program
        </li>
    </ul>
     
        <!-- Dropdown menu -->

JavaScript:
JavaScript: 
const hamIcon = document.getElementById("hamIcon"); // grabs data for ID element hamIcon.

var clickIndex = 0; // keeps track of clicks.

// adding event listener to hamIcon, the listener is waiting for a click.
// Once the user clicks the icon, the function is triggered.
// Inside the function is an if statement which verifies if index is less than 1, else if index is greater than 0.
// If index is less than 1, index will get an incremental value.
// If index is greater than 0, index will get it's value decremnted.
// If statements are changing the style property display depending on rather the index is less than 1 or greater than 0.
hamIcon.addEventListener('click', function(){
    if (clickIndex < 1){
        document.getElementById("program-menu").style.display = "block";
        clickIndex++;
    } else if (clickIndex > 0)  {
        document.getElementById("program-menu").style.display = "none";
        clickIndex--;
    }
});

CSS:
CSS: 
.programsSide {
    display:none;
}

You may have to adjust the code to fit your website as I only had a portion of the code, so I couldn't properly place items.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom