Incorporating a dropdown feature into the navigation bar

Greetings,

I am currently learning on the job as I work on a new website for my family business.

I am struggling to make the drop-down navigation menu function properly on both desktop and mobile. I want it to have a simple design similar to the main navigation, and I have tried different approaches to make it work like the toggle button. However, it is not behaving as expected.

My goal is to have the drop-down links display on hover for desktop users and require a touch for mobile users.

HTML

<div class="navigation-bar">
  <div class="navigation-item">
    <div class="logo">
      <a href="index.html">
        <img src="/assets/img/logo.jpg" alt="Company Logo">
      </a>
    </div>
    <ul class="navigation-bar-menu">
      <li class="active"><a href="index.html" class="active">Home</a></li>
      <li><a href="#">Services <i class="fa-thin fa-chevron-down"></i></a>

        <ul class="navigation-bar-dropdown">
          <li><a href="#">Managed Print Service</a></li>
          <li><a href="#">Document Management</a></li>
          <li><a href="#">Machine Finance Options</a></li>
          <li><a href="#">Machine Repair & Support</a></li>
        </ul>

      </li>
      <li><a href="#">Products <i class="fa-thin fa-chevron-down"></i></a>
        <ul class="navigation-bar-dropdown">
          <li><a href="#">Machines</a></li>
          <li><a href="#">Ricoh</a></li>
          <li><a href="#">Lexmark</a></li>
          <li><a href="#">Konica Minolta</a></li>
          <li><a href="#">Software</a></li>
          <li><a href="#">Kofax</a></li>
          <li><a href="#">Papercut</a></li>
          <li><a href="#">Filestar</a></li>
        </ul>
      </li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
    <button class="navigation-bar-toggle">
      <i class="fa-light fa-bars"></i>
      Menu
    </button>
  </div>
</div>

CSS 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #242424;
  font-family: 'proxima-nova', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar {
  background-color: #ffffff;
  padding: 2rem 1rem;
  position: relative;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.navigation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 10rem;
  display: block;
}

.navigation-bar-toggle {
  padding: 1rem;
  background-color: #ecf0f1;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  font: inherit;
  border-radius: 0.25rem;
}

.navigation-bar-dropdown {
  display: flex;
  flex-direction: column;
}
.
.
.

<p>JavaScript</p>
<pre><code>  window.addEventListener('DOMContentLoaded', () => {
  const menuToggler = document.querySelector('.navigation-bar-toggle')
  const menu = document.querySelector('.navigation-bar-menu')

  menuToggler.addEventListener('click', () => {
    menu.classList.toggle('open')
  })
})

If you have any suggestions or solutions, I would greatly appreciate your assistance. https://jsfiddle.net/fc471p3e/4/

javascripthtmlcss

Answer №1

After carefully reviewing your requirements, I made the necessary adjustments with minimal modifications and provided explanations where needed. Feel free to take a look at the changes I made in the HTML structure, CSS styling, and JavaScript functionality. If you have any questions or need further clarification on specific modifications, please let me know in the comments section. Additionally, I have included instructions on adding class names for links with dropdown functionality in the markup. Take your time to review the updates and don't hesitate to reach out if anything seems unclear.

window.addEventListener('DOMContentLoaded', () => {
  const menuToggler = document.querySelector('.navigation-bar-toggle');
  const menu = document.querySelector('.navigation-bar-menu');

  menuToggler.addEventListener('click', () => {
    menu.classList.toggle('open')
  })

  const linksWithChild = document.getElementsByClassName('dropdown-btn');

  for (let i = 0; i < linksWithChild.length; i++) {
    linksWithChild[i].addEventListener('click', function() {
      for (let j = 0; j < linksWithChild.length; j++) {
        if (linksWithChild[j].classList.contains('active') && linksWithChild[j] !== this) {
          linksWithChild[j].classList.remove('active');
        }
      }
      this.classList.toggle('active');
    });
  }

})
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #242424;
  font-family: 'proxima-nova', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar {
  background-color: #ffffff;
  padding: 2rem 1rem;
  position: relative;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.navigation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 10rem;
  display: block;
}

.navigation-bar-toggle {
  padding: 1rem;
  background-color: #ecf0f1;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
….


<div class="navigation-bar">
  <div class="navigation-item">
….

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

Python-JavaScript Integration Problem

I'm a beginner when it comes to Javascript, Python, and PHP. In my Javascript program, I have a button that triggers a Python script and displays the returned value on the screen. My goal is to steer clear of using Jquery and Json. Here are the snipp ...

javascriptpythonhtml

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

css

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Here's the Angular component I'm working with: export class UserListComponent implements OnInit, OnDestroy { private _subscriptions: Subscription; private _users: User[] = []; private _clickableUser: boolean = true; constructor( priv ...

javascriptangulartypescriptrxjssetinterval

What advantages does incorporating SSR with dynamic imports bring?

How does a dynamic imported component with ssr: true differ from a normal component import? const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), { ssr: true, }); What are the advantages of one method over the ...

javascriptreactjsnext.jsjsx

I am implementing a new method in the prototype string, but I am uncertain about its purpose

I am trying to wrap my head around the concept here. It seems like the phrase will pass a part of an array, in this case eve, to the phrase.palindrome method. This method will then process it. First, the var len takes the length of eve and subtracts 1 from ...

javascriptarraysfor-loopprototypecharat

Tips for showing various column information as tooltips in ag grid's pivot mode

var ColumnDefinitions = [{ headerName: "Column A", field: 'colA', rowGroup: true }, { headerName: "Column B", field: 'colB', pivot: true, enablePivot: true }, { headerName: "Column C", field: ...

javascriptangularjsag-grid

Is there a way for me to make the login button redirect to the Dashboard?

I'm currently working on a piece of code where I need to implement some form of validation when the user clicks on the sign-in button. Specifically, I want to ensure that both the username and password fields are not left empty. If this condition is m ...

javascriptreactjsreact-nativesnackjs

Utilize the map function on an array object to present data in a table using React framework

My parent component passes an array object that looks like this: https://i.sstatic.net/Nqh81.png I want to organize these values into a table with the keys in one column and their corresponding values in other columns. The desired format is shown here: ht ...

javascriptreactjs

Utilizing Angular Directives and Controllers for Improved Efficiency

I have developed a custom dropdown option selector which is functioning well. It includes functions to fetch data from a specified URL in order to populate a list. However, the issue arises when I attempt to reuse this component in a different section of ...

javascriptangularjsoopcontrollersingleton

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

I recently added a unique class to certain links on my website. When these specific links are clicked, I want them to trigger a customized dialog box. My goal is to modify the CSS of this special dialog box. Only links with this particular class should ...

javascriptjquerycssdialog

Understanding the Hierarchy of CSS and Bootstrap Styles

I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...

htmlcsstwitter-bootstrapbootstrap-4

Navigating an array to link values to anchor tags

I'm struggling with an array that contains image file names ["1352.jpg", "1353.jpg", "1354"]. My goal is to loop through this array and generate anchor links for each item separated by commas. I've attempted the following code snippet, but it&apo ...

javascriptreactjs

Accessing JS code from HTML is not possible in React

Attempting to create a list using React, I have utilized the module found here: https://github.com/pqx/react-ui-tree I am currently testing out the sample application provided in this link: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js ...

javascripthtmlreactjs

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

AngularJS: Modify Z-Index on Click Event

My current project involves a navigation bar with four items, each accompanied by an icon. These icons are positioned absolutely one behind the other and are loaded into the view from different templates within the same controller. I am attempting to dyna ...

htmlcssangularjs

As the screen size decreases, stacked Font Awesome icons seem to vanish

Currently, I'm designing a form that requires the user to select a color scheme by clicking on circle font awesome icons. These icons are implemented using Bootstrap and when clicked, a stacked font-awesome icon appears. However, I've encountered ...

htmlcssvue.jsbootstrap-4font-awesome

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

No data returned in AJAX response while trying to connect to a RESTful service

After creating a WCF REST service that returns a JSON response like {"Id":10,"Name":"Peter"}, I noticed that when trying to access it using the provided HTML5 code snippet, the status returned is always 0. Can anyone help me figure out what might be caus ...

ajaxhtmlrest

Verify the ng-if condition for a specific value and display an alternative option if the condition is not

When obtaining a response from the server in JSON format (containing color.mix and color.pure), it is passed directly to the template. In this template, I need to display a value if it exists or show another value if it does not. <span ng-if="color.mix ...

javascriptangularjs

When the onclick function is triggered, two or more characters will be displayed

Functionality: To input name and email, users must click on the virtual keyboard displayed on the screen. Characters entered will be shown in the input box. Implementation: The HTML keyboard interface and associated script have been developed successful ...

javascriptjqueryhtmlkeyboard