javascript required for creating a collapsible hamburger menu?

Report · Feb 01, 2022

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

Report · Feb 01, 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.

Report · Feb 01, 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!

Report · Feb 01, 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.

Report · Feb 01, 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 & Moderator

Report · Feb 01, 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.

Report · Feb 01, 2022

Different strokes for different folks.

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

Report · Feb 01, 2022

19.9999 million are probably amateurs and they wouldnt use it if it wasn't open source. Would be interesting to see what would happen to Bootstrap if it ever became a paid for solution.......... l suspect its popularity would drop off a cliff.

Report · Feb 01, 2022

19.9999 million are probably amateurs

By @osgood_

Back at it again, baseless rematks.

and they wouldnt use it if it wasn't open source. Would be interesting to see what would happen to Bootstrap if it ever became a paid for solution.......... l suspect its popularity would drop off a cliff.

By @osgood_

If the world came to an end (climate change), then nobody would be bothered about the web. Yes, a rediculous arguement, but no different to what you are implying. Bootstrap is open source, period.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 02, 2022

Nope it stands to reason, anything which is free or cheap will attract a large amount of interest from those who l would consider amateurs so it wildly distorts the figures. Many people drink cheap wine because its all they can afford, making it seem popular, which of course it is but I doubt a wine expert would agree in most cases its the best wine.

I could make the argument that php is the most popular server side language by far outstripping anything else available but when you factor in WordPress, joomla etc because they are popular with amatuers it somewhat distorts the figures, anyone who can't see that is blind or just doesnt want to accept the reality of the situation.

Report · Feb 01, 2022

If Facebook started charging members, FB would fall off the face of the Earth a lot faster than Bootstrap.

It's no coincidence that most Themes for WordPress, Joomla!, Drupal and other CMS sites are built with Bootstrap. Even online site builders like Shopify & Webflow embrace it. So it's not going away anytime soon.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 02, 2022

Unfortunately no, Bootstrap and other frameworks are not going away any time soon. The last decade has seen irreversible damage to the industry as a result.

Their are those who aspire to be the best at their chosen career and those that just want to get by. Ive always wanted to get ahead and without learning to code youre always going to be dependent on whichever editor, framework, library, plugin etc workflow you chose to use and the limited options which come as default.

Being able to write ones own code makes one more valuable when it comes to job choices. However l do accept in this forum there are very few who are considering web development as a career so for them whatever route they choose is irrelevant to me.

Report · Feb 02, 2022

can I throw fuel on the fire ... it seems to me that there are a lot of users who pay for this MDB extension ... so it must do the job well ... don't you think 😉

https://mdbootstrap.com/

https://mdbootstrap.com/docs/standard/pro/#section-pricing

Report · Feb 01, 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.

Report · Feb 01, 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!

Report · Feb 02, 2022

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

Report · Feb 02, 2022

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

By @Liam Dilley

That mantra is often used by developers and yet when you observe what they are doing you often find they are hooked up to the bloated css and js files......

If youre starting out and have no real ambition as a web developer, who cares. I'm not a baker and have no burning desire to be one, so l use off the shelf cake mix.

Report · Feb 02, 2022

Thank you Jon, Ben, Osgood, Nancy, and Liam for your feedback. This is very helpful.

I am not at all up-to-date on my web design / web development capabilities, but I do consider myself a software devloper. It's just that I have most of my experience with machine control interfaces and business database systems that are not web based. I am generally in favor of using any tools I can (like bootstrap) that can allow me to accomplish routine tasks more quickly. When I began my effort (a little over a month ago) to get myself "up to speed", I started by reading the most recent DreamWeaver Classroom in a book. This walked you through the process of using one of the the bootstrap templates to create a website for a fictional business. This definitely made it clear to me that bootstrap can certainly be a useful tool. When I reached the end of the book, I started trying to adapt the layout I had created following the example in the book to my own business. I found that (at my current stage of learning), I did not yet have to ability to adapt the bootstrap design to my liking. I felt that to accomplish what I wanted, I needed to get more experience using some of the underlying technologies (like Flexbox for example) that bootstrap is relying on. When I posted my question, I was looking at the creation of a collapsible hamburger menu as a good excersize that would allow me to build my capabilities while accomplishing something useful. I am not under time pressure to get this done. I am just hoping to expand my capabilities. Whether or not I need to learn javascript to create a collapsible hamburger menu, my feeling now is that if not the hamburger menu, I will run into something else that will make me want (or need) to know javascript to accomplish. I think I will spend some time trying to learn javascript before diving into the hamburger menu. I'll post back here if I run into any questions. I am sure I will.

I really appreciate all your help!

Best regards,
Paul

Report · Feb 02, 2022

I think you have the right mentality concerning javascript and your background certainly suggests youre more than capable of learning it quickly, it should be a breeze. Apply that same mentality throughout and you won't become dependent on the limited capabilities of any package.

Report · Feb 02, 2022

you won't become dependent on the limited capabilities of any package.

By @osgood_

Again, baseless remarks. There is nothing limited when using Bootstrap.

Have a look at what I did with the humble Bootstrap Card (my favourite):

https://youtu.be/U55kAUVMUo4

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 02, 2022

you won't become dependent on the limited capabilities of any package.

By @osgood_

Again, baseless remarks. There is nothing limited when using Bootstrap.

By @BenPleysier

That depends if you only use the default components that come with it or WRITE your own. Id say the components that come with Bootstrap are pretty limited in what they do and/or maybe not quite what you would like them to do. That is of course if you have any imagination beyond Bootstrap, which appears to brain wash those who use it. All pre-built packages are limited in what they offer by default UNLESS you get your hands dirty and re-engineer them to your own requirements.