I have googled and searched and the examples are not that good, so wondered if anyone had a link to a good tutorial.
Basically I need a horizontal drop down that reveals the lower levels on click rather than rollover.
There needs to be three levels off the main button, so Button 1 on click reveals 4 Buttons then on click more buttons are revealed, and they all need to stay open until they go by clicking outside of the buttons.
Ive found something and tried it and it doesnt seem to work.
The parent button is still revealing the child button on rollover rather than on click.
#Drop_down_wrapper {
width:810px;
background: #333333;
height: 25px;
}
#Drop_down_wrapper ul > li {
float: left;
line-height: 25px;
}
#Drop_down_wrapper ul > li a{
padding: 9px 16px;
color: #F09909;
font-size: 15px;
font-weight: bold;
}
ul li a:hover {
background: #222222;
}
ul li ul {
display: none;
position: absolute;
border: 1px solid #000000;
border-top: none;
background: #333333;
}
ul li ul li {
float: none !important;
margin: 0 !important;
line-height: 30px;
height: 38px;
}
ul li ul li a {
color: green !important;
}
<script type="text/javascript">
$(document).ready(function(){
$('#Drop1').click(function () {
$("#sub-menu1").toggle('wiggle');
$('#sub-menu2').hide('wiggle');
$('#sub-menu3').hide('wiggle');
});
$('#Drop2').click(function () {
$("#sub-menu2").toggle('wiggle');
$('#sub-menu1').hide('wiggle');
$('#sub-menu3').hide('wiggle');
});
$('#Drop3').click(function () {
$("#sub-menu3").toggle('wiggle');
$('#sub-menu2').hide('wiggle');
$('#sub-menu1').hide('wiggle');
});
});
</script>
<script src="js/jquery-1.10.1.min.js"></script>
<div id="Drop_down_wrapper">
<ul>
<li><a href="#" id="Drop1" class="Current">Location</a>
<ul id="sub-menu1">
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
</ul>
</li>
<li><a href="#" id="Drop2">Information</a>
<ul id="sub-menu2">
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
</ul>
</li>
<li><div id="time"><?=date("d/m/Y H:i") ?></div></li>
</ul>
</div>
Work in progress - http://www.accend4web.co.uk/whitehart/index.php#
If you’re going to use Jquery, you need to include it before it is called.
Also use the error console and you won’t need to have others point out this kind of error.
Ah right thank you, wow what an oversight, but in honesty I did use the error box and I didnt pick it up that was the problem.
Thank you
This is a step on from the issue abovem but thought I would keep it in the same thread.
I’m trying to put a active styling to buttons that have been selected, and trying to integrate this effect into my code, but its not quite working, I think because its not connecting up properly I htink through the CSS, but it could be the jscript.
I have tried attaching it to the sub-menu1 id, but I would prefer it to be an action that is applied to any li in the nav.
<script type="text/javascript" charset="utf-8">
//<![CDATA[
jQuery(function() {
jQuery('#sub-menu1 a').each(function() {
if (jQuery(this).attr('href') === window.location.pathname) {
jQuery(this).addClass('current');
}
});
});
//]]>
</script>
<div id="Drop_down_wrapper">
<ul>
<li><a href="#" id="Drop1" class="Current">LOCATION</a>
<ul id="sub-menu1">
<li><a href="#" id="Drop2">Ward Block</a>
<ul id="sub-menu2">
<li><a href="#" id="Drop3">Level 2</a>
<ul id="sub-menu3">
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#" id="Drop3">Level 3</a>
<ul id="sub-menu4">
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 2&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 4</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 5</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 6</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 7</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 8</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 9</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 10</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 11</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
<li><a href="#">Level 12</a>
<ul>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Room">Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Plant Room">Plant Room</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Corridor">Corridor</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Stair Core">Stair Core</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Riser">Riser</a></li>
<li><a href="page2.php?top=Ward Block&middle=Level 4&bottom=Haki Stairs">Haki Stairs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" id="Drop2">Queen's Building/Welcome Centre</a>
</ul>
<li><a href="#" id="Drop2">INFORMATION</a></li>
<li><div id="time"><?=date("d/m/Y H:i") ?></div></li>
</ul>
</div>
CSS
a.current {border:1px #000 solid;}
Ok I have found another way of getting this working, but again (sorry) its making all links ‘active’ and putting the border around it, when basically I wanted to style the button when the button is selected, and not until then.
This is what I got now.
<script type="text/javascript" charset="utf-8">
function setActive() {
aObj = document.getElementById('Drop_down_wrapper').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
</script>
CSS
.active {border:1px #000 solid;}