CODEWITHSUNDEEP
jqueryhtml
Shafiq Jelani
Shafiq Jelani

Reputation: 27

How to make the menu is clickable only if certain condition is met?

How to make the menu clickable or dropable when certain condition met? in this case i want the menu only clickable or dropable when the button is clicked

ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
    white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="try.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="drop-nav">
    <li><a href="#">Content Management</a>
        <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">Concrete 5</a></li>
        </ul>
    </li>
</ul><br><br><br>
<button>Click me</button>
</body>
</html>

Upvotes: 1

Views: 105

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

One solution is to use an additional class rule for the hover(for dropdown), and add the class to the ul when the button is clicked.

For the click handlers also, you can do the same, to see whether the ul has teh clicked class

$('#clickme').click(function(){
  $('#drop-nav').addClass('clicked')
})
ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  display: block;
  position: relative;
  float: left;
  border: 1px solid #000
}
li ul {
  display: none;
}
ul li a {
  display: block;
  background: #000;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
#drop-nav.clicked li a:hover {
  background: #f00;
}
#drop-nav.clicked li:hover ul {
  display: block;
  position: absolute;
}
#drop-nav.clicked li:hover li {
  float: none;
}
#drop-nav.clicked li:hover a {
  background: #f00;
}
#drop-nav.clicked li:hover li a:hover {
  background: #000;
}
#drop-nav.clicked  li ul li {
  border-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="drop-nav">
    <li><a href="#">Content Management</a>
        <ul>
            <li><a href="#">Joomla</a></li>
            <li><a href="#">Drupal</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">Concrete 5</a></li>
        </ul>
    </li>
</ul><br><br><br>
<button id="clickme">Click me</button>

Upvotes: 2

Related Questions