Implementing JavaScript functionality with CSS and HTML on a menu

I'm experiencing issues with my website's menu functionality. Currently, the submenu dropdown works fine, but the main menu is not functional. How can I enable it on the main menu as well?

document.addEventListener('click', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  if (target.parentElement.className.indexOf('has-submenu') > -1) {
    e.target.classList.toggle('open');
  }
}, false);
#menu {
  background: #343434;
  color: #eee;
  height: 35px;
  border-bottom: 4px solid #eeeded
}

#menu ul,
#menu li {
  margin: 0 0;
  padding: 0 0;
  list-style: none
}

#menu ul {
  height: 35px
}

#menu li {
  float: left;
  display: inline;
  position: relative;
  font: bold 12px Arial;
  text-shadow: 0 -1px 0 #000;
  border-right: 1px solid #444;
  border-left: 1px solid #111;
  text-transform: uppercase
}

#menu li:first-child {
  border-left: none
}

#menu a {
  display: block;
  line-height: 35px;
  padding: 0 14px;
  text-decoration: none;
  color: #eee;
}

#menu li:hover > a,
#menu li a:hover {
  background: #111
}

#menu input {
  display: none;
  margin: 0 0;
  padding: 0 0;
  width: 80px;
  height: 35px;
  opacity: 0;
  cursor: pointer
}

#menu label {
  font: bold 30px Arial;
  display: none;
  width: 35px;
  height: 36px;
  line-height: 36px;
  text-align: center
}

#menu label span {
  font-size: 12px;
  position: absolute;
  left: 35px
}

#menu ul.menus {
  height: auto;
  width: 180px;
  background: #111;
  position: absolute;
  z-index: 99;
  display: none;
  border: 0;
}

#menu ul.menus li {
  display: block;
  width: 100%;
  font: 12px Arial;
  text-transform: none;
}

#menu li:hover ul.menus {
  display: block
}

#menu a.home {
  background: #c00;
}

#menu a.prett {
  padding: 0 27px 0 14px
}

#menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px
}

#menu a.prett.open::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
  position: absolute;
  top: 9px;
  right: 9px
}

#menu ul.menus a:hover {
  background: #333;
}

#menu ul.menus .submenu {
  display: none;
  position: absolute;
  left: 180px;
  background: #111;
  top: 0;
  width: 180px;
}

#menu ul.menus .submenu li {
  background: #111;
}

#menu ul.menus .has-submenu a.open ~ .submenu {
  display: block;
}
<nav>
  <ul id='menu'>
    <li><a class='home' href='/'>Home</a></li>
    <li><a class='prett' href='#' title='Menu'>Menu</a>
      <ul class='menus'>
        <li class='has-submenu'><a class='prett' href='#' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
          <ul class='submenu'>
            <li><a href="#" title="Sub Menu">Sub Menu</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
          </ul>
        </li>
        <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
        <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Fiddle: http://jsfiddle.net/thepio/pn0ym10e/2/

javascripthtmlcss

Answer №1

Below is a functional demonstration. Just intercept click events for elements with the class has-submenu and toggle classes based on that.

document.addEventListener('click', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  if (target.parentElement && target.parentElement.className.indexOf('has-submenu') > -1) {
    e.target.parentElement.classList.toggle('open');
  }
}, false);
#menu {
  background: #343434;
  color: #eee;
  height: 35px;
  border-bottom: 4px solid #eeeded
}

#menu ul,
#menu li {
  margin: 0 0;
  padding: 0 0;
  list-style: none
}

#menu ul {
  height: 35px
}

#menu li {
  float: left;
  display: inline;
  position: relative;
  font: bold 12px Arial;
  text-shadow: 0 -1px 0 #000;
  border-right: 1px solid #444;
  border-left: 1px solid #111;
  text-transform: uppercase
}

#menu li:first-child {
  border-left: none
}

#menu a {
  display: block;
  line-height: 35px;
  padding: 0 14px;
  text-decoration: none;
  color: #eee;
}

#menu li:hover > a,
#menu li a:hover {
  background: #111
}

#menu input {
  display: none;
  margin: 0 0;
  padding: 0 0;
  width: 80px;
  height: 35px;
  opacity: 0;
  cursor: pointer
}

#menu label {
  font: bold 30px Arial;
  display: none;
  width: 35px;
  height: 36px;
  line-height: 36px;
  text-align: center
}

#menu label span {
  font-size: 12px;
  position: absolute;
  left: 35px
}

#menu ul.submenu {
  height: auto;
  width: 180px;
  background: #111;
  position: absolute;
  z-index: 99;
  display: none;
  border: 0;
}

#menu ul.submenu li {
  display: block;
  width: 100%;
  font: 12px Arial;
  text-transform: none;
}

#menu a.home {
  background: #c00;
}

#menu a.prett {
  padding: 0 27px 0 14px
}

#menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px
}

#menu .has-submenu.open > a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
  position: absolute;
  top: 9px;
  right: 9px
}

#menu ul a:hover {
  background: #333;
}

#menu ul .submenu {
  display: none;
  position: absolute;
  left: 180px;
  background: #111;
  top: 0;
  width: 180px;
}

#menu ul.menus .submenu li {
  background: #111;
}

#menu li.has-submenu.open > .submenu {
  display: block;
}
<nav>
  <ul id='menu'>
    <li><a class='home' href='/'>Home</a></li>
    <li class='has-submenu'><a class='prett' href='#' title='Menu'>Menu</a>
      <ul class='submenu'>
        <li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
          <ul class='submenu'>
            <li><a href="#" title="Sub Menu">Sub Menu</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
          </ul>
        </li>
        <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
        <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

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

In Angular 5, you can easily prevent interaction with a related button by disabling it when the corresponding reactive

I recently encountered a situation where I needed to implement a reactive form in a component. It looked something like this... form component.html <form [formGroup]="form" class="do-form"> <div formGroupName="dot"> <div class ...

javascriptangulartypescriptangular5

Is there a way for a DOMWindow popup to automatically resize to fit its

Currently exploring JQuery and learning on the fly, I'm wondering if there's a method to automatically adjust the size of a DOM window based on its content? I've successfully modified the parameters to accept % width and height instead of p ...

javascriptjqueryhtmlbrowserpopup

Monitor the execution of JavaScript callbacks without the need for layering functions

Currently, I am developing a function that involves multiple database calls and needs to store their results in an array before triggering a callback. Let me share some pseudocode for better understanding: function getData (array, callback) { var resu ...

javascriptnode.jscallbackclosures

Adjusting the height of a table column to accommodate lengthy text without disrupting the layout of adjacent columns

I am encountering an issue while creating an invoice using an HTML table. The problem arises when the customer address value is too long, causing the sold by column to shift downwards. I need a way to break the customer address value when it reaches the ma ...

htmlcss

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment

Designing Interactive Interfaces using React Components for Dynamic Forms

Is there a way to implement dynamic forms using React Components? For instance, I have a form displayed in the image below: How do I structure this as a React component? How can I incorporate interactivity into this component? For example, when the "+ A ...

htmlcsstwitter-bootstrapreactjs

The upper 50% is malfunctioning because the parent height is set to auto

Having a bit of trouble with vertically centering a child div within its parent. I've been using this mixin: @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); ...

htmlcss

Tips for keeping a specific key value pair as the final entry in a Typescript Object

My goal is to construct a Typescript Object that has a specific element with the key 'NONE' always positioned at the end. This arrangement is crucial for displaying the object in my HTML page with this value appearing last. I am seeking an implem ...

javascriptangulartypescriptobjectkey-value

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

javascripthtmlcssvue.js

Addressing React Native Rendering Problems

I'm currently working on a weather application and facing some challenges with rendering the forecast. I'm uncertain whether it's related to the styling. I've tested the API call through the browser and encountered no errors in Android ...

javascriptandroidreact-native

How come my object is iterating from last to first in the for loop?

I need help understanding arrays. Here is my data: And here is my for loop: for (var data in statInfo["segment"][0]) { console.log(data) } After running the code, I got this result: The printed data is: segment5 segment4 segment3 segment2 se ...

javascriptarrays

The debate between classes and data attributes in terms of auto field initialization

A Brief Background In the realm of javascript/jQuery, I've crafted a method that traverses through various fields and configures them based on their type - be it dropdowns, autocomplete, or text fields... The motivation behind this is my personalize ...

javascriptjqueryhtmlcustom-data-attributesinemacula

Using AJAX to Query a PHP Database

Currently, I am implementing an AJAX call from the YouTube player JavaScript to a PHP page that contains various functions, mainly involving database inserts. In my PHP code, I use a case statement to determine which function is being called based on the d ...

javascriptphpajax

Utilizing a single delete function for a post request in jQuery or a PHP request

Seeking guidance on how to achieve a specific task. I have a controller that loads a view containing a table listing pages from my database. Each row in the table has an icon that, when clicked, performs one of two actions. If the user does not have javas ...

phpjavascriptjqueryjsoncodeigniter

The positioning of the Kendo UI window is off-center

I have encountered a problem with the alignment of the Kendo Window. There is a simple fiddle available to demonstrate this issue. Despite having ample space for the Kendo window to show without triggering the browser's vertical scroll bar, the cente ...

javascriptkendo-uikendo-window

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

css

A mysterious issue arose while trying to retrieve the script (Service Worker)

After disconnecting from the internet, my service worker is generating the following error: (unknown) #3016 An unknown error occurred when fetching the script This is what my service worker code looks like: var version = 'v1' this.addEventLis ...

javascriptmanifestservice-workeroffline-cachingprogressive-web-apps

Tips for setting up Craigslist email forwarding through Node.js (receiving emails to a dynamically generated email address and redirecting them)

After extensive searching, I only came across this Stack Overflow post about Email Forwarding like Craigslist in Rails: Email Forwarding like Craigslist - Rails I spent a significant amount of time googling, but couldn't find any solutions using Node ...

javascriptnode.jsemailcraigslist

Creating a Full-Width Form Using Bootstrap

I need help aligning 3 form boxes side by side with a total width of 100%. I want to be able to specify the width of each box, or have the last two boxes set to their default size while the first box fills up the remaining space. Here is my current code: ...

htmltwitter-bootstraptwitter-bootstrap-3

Are asynchronous promises thenable for chaining?

Can someone explain to me how asynchronous chaining works with thenable? I am new to using promises in Node.js and I am a bit confused about the concept. In the code example provided below, it seems like the promise returned from the previous Promise.the ...

javascriptnode.jspromise