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

Attempting to align the text perfectly while also adding a subtle drop shadow effect

Trying to center text with a drop shadow without using the CSS property. I'm utilizing span and :before for cross-browser compatibility. Here is what it currently looks like: The HTML: <h3 title="Say hello to Stack Overflow"><span>Say ...

htmlcss

Bootstrap Toggle Button with Dropdown Menu

I have a button-group with font awesome icons and a dropdown on one of them, as illustrated in the example below. I am trying to toggle the button status, but for some reason, the 'active' class is automatically removed on mouseout. It seems to ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js

Unable to trigger JavaScript function from ASP.NET MVC HTML view

I am encountering an issue with my ASP.NET MVC project where I am attempting to call a JavaScript function to record a user's selection from a listbox. Despite duplicating the JavaScript function in multiple places, it is still not being found. What c ...

javascripthtmlasp.net-mvc

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...

htmlcssformstwitter-bootstrapvalidation

Troubleshooting the issue with utilizing the ng-repeat directive to loop through images in Angular JS

Embarking on my initial website development journey with Java and Spring Boot, I've hit a stumbling block in the front-end realm. Being a newbie, I'm struggling to identify and resolve the issue at hand. Problem title: How do I ...

javascripthtmlangularjs

What is the best way to choose all <pre> tags that have just one line of content?

$('pre:contains("\n")') will target all <pre> elements that have one or more newlines. Is there a way to specifically select <pre> tags with no newline or only one at the end? Any shortcuts available? match <pre>A< ...

jquerycss

Ar.js results in objects experiencing deformation or modification when manipulated

Recently, I started experimenting with Ar.js and encountered an issue where the objects displayed on the screen seemed distorted. To illustrate this problem, let me share a basic A-Frame example featuring a perfectly round sphere: <!DOCTYPE> <html ...

javascripthtmlthree.jsaframear.js

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

javascriptjqueryhtmlajaxforms

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform& ...

javascriptjquerycssfirefoxscroll

Verifying password authenticity using AngularJS

Hi there! I'm currently troubleshooting some code that is meant to validate passwords with specific requirements, such as having a certain length and containing special characters. I've managed to set the correct password length, but I'm en ...

htmlangularjs

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

Is it possible to create a Bootstrap 5 carousel with six items displaying at a time instead of three? I tried changing the value in the JS code, but it didn't work. Can you correct my code so that it displays six items at a time and can be variable la ...

javascripthtmljquerybootstrap-5

Forced line break at particular point in text

I would love to implement a line break right before the "+" character, either using css styling or through a different method. Is this task achievable? #myDiv{ width: 80% } #myP{ c ...

javascriptjquerycss

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

javascriptjqueryhtmlcss

Sending JavaScript functions to PHP files via Ajax

My Current Project: I am currently developing a script that provides users with choices and generates new options based on their selections. To achieve this, I have created two scripts - one for the HTML structure of my page and another for fetching serve ...

javascriptphpjqueryhtmlajax

The issue with VS Code is that it is running the wrong file instead of

Whenever I try to run my Python file, it keeps opening the previous HTML file instead. Despite clicking "run" on my Python file in VS Code, the terminal is not executing (as it normally does), and instead VS Code continues to open the previously opened HT ...

pythonhtmlvisual-studio-codeide

Safari Mobile not rendering absolute positioning correctly

Our website www.anahatainternational.org has a functioning search section that is displaying correctly on Firefox, Chrome, and Safari browsers. However, we have encountered an issue with the mobile version of Safari where the search section appears in the ...

cssmobile-safari

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

javascriptjqueryhtmlcssjquery-mobile

Can someone assist me in completing a Vertical Dots Navigation feature that activates on scroll?

I'm struggling to create a vertical dots navigation that dynamically adds the "active" class based on the section currently in view while scrolling. For example, if you are on the first section, the first dot should be white and the rest transparent. ...

jqueryhtmlcss

Is there a way to create an HTML popup that automatically opens a link and an image file side by side

Can a popup code be created to automatically open both a link and an image side by side? ...

htmlimagehyperlinkpopup