Steps to create a clickable drop-down arrow with a label

I've designed a vertical navigation accordion menu that allows users to hover and click on any title (label) to expand a sub-menu.

However, I'm facing an issue where my drop-down arrow is not clickable, unlike the rest of the label which works fine.

How can I make my "arrow" clickable so it functions just like the rest of the label?

Check out the jsfiddle here

CSS:

/*Global*/

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

/*Functionalty*/

.multi-level,
.item ul,
.nav input[type="checkbox"] {
  display: none;
}

#menu:checked~.multi-level,
.item input:checked~ul {
  display: block;
}

/*Arrow*/

.arrow {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  float: left;
  margin: 9px 0.5em 0 2em;
}

.item input+.arrow {
  transform: rotate(-90deg);
  transition: 0.1s;
}

.item input:checked+.arrow {
  transform: rotate(0deg);
  transition: 0.1s;
}

img {
  z-index: 1;
  position: relative;
}

/*Styles*/

label:hover {
  cursor: pointer;
  background-color: #f2f2f2;
  position: relative;
}

li:hover {
  background-color: #f2f2f2;
}

label {
  width: 100%;
  display: block;
}

.nav {
  width: 100%;
  background-color: white;
  overflow-x: hidden;
  /*border-bottom: 1px solid #CFD8DC;*/
}

/*#nav-icon {
    font-size: 28px;
    line-height: 50px;
    padding-left: 1em;
    color: white;
    background-color: #F44336;
}*/

.nav ul,
.nav li,
label {
  line-height: 30px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
  width: 100%;
}

.item ul {
  padding: 0 0.25em;
}

.nav li a {
  line-height: 30px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
}

.item {
  margin: 0 0 0 -1.5em;
}

.sub-item {
  padding: 0 0m;
}

HTML:

<div class="nav">
  <input type="checkbox" id="menu" checked />
  <label for="menu"></label>

  <div class="multi-level">
    <div class="item">
      <input type="checkbox" id="A" />
      <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="A">Category One</label>
      <ul>
        <li><a href="#">Sub-Category One</a></li>
        <li><a href="#">Sub-Category Two</a></li>
        <li><a href="#">Sub-Category Three</a></li>
      </ul>
    </div>
    <div class="item">
      <input type="checkbox" id="B" />
      <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="B">Category Two</label>
      <ul>
        <li><a href="#">Sub-Category One</a></li>
        <li>
          <div class="sub-item">
            <input type="checkbox" id="B-A" />
            <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="B-A">Sub-Category Two</label>

            <ul>
              <li><a href="#">Sub-Sub-Category-1</a></li>
              <li><a href="#">Sub-Sub-Category-2</a></li>
              <li><a href="#">Sub-Sub-Category-3</a></li>
              <li><a href="#">Sub-Sub-Category-4</a></li>
              <li><a href="#">Sub-Sub-Category-5</a></li>
              <li><a href="#">Sub-Sub-Category-6</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="item">
      <input type="checkbox" id="C" />
      <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="C">Category Three</label>
      <ul>
        <li><a href="#">Sub-Category One</a></li>
        <li><a href="#">Sub-Category Two</a></li>
        <li><a href="#">Sub-Category Three</a></li>
      </ul>
    </div>
    <div class="item">
      <input type="checkbox" id="D" />
      <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="D">Category Four</label>
      <ul>
        <li><a href="#">Sub-Category One</a></li>
        <li><a href="#">Sub-Category Two</a></li>
        <li><a href="#">Sub-Category Three</a></li>
      </ul>
    </div>

  </div>

</div>
htmlcssnavigationhoverclickable

Answer №1

You can utilize the :before pseudo-element to substitute the img tag and ensure that when clicked, it triggers the action associated with the label instead of the img

/*Custom Styles*/

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

/*Functionality*/

.multi-level,
.item ul,
.nav input[type="checkbox"] {
  display: none;
}

#menu:checked~.multi-level,
.item input:checked~ul {
  display: block;
}

/*Arrow Design*/

.arrow {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  float: left;
  margin: 9px 0.5em 0 2em;
}

/*UI Design*/

label:hover {
  cursor: pointer;
  background-color: #f2f2f2;
  position: relative;
}

li:hover {
  background-color: #f2f2f2;
}

label {
  width: 100%;
  display: block;
  position: relative;
}

.nav {
  width: 100%;
  background-color: white;
  overflow-x: hidden;
}

.nav ul,
.nav li,
label {
  line-height: 30px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
  width: 100%;
}

.item ul {
  padding: 0 0.25em;
}

.nav li a {
  line-height: 30px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
}

.item {
  margin: 0 0 0 -1.5em;
}

.item label:before {
  content: '';
  background: url(https://png.icons8.com/material/50/000000/expand-arrow.png);
  width: 10px;
  background-size: 100%;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 13px;
  transform: rotate(-90deg);
}

.item input:checked +label:before {
  transform: rotate(0);
}

.sub-item {
  padding: 0 0m;
}
<div class="nav">
<input type="checkbox" id="menu" checked />
<label for="menu"></label>
  
<div class="multi-level">
  <div class="item">
<input type="checkbox" id="A" />
<label for="A">Category One</label>
<ul>
  <li><a href="#">Sub-Category One</a></li>
  <li><a href="#">Sub-Category Two</a></li>
  <li><a href="#">Sub-Category Three</a></li>
</ul>
  </div>
  <div class="item">
...

Visit this link to see the code in action

Answer №2

If you're looking for a solution to make the arrow clickable without inserting an image before each label, I would suggest using a :before selector on the label element. This approach not only resolves the clickability issue but also keeps your HTML code more DRY.


    <div class="nav">
 <input type="checkbox" id="menu" checked />
 <label for="menu"></label>

 <div class="multi-level">
   <div class="item">
  <input type="checkbox" id="A" />
  <label for="A">Category One</label>
  <ul>
    <li><a href="#">Sub-Category One</a></li>
    <li><a href="#">Sub-Category Two</a></li>
    <li><a href="#">Sub-Category Three</a></li>
  </ul>
</div>
<div class="item">
  <input type="checkbox" id="B" />
  <label for="B">Category Two</label>
  <ul>
    <li><a href="#">Sub-Category One</a></li>
    <li>
      <div class="sub-item">
        <input type="checkbox" id="B-A" />
        <label for="B-A">Sub-Category Two</label>

        <ul>
          <li><a href="#">Sub-Sub-Category-1</a></li>
          <li><a href="#">Sub-Sub-Category-2</a></li>
          <li><a href="#">Sub-Sub-Category-3</a></li>
          <li><a href="#">Sub-Sub-Category-4</a></li>
          <li><a href="#">Sub-Sub-Category-5</a></li>
          <li><a href="#">Sub-Sub-Category-6</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<div class="item">
  <input type="checkbox" id="C" />
  <label for="C">Category Three</label>
  <ul>
    <li><a href="#">Sub-Category One</a></li>
    <li><a href="#">Sub-Category Two</a></li>
    <li><a href="#">Sub-Category Three</a></li>
  </ul>
</div>
<div class="item">
  <input type="checkbox" id="D" />
  <label for="D">Category Four</label>
  <ul>
    <li><a href="#">Sub-Category One</a></li>
    <li><a href="#">Sub-Category Two</a></li>
    <li><a href="#">Sub-Category Three</a></li>
  </ul>
</div>


.item label {
  position: relative;
  width: 100%;
  display: block;
  padding-left: 2em;
}

.item label:before {
  position: absolute;
  content:'';
  left: 0;
  top: 0;
  width: 2em;
  height: 2em;
  background-image: url(https://png.icons8.com/material/50/000000/expand-arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  transform: rotate(-90deg);
  transition: 0.1s;
}

label:hover {
  cursor: pointer;
  background-color: #f2f2f2;
  position: relative;
}
.item input:checked+label:before {
transform: rotate(0deg);
  transition: 0.1s;

Explore the live example on this link

Answer №3

Consider placing an image within the <label> tag by adjusting some CSS and HTML code. Please refer to the modifications below. CSS

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

/*Functionalty*/

.multi-level,
.item ul,
.nav input[type="checkbox"] {
  display: none;
}

#menu:checked~.multi-level,
.item input:checked~ul {
  display: block;
}

/*Arrow*/

.arrow {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  float: left;
  margin: 9px 0.5em 0 2em;
}

.item .arrow {
  transform: rotate(-90deg);
  transition: 0.1s;
}

.item input:checked+.arrow {
  transform: rotate(0deg);
  transition: 0.1s;
}

img {
  z-index: 1;
  position: relative;
}

/*Styles*/

label:hover {
  cursor: pointer;
  background-color: #f2f2f2;
  position: relative;
}

li:hover {
  background-color: #f2f2f2;
}

label {
  width: 100%;
  display: block;
}

.nav {
  width: 100%;
  background-color: white;
  overflow-x: hidden;
}

...

.nav ul,
.nav li,
label {
  line-height: 30px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
  width: 100%;
}
label {
  padding: 0;
}
.item ul {
  padding: 0 0.25em;
}

.nav li a {
  line-height: 30px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
}

.item {
  margin: 0 0 0 -1.5em;
}

.sub-item {
  padding: 0 0m;
}

HTML

<div class="nav">
    <input type="checkbox" id="menu" checked />
    <label for="menu"></label>
    <div class="multi-level">
        <div class="item">
            <input type="checkbox" id="A" />
            <label for="A"> <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"> Category One</label>
            <ul>
                <li><a href="#">Sub-Category One</a></li>
                <li><a href="#">Sub-Category Two</a></li>
                <li><a href="#">Sub-Category Three</a></li>
            </ul>
        </div>
        <div class="item">
            <input type="checkbox" id="B" />
            <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="B">Category Two</label>
            <ul>
                <li><a href="#">Sub-Category One</a></li>
                <li>
                    <div class="sub-item">
                        <input type="checkbox" id="B-A" />
                        <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="B-A">Sub-Category Two</label>
                        <ul>
                            <li><a href="#">Sub-Sub-Category-1</a></li>
                            <li><a href="#">Sub-Sub-Category-2</a></li>
                            <li><a href="#">Sub-Sub-Category-3</a></li>
                            <li><a href="#">Sub-Sub-Category-4</a></li>
                            <li><a href="#">Sub-Sub-Category-5</a></li>
                            <li><a href="#">Sub-Sub-Category-6</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="item">
            <input type="checkbox" id="C" />
            <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="C">Category Three</label>
            <ul>
                <li><a href="#">Sub-Category One</a></li>
                <li><a href="#">Sub-Category Two</a></li>
                <li><a href="#">Sub-Category Three</a></li>
            </ul>
        </div>
        <div class="item">
            <input type="checkbox" id="D" />
            <img src="https://png.icons8.com/material/50/000000/expand-arrow.png" class="arrow"><label for="D">Category Four</label>
            <ul>
                <li><a href="#">Sub-Category One</a></li>
                <li><a href="#">Sub-Category Two</a></li>
                <li><a href="#">Sub-Category Three</a></li>
            </ul>
        </div>
    </div>
</div>

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

Disabling hover effects in Chart.js: A step-by-step guide

Is there a way to disable hover effects, hover options, and hover links on a chart using chart.js? Here is the code I have for setting up a pie chart: HTML.. <div id="canvas-holder" style="width:90%;"> <canvas id="chart-area" /> </div ...

javascriptjqueryhtmlchart.js

Utilizing flexbox for dynamic width adjustment with flex-grow functionality

Currently, I am in the process of configuring a menu bar using this particular template I have been attempting to achieve this layout utilizing FlexBox, but it appears that there is an issue. Here is the HTML code: <nav> <ul> < ...

htmlcssflexbox

The functionality of toggling Jquery with the datepicker is malfunctioning

I am in the process of creating a calendar input field that includes a datepicker for each input box. HTML <select id="select"> <option value="Type">Type</option> <option value="Range">Range</option> <option val ...

phpjqueryhtmldatepicker

Create multiple buttons with uniform width by adjusting padding in CSS

I recently attempted to create buttons using CSS and padding. Here is the HTML code for the buttons: <link rel="stylesheet" type="text/css" href="css/style-login.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.0.3.css" /& ...

htmlcssbutton

Simple Servlet Program

//VoterServlet.java package com.nt.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; public class VoterServlet extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws S ...

html

The "click" event is only effective for a single use

I am looking for a way to trigger the click event more than once in my project. I attempted using "live" but it didn't work as expected. There are 2 other similar scripts in this Django project. If you have any suggestions on improving this project, p ...

javascriptjqueryhtmldjango

Is there a way to change the CSS of a sibling element when hovering over it

Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS? .red-row:hover { background-color: red; } ...

htmlcss

Using @font-face to include several files for different font-weight variations

I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...

cssfontsfont-face

Tips for extracting the content from a <span> tag within an iframe

In my setup, I have two iframes labeled Test1 and Test2. Each iframe contains the following code snippet with the goal of retrieving the value '24' from it. <div class="Test-font"> <h6 class="Test_something d-inline">Available MQ ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

flash beneath the div tag

There seems to be an issue with the orange box and navigation showing up behind the flash on our main site. Any suggestions on how to resolve this? This problem is specifically occurring in Google Chrome. -- I've tried adding a certain parameter, bu ...

cssflash

Navigate through the contents of a table featuring intricate colspan and rowspan elements, while keeping both headers and left columns in

I am facing a challenge with a dynamically generated table that has complex structure including colspans and rowspans. My goal is to fix the headers and, if possible, even lock the first few rows on the left side while allowing the content of the table to ...

htmlcssscrollhtml-tablemootools

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

javascriptjqueryhtmlcss

onpageshow event behaves as expected exclusively on webkit browsers (triggers function solely when visible on the screen)

I am inserting an HTML file using an object tag. The encompassing div of the object tag is hidden with a display:none property. However, I encounter an issue where the onpageshow event that I placed on the body tag of the HTML object behaves differently a ...

javascripthtmleventswebkitvisible

Having trouble accessing the input class with jQuery

When I click the "Reset To Default Settings" button in my form, I want to clear the default colors in my 4 color pickers. Each of them has an input type text field with the class anyicon-form-colorpicker. To achieve this, I locate the <a> tag and use ...

javascriptjqueryhtmlclass

Python requests no longer retrieves HTML content

I am trying to extract a name from a public Linkedin URL using Python requests (2.7). Previously, the code was functioning correctly. import requests from bs4 import BeautifulSoup url = "https://www.linkedin.com/in/linustorvalds" html = requests.get(url ...

pythonhtmlbeautifulsouppython-requests

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

Within the configuration file conf.py for Sphinx, I have specified the following: html_css_files = ['css/custom.css'] html_js_files = ['js/custom.js'] However, any alterations made to custom.js or custom.css do not immediately appear i ...

javascriptcsscachingpython-sphinxbrowser-cache

What is the best way to update a canvas chart when the side menu is hidden?

I am facing an issue with the layout of my webpage, which includes a left side menu and a canvas chart. The left side menu occupies the first 155 pixels of the width, leaving the rest for the canvas chart set to a width of 100%. However, when I close the ...

javascripthtmlcanvas

The webpage loaded through ajax is not rendering correctly

One of the challenges I'm facing is getting a JavaScript script to load an HTML page into a specific div element on another HTML page: The page that's being loaded, startScreen.html, looks like this: <!DOCTYPE html> <html lang="en ...

javascripthtmlajax

Retrieve information from individual XML nodes in a parsed string

When making an Ajax call to retrieve XML data from a different domain using a PHP proxy to bypass cross-origin restrictions, I am unable to extract the values from the XML nodes and display them in my HTML tags. Despite no errors showing up in the browser ...

javascriptphphtmlajaxxml

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields ...

javascripthtmlcss