Learning the Basics of JavaScript by Creating a Hamburger Menu Button

◎ Advantages
A hamburger button allows content links to be implemented without displaying the full navigation menu directly on the website.
Because of this, more screen space can be dedicated to the main content.
This makes it possible to create spacious designs and bold layouts even on smartphones.

△ Disadvantages
Since users must perform one additional action before accessing content links, some articles suggest that :contentReference[oaicite:0]{index=0}—in other words, how deeply users interact with the goals of a website—may decrease.
This can potentially lead to users leaving the website more quickly.
(User engagement is a metric that indicates whether users actually take actions on a site.)
Users who are already familiar with websites and web applications usually recognize the three-line icon as a hamburger menu, but it still requires a certain level of user familiarity and learning.
Once users understand how it works, it can provide a fresh and comfortable user experience. However, for users who access such interfaces less frequently, the extra action required to open the menu may create subtle stress without them even realizing it.

Depending on the target audience and purpose of a website or application, it is still necessary to determine whether adopting a hamburger button is truly the best choice.
Not only with hamburger menus, but throughout the evolution of digital technology and web development, it is important to examine whether there is any gap between the intentions of web creators and the actual behavior of users.
Doing so leads to better UI/UX design that guides users smoothly toward their intended goals.

The birth of :contentReference[oaicite:0]{index=0} dates back to 1995.
It is actually a much older technology than many people expect.
It became widely adopted after being included in :contentReference[oaicite:1]{index=1} 3.0 by :contentReference[oaicite:2]{index=2} in 1996.
However, because it was considered a language that beginners could start using easily without deep programming knowledge, it was often looked down upon as something for amateurs.
It was also avoided because people believed it added unnecessary movement and slowed down page loading times.

In 2005, :contentReference[oaicite:3]{index=3} used :contentReference[oaicite:4]{index=4} in :contentReference[oaicite:5]{index=5}.
Many users were amazed by the ability to move around a map in real time without reloading the page.
Through Ajax, JavaScript began receiving much greater attention.

Today, JavaScript is used on countless websites.
It makes it easy to add interactive effects such as mouse animations, sliders, pop-ups, and fade effects with relatively simple implementation.

In this sample, we will create a hamburger button where the navigation items appear one by one when the button is pressed.
※ This explanation assumes you already have a basic understanding of HTML and CSS.
Since this sample also uses :contentReference[oaicite:0]{index=0}, please download the source code from the official jQuery documentation (English).

view demo

The JavaScript used in this example is only the following:

$(document).ready(function() {
  $(".menu-trigger").click(function () {
    $(this).toggleClass("active");
    $(this).next().toggleClass("onanimation");
    $('ul li').hide();
    $('ul li').each(function(i) {
      $(this).delay(80 * i).fadeIn(500);
    });
  });
});

HTML

<div class="gblnv_box">
<a class="menu-trigger" href="#"> <!-- ← Hamburger button -->
  <span></span>
  <span></span>
  <span></span>
</a>
<div class="gblnv_block">
  <ul class="gblnv_list"> <!-- ← Global menu inside the hamburger button -->
    <li><a href="">Global Menu 1</a></li>
    <li><a href="">Global Menu 2</a></li>
    <li><a href="">Global Menu 3</a></li>
  </ul>
</div>
</div>

In the basic structure of JavaScript, each process is separated using a semicolon “ ; ”.
Now let’s go through the following source code.

$(document).ready(function(){});

This code executes its contents once the DOM of the web page is fully prepared.
JavaScript is a language that can easily manipulate the DOM. It reads web page elements as DOM objects and can rewrite the web page through the DOM.

DOM stands for “Document Object Model,” and it represents the structure of a website as tree-like data.

.click(function (){});

The code above executes a process when the hamburger button “.menu-trigger” is clicked.
By placing the desired actions inside this function, the menu inside the hamburger button can be displayed.

.toggleClass('active');

toggleClass switches a specified class on and off by adding or removing it.
This allows the menu to appear and disappear when the hamburger button is clicked.

.next().toggleClass('onanimation');

next() selects the “next” element.
In this case, it selects the element following “.menu-trigger,” which is “.gblnv_block,” and adds a class to it using toggleClass.

.hide();
  .each(function(i) {
  .delay(80 * i).fadeIn(500);
});

The code above displays the hamburger menu links with a staggered animation effect.
Each element appears with a slight delay.

hide() hides the elements.
fadeIn(500) then displays the elements with a fade-in animation.
The number 500 represents the animation duration in milliseconds.
In this case, the animation takes 0.5 seconds.

each() is used for repeating a process.
The reason for using a loop here is so that each menu item can appear with its own delay.
Without the loop, all hamburger menu links would simply appear at the same delayed timing.

After the first li element is displayed, the delay process for the second li begins.
The i in each(function(i){}) is a variable.
The variable i is commonly used in repeated processing.
With delay(80 * i), each list item’s display timing is delayed by 80 milliseconds, and then fadeIn(500) gradually fades the element in over 500 milliseconds.

Reference site used for the hamburger menu navigation example

Source: http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html
※ Please note that the referenced example site may be closed after a certain period of time.

The hamburger menu animation uses CSS3’s transform and @keyframes animation features.
The top and bottom lines are rotated using transform: rotate().
The middle line is moved and faded out using @keyframes animation.

What do you think?
The web is a field where technology evolves rapidly, and keeping up with it can sometimes feel overwhelming.
At the same time, however, it is also a field full of possibilities, where combining existing technologies and applying creative thinking to current knowledge can lead to entirely new ideas.

In particular, :contentReference[oaicite:0]{index=0} is highly compatible with other languages such as HTML, making it possible to create interesting interactions, animations, and dynamic web pages.
The world of web development is full of progress and potential, and it is definitely a field worth continuing to study.