DEVHIDE
Login Or Sign up

Dropdown menu from hover to onclick

3.3k Views Asked by At

How would I convert the following sub-navigation menu from hover to on-click with j-query? In the example I have added an active class and used j-query to display the sub-nav however it disappears after the user clicks it.

https://codepen.io/patriciaworth/pen/bGGMBow

I followed the instructions on this webpage to no avail.

how to change dropdown menu from hover to onclick

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Liive Real Estate</title>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            Liive
        </div>
        <div class="toggle">&#9776;</div>
        <div class="panel">
            <div class="links">
                <ul>
                  <li><a href="">Home</a></li>
                  <li>
                    <a href="">Property</a>
                    <ul>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="">Agents</a>
                    <ul>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                    </ul>
                  </li>
                  <li><a href="">Pages</a></li>
                  <li><a href="">Contact</a></li>
                </ul>
            </div>
            <div class="signup">
                <button>Signup</button>
            </div>
        </div>
    </nav>
</body>
</html>

SCSS

/*reset*/
*
{
    margin: 0;
    padding:0;
    list-style-type: none;
    border: none;
    text-decoration: none;
}
html
{
    width:100%;
    min-width: 320px;
    max-width: 1920px;
    margin: 0 auto;
    background: #ccc;
}

//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;

//fonts
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;

//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;

.panel
{
    display: block;
}

.navbar
{
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: $heading-font;
    padding:  0 20px;

    @media screen and (max-width: $medium)
    {
        display: block;
        padding: 0;
    }
    .logo
    {
        flex:1;
        text-align: left;
        font-size: 22px;
        color: $purple;
        font-weight: 500;

        @media screen and (max-width: $medium)
        {
            display: block;
            border-bottom: 1px solid $purple;
            text-align: left;
            padding: 20px;
        }
    }
    .toggle
    {
        display: none;

        @media screen and (max-width: $medium)
        {
            display: block;
            position: absolute;
            top: 20px;
            right:20px;
            font-family: $heading-font;
            color: #000;
            font-size: 18px;
            cursor: pointer;
        }
    }
    .panel
    {
        flex: 7;
        display: flex;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: $medium)
        {
            display: none;
        }

        .links
        {
            flex:6;
            text-align: center;
            font-size: 16px;
            line-height: 25px;
        }
    }

    ul 
    { 
        display: block;
        width: 100%; 

        @media screen and (max-width: $medium)
        {
            padding: 20px 0;
        }
    }
    li 
    {
        display: inline-block;
        @media screen and (max-width: $medium)
        {
            display: block;
        }
    }
    ul li a
    {
        transition: 0.5s;
        color: #000;
        padding: 20px 10px;
        display: block;
    text-decoration: none;

        @media screen and (max-width: $medium)
        {
            padding:5px 0;
        }
    }
    ul li a:hover
    {
        background: $purple;
        color: #fff;
    }
    ul li ul
    {
        width: 200px;
        padding: 10px 20px;
        box-sizing: border-box;
        background: #333;
        display: none;
        position: absolute;
        top: 65px;

        @media screen and (max-width: $medium)
        {
            position: relative;
            top:0;
            width: 100%;
        }
    }
    ul li ul li
    {
        display: block;
        text-align: left;
        @media screen and (max-width: $medium)
        {
            text-align: center;
        }
        a
        {
            font-size: 14px;
            padding: 0;
            color: #fff;
            background: transparent !important;
            &:hover
            {
                color: $purple;
                background: transparent !important;
            }
        }
    }

    ul li:hover ul
    {
        display: block;
    }
    ul li:hover a
    {
        background: $purple;
        color: #fff;
    }

  /*THIS DOES NOT WORK*/
    /*.active
    {
        display: block !important;
        a
        {
            background: $purple;
            color: #fff;
        }
    }*/

    .signup
    {
        flex:1;
        text-align: right;

        button
        {
            border: 1px solid $purple;
            padding: 10px 15px;
            background: transparent;
            font-size: 16px;
            transition: 0.5s;
            cursor: pointer;

            &:hover
            {
                background: $purple;
                color: #fff;
            }
        }

        @media screen and (max-width: $medium)
        {
            text-align: center;
            padding-bottom: 20px;
            display: block;
        }

    }

}

JS

$(document).ready(function(){
        $(".toggle").click(function(){
            $("nav .panel").slideToggle();
        });
        /*THIS DOES NOT WORK*/
        /*$("nav").on("click", "li", function(){
            $(this).children("ul").toggleClass("active");
            $("nav li").not(this).children("ul").removeClass("active");
        });*/
    });
javascript jquery html css jquery-mobile-navbar
Original Q&A
2

There are 2 best solutions below

5
Nidhin Joseph On BEST ANSWER

You can directly covert the hover class into an active class, and then on click, toggle the active class. Find the below snippet and view in full screen so that its not affected by the media-queries.

Additinally, you need to include href="#" or else it will reload the page.

ul li.active ul {
  display: block;
}

ul li.active a {
  background: $purple;
  color: #fff;
}


$(document).ready(function() {

  $(".toggle").click(function() {
    $("nav .panel").slideToggle();
  });

  $("nav").on("click", "li", function() {
    $('nav li.active').not(this).removeClass("active"); // remove previous selection
    $(this).toggleClass("active");
  });
});
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/*reset*/

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: none;
  text-decoration: none;
}

html {
  width: 100%;
  min-width: 320px;
  max-width: 1920px;
  margin: 0 auto;
  background: #ccc;
}

.panel {
  display: block;
}

.navbar {
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  padding: 0 20px;
  /*THIS DOES NOT WORK*/
  /*.active {
   display: block !important;
   a {
    background: $purple;
    color: #fff;
  }
 }
 */
}

@media screen and (max-width: 992px) {
  .navbar {
    display: block;
    padding: 0;
  }
}

.navbar .logo {
  flex: 1;
  text-align: left;
  font-size: 22px;
  color: #a491d3;
  font-weight: 500;
}

@media screen and (max-width: 992px) {
  .navbar .logo {
    display: block;
    border-bottom: 1px solid #a491d3;
    text-align: left;
    padding: 20px;
  }
}

.navbar .toggle {
  display: none;
}

@media screen and (max-width: 992px) {
  .navbar .toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Poppins', sans-serif;
    color: #000;
    font-size: 18px;
    cursor: pointer;
  }
}

.navbar .panel {
  flex: 7;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .navbar .panel {
    display: none;
  }
}

.navbar .panel .links {
  flex: 6;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
}

.navbar ul {
  display: block;
  width: 100%;
}

@media screen and (max-width: 992px) {
  .navbar ul {
    padding: 20px 0;
  }
}

.navbar li {
  display: inline-block;
}

@media screen and (max-width: 992px) {
  .navbar li {
    display: block;
  }
}

.navbar ul li a {
  transition: 0.5s;
  color: #000;
  padding: 20px 10px;
  display: block;
  text-decoration: none;
}

@media screen and (max-width: 992px) {
  .navbar ul li a {
    padding: 5px 0;
  }
}

.navbar ul li a:hover {
  background: #a491d3;
  color: #fff;
}

.navbar ul li ul {
  width: 200px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #333;
  display: none;
  position: absolute;
  top: 65px;
}

@media screen and (max-width: 992px) {
  .navbar ul li ul {
    position: relative;
    top: 0;
    width: 100%;
  }
}

.navbar ul li ul li {
  display: block;
  text-align: left;
}

@media screen and (max-width: 992px) {
  .navbar ul li ul li {
    text-align: center;
  }
}

.navbar ul li ul li a {
  font-size: 14px;
  padding: 0;
  color: #fff;
  background: transparent !important;
}

.navbar ul li ul li a:hover {
  color: #a491d3;
  background: transparent !important;
}

.navbar ul li.active ul {
  display: block;
}

.navbar ul li.active a {
  background: #a491d3;
  color: #fff;
}

.navbar .signup {
  flex: 1;
  text-align: right;
}

.navbar .signup button {
  border: 1px solid #a491d3;
  padding: 10px 15px;
  background: transparent;
  font-size: 16px;
  transition: 0.5s;
  cursor: pointer;
}

.navbar .signup button:hover {
  background: #a491d3;
  color: #fff;
}

@media screen and (max-width: 992px) {
  .navbar .signup {
    text-align: center;
    padding-bottom: 20px;
    display: block;
  }
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar">
  <div class="logo">
    Liive
  </div>
  <div class="toggle">&#9776;</div>
  <div class="panel">
    <div class="links">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Property</a>
          <ul>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Agents</a>
          <ul>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
          </ul>
        </li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="signup">
      <button>Signup</button>
    </div>
  </div>
</nav>

1
kamprasad On

You can search element like immediate siblings next to <a> tag which is <ul>:

$('a+ul').click()

or search all the items you can get one more deep:

$('a+ul>li').click()

+ immediate sibilin

> all children

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in JQUERY-MOBILE-NAVBAR

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.