jquery - How to make the menu is clickable only if certain condition is met? -
how make menu clickable or dropable when condition met? in case want menu clickable or dropable when button 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 {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 {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>
one solution use additional class rule hover(for dropdown), , add class ul when button clicked.
for click handlers also, can same, see whether 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 { 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 { 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>
Comments
Post a Comment