Skip to main content
P
PaulKraemer1
Known Participant
February 1, 2022
Question

javascript required for creating a collapsible hamburger menu?

  • February 1, 2022
  • 5 replies
  • 1808 views

Hi,

 

I am trying to update my web design skills after not having worked on a website since table based layouts were common. After reading a few books and online resources, I have become fairly comfortable with media queries and using CSS Grid and/or Flexbox to create a reponsive layout. The next thing I'd like to try doing is to create a collapsible "hamburger" menu that will display as buttons in a horizontal row at larger viewport widths, and that will collapse to a hamburger icon at narrower widths.

In searching the web for tutorials on how to do this, I have come across some tuturials that use javascript and some that claim to just use .css. I have no experience with javascript, but I have quite a bit of experience with some other programming languages (mainly C++ and visual basic). I think I'll be able to learn javascript (at least the basics) relatively quickly if I set my mind to it.

 

I'm just wondering if anyone here can make a recommendation - should I assume that basic comfortability with javascript a prerequisite for accomplishing what I want? Or do you think I can dive right into hamburger menu tutorials in the hope that I can accomplish what I want with just .css?

 

Any advice will be greatly appreciated.

 

Thanks in advance,

Paul

 

 

    This topic has been closed for replies.

    5 replies

    Liam Dilley
    Liam Dilley
    Inspiring
    February 2, 2022

    I am not sure why how CSS and JS works post would be helpful for you Paul but your question is quite broad.


    Navigation is allways based on the content. You can not have a fancy desktop responsive switching to closed nav with burger menu with fancy overlay if you have lots of links with multiple possible levels. Multiple possible levels may not be right either and you may need a mega menu style approach and the corrisponding mobile nav with that as well.

    Most of it will be driven by your CSS and media queries and then events handled by Javascript. To people saying about not needing JS at all are not really thinking right. Mobile with touch events you need to consider and why a lot of moden navigation do not just run on a hover event.

    In terms of comments in regard to frameworks like Boostrap which Nancy rightly (in my view) pointed out as an option to do this being bloated clearly not reviewed what is out there.

    Bootstrap 5 has done away with Javascript for example on the road to improvements, always optimised and you can even choose your own build and what is included in that.

    There are ones which are bloated but if your starting out and making a website your not going to notice this at all.

    While CSS grid is cool and I have even been involved in debug logging and feature suggestions there - Its evolving a lot, features being added or changed to compensate or fix issues and the addoption in browsers in many respects are considered beta compatability solutions. A sollution working across all browsers is not a garunteee yet and why framesowkrs like bootstrap have not adopted that.

    Regardless I think you are not there yet on advanced stuff so I am not sure why they been thrown your way. I think what Nancy said going with boostrap on your site and use that for many elements is a good starting point for you.

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      February 2, 2022

      The question is not broad at all. This is what the OP asked

       

      I'm just wondering if anyone here can make a recommendation - should I assume that basic comfortability with javascript a prerequisite for accomplishing what I want? Or do you think I can dive right into hamburger menu tutorials in the hope that I can accomplish what I want with just .css?

       

      @Jon Fritz  responded with:

       

      Knowing javascript will definitely help, but it isn't necessary for a standard collapsible menu.

      CSS is fairly powerful and can easily be used to make an entire menu system with some pretty advanced effects.

       

      To which I added:

       

      Adding to @Jon Fritz II 's reply, if the same function can be created using CSS, then this should take preference over using JS. The reason for this is the way that these languages are processed by browser.

       

      At no stage did I suggest not to use JS. Speaking of JS, in your reply you stated that:

       

      Bootstrap 5 has done away with Javascript

       

      I would love to know where that information came from.

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        B i r n o u
        B i r n o u
        Legend
        February 2, 2022

        https://getbootstrap.com/docs/5.0/getting-started/javascript/

          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          February 1, 2022

          At the risk of crucifixion from those who don't get it, I'll just say I use Bootstrap which is Flexbox-based.  I can't ignore the time & money saved from using a responsive framework that frees me up to focus on more important things.

           

          <!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<!--navbar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-md-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</div>

<hr>
<div class="row">
<div class="col-md-3">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium necessitatibus neque commodi repudiandae, iste. </p>
</div>

<div class="col-md-3">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium necessitatibus neque commodi repudiandae, iste. </p>
</div>

<div class="col-md-3">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium necessitatibus neque commodi repudiandae, iste.</p>
</div>

<div class="col-md-3">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<footer class="container-fluid">
<div class="row bg-dark text-light text-center">
<div class="col-md-4">
<p>Footer text</p>
</div>
<div class="col-md-4">
<p>Footer text</p>
</div>
<div class="col-md-4">
<p>Footer text</p>
</div>
</div>
</footer>
</body>
</html>

           

          But if you're hell bent on doing it manually, you'll find a tutorial below.

          https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

           

          A Google search will reveal many others.

           

          Nancy O'Shea— Product User & Community Expert
            O
            osgood_
            Legend
            February 2, 2022

            I can't ignore the bloat associated with such frameworks and plugins, that frees me up to get on with the job without having to trawl through a lot of mostly redundant  junk,  time saved plus l get to use advanced features like grid, which Bootstrap doesnt have currently or at least not the official version of it.

              Nancy OShea
              Community Expert
              Nancy OSheaCommunity Expert
              Community Expert
              February 2, 2022

              Different strokes for different folks.

               

              quote

              I can't ignore the bloat associated with such frameworks and plugins, that frees me up to get on with the job without having to trawl through a lot of mostly redundant  junk...


              By @osgood_

              ==========

              20 million websites use Bootstrap to AVOID tedious manual coding.  But it's flexible enough for advanced projects, too. 

              https://blog.hubspot.com/website/w3-css-vs-bootstrap

               

               

               

              Nancy O'Shea— Product User & Community Expert
                O
                osgood_
                Legend
                February 1, 2022

                I would go with some simple javascript because it offers more flexibility. Css for dynamic workflow is getting better but its still way short of what javascript brings to the party. If you do go with pure css don't go down the 'hover over' route as that doesnt work on mobile devices, you need to use a 'click' method but that's a bit more complicated in css and not something I'm familar with.

                 

                 

                  BenPleysier
                  Community Expert
                  BenPleysierCommunity Expert
                  Community Expert
                  February 1, 2022

                  Adding to @Jon Fritz 's reply, if the same function can be created using CSS, then this should take preference over using JS. The reason for this is the way that these languages are processed by browser. In the following diagram you can see

                  • CSS > CSS Parser > CSS Object Model > Render Tree
                  • JS > JS Enginge (V8) > split and redirected to the relevant Object Model > Render Tree

                   

                   

                  JavaScript takes much longer to process than HTML and CSS.

                   

                  Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
                    Jon Fritz
                    Community Expert
                    Jon FritzCommunity Expert
                    Community Expert
                    February 1, 2022

                    Knowing javascript will definitely help, but it isn't necessary for a standard collapsible menu.

                    CSS is fairly powerful and can easily be used to make an entire menu system with some pretty advanced effects.

                      Terms & ConditionsAccessibility statement
                      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices