Transforming Dropdown Menu Selection from Mouseover to Click

Question

Transforming Dropdown Menu Selection from Mouseover to Click

I have almost completed designing a website for my friend, which can be viewed at www.soundpie.org. However, he has requested to change the drop-down sections in the navigation menu so that they stay open on click instead of hover. I believe incorporating jQuery into the site is the solution. I attempted to follow a guide from this post (check link below), but I am having trouble configuring the jQuery.

Changing hover to click on menu

Any advice or suggestions on this matter would be greatly appreciated.

Below is the current HTML:

<body>

<span id="dummy"></span>

<div id="topnav" class="tnav">

 <ul class="tnav-lvl1-menu-tbar">
      <div class="tnav-lvl1-menu-body tnav-bg4">

<div id="logo1">
      <li class="tnav-style-1">
            <div class="grow img"> <a href="javascript:void(0);"><img src="images/icons/ai1.png" alt="flute"><span>HEAR</span></a></div>

<div class="tnav-play animated fadeInDown">

           <div id="services" class="lightstyle">
                <div class="mustard-bg">

                     <div class="tnav-showbox">                              

                         <div id="hear-content">

                         <h2>Hear:</h2>
                          <hr>
                          <div id="video-left">
                                <img src="images/als/ail1.jpg">
                          </div>

And here is the CSS:

.tnav-lvl1-menu li:hover .tnav-play, .tnav-lvl1-menu li:hover .tnav-play-2, .tnav-     lvl1-menu li:hover .tnav-play-3,
.tnav-lvl1-menu-tbar li:hover .tnav-play, .tnav-lvl1-menu-tbar li:hover .tnav-play-2,        .tnav-lvl1-menu-tbar li:hover .tnav-play-3,
.tnav-lvl1-menu li:hover .tnav-play-bottom, .tnav-lvl1-menu li:hover .tnav-play-2-bottom,  .tnav-lvl1-menu li:hover .tnav-play-3-bottom,
.tnav-lvl1-menu-tbar li:hover .tnav-play-bottom, .tnav-lvl1-menu-tbar li:hover .tnav-play-2-bottom, .tnav-lvl1-menu-tbar li:hover .tnav-play-3-bottom {
display:block;

jquery css menu hover click

Answer 1

Answer №1

Can achieve something similar to this.

<style>
    /*
        Standard navigation styles are used here.
        (display, position, floats, etc.)
    */
    nav li {
        position: relative;
    }
    nav li > input[type=checkbox] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
        z-index: 1; /* Places checkbox above 'a' blocking 'a' click. */
    }
    nav li > input[type=checkbox]:checked + ul {
        /*
            May have different display styles,
            but likely similar to this:
        */
        left: 0;
    }
</style>

<nav>
    <ul>
        <li>
            <a href="#">Click</a>
            <input type="checkbox" />
            <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

This is an earlier version of my navigation tool. Check it out here. The "More" item only toggles when clicked, whereas the others toggle on hover.

For more information, visit this link.

Answer 2

Can achieve something similar to this.

<style>
    /*
        Standard navigation styles are used here.
        (display, position, floats, etc.)
    */
    nav li {
        position: relative;
    }
    nav li > input[type=checkbox] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
        z-index: 1; /* Places checkbox above 'a' blocking 'a' click. */
    }
    nav li > input[type=checkbox]:checked + ul {
        /*
            May have different display styles,
            but likely similar to this:
        */
        left: 0;
    }
</style>

<nav>
    <ul>
        <li>
            <a href="#">Click</a>
            <input type="checkbox" />
            <ul>
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

This is an earlier version of my navigation tool. Check it out here. The "More" item only toggles when clicked, whereas the others toggle on hover.

For more information, visit this link.

Transforming Dropdown Menu Selection from Mouseover to Click

Answer №1

Similar questions

Experiencing excessive white space at the bottom on Bootstrap 5 for larger devices

The increasing number of ajax requests is causing the page to become sluggish and unresponsive

What is the best way to decrease a value to match the maximum value specified in the input field?

Is there a way to transition the movement of a div seamlessly without relying on the .animate() method

Adjusting the height of the Tinymce Editor in React Grid Layout after the initial initialization

What are some solutions to the Gmail CSS image display issue?

Customize and format the text of options in a select element using the jQuery Chosen plugin

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

rearrange the order of div elements using jquery

How can I retrieve values displayed on the screen when waiting for an ajax response?

Tips for extracting information from a JSON file using $routeParams in AngularJS

Error message '[object Error]' is being returned by jQuery ajax

Using CakePHP in combination with the ajaxForm plugin allows for dynamic loading of specific parts

Is there a way to manage form submission while inside an ajax callback function?

Extracting elements from a dynamic website within the <script> tag using the libraries BeautifulSoup and Selenium

Do you have any suggestions on how to implement AJAX functionality on a website like this?

Achieving Center Alignment for a Div Using HTML and CSS

Eliminate any undefined data in the popup map of Javascript

Updating filenames within a WordPress directory using jQuery or JavaScript

Tips for enforcing validation rules at the class level using Angular's version of jQuery Validate