Page 1 of 1
Dynamic Sub-Naviation Bar on Mouseover
Posted: Thu Sep 23, 2004 10:57 am
by dardsemail
Hi,
I'm trying to build a sub-navigation bar that will appear on a mouseover. Not being a javascript person (and still new to PHP!) I'm not sure the best way to go about this.
Here's what I'd like to do (which is pretty standard stuff):
I have my menu and subnavigation menu data being pulled from a database. What I'd like to have is a subnavigation that appears on mouseover of the navigation bar.
What I understand so far is that I need to:
1) Query the database for the navigation bar data
2) Query the database for the subnavigation bar data based on all the navigation bar items and store these in various arrays
That's about as far as I can get right now... in fact, even the idea of storing this information in multiple arrays is a little tricky, though I think I can do it using a counter...
Can anyone point me in the right direction or give me some suggestions on where I can look so I'd be able to start this code? I'm pretty lost right now.
Don't get me wrong, I don't want anyone to write the code for me... but a few pointers or suggestions would be very helpful.
Thanks so much!
Posted: Thu Sep 23, 2004 11:58 am
by feyd
okay.. there are 2 basic ways of doing this..
Storing these lists of things in Javascript, or writing out a readily renderable form into the html stream.
I prefer the second method. So here's the basics of how I do these kinda things:
- do your selection for the menus
- write all the subnavs into their own div's that share a class, but differ in their id.
- write the rollover code (onmouseover event) for the nav such that it flips the visibility setting of its subnav and the other subnavs are hidden. I use document.getElemenById() and document.all[] for retrieving the objects to each div. obj.style.visibility is the visibility property.
Posted: Fri Sep 24, 2004 8:48 am
by dardsemail
Thanks Feyd... Other than the first task, I haven't done any of this before, but I'll give it a shot!
Posted: Tue Sep 28, 2004 9:09 am
by dardsemail
Ok... I think I've got part 1 and 2 correct - but can't seem to get part 3 and can't seem to find anywhere online that has anything similar that I could look at as a basis. I apologize, because I know that this isn't a javascript forum - but I'm stuck and hoping someone could help me with this last section.
Here's what I have thus far (I didn't include code for all elements to be rolled over in order to save space...):
here's my html for the main navigation:
Code: Select all
<td align="center"><a href="content.php?section=collection&page=avfabrics" id="overcollections" class="navlink" onMouseOver=""><img src="images/collections.gif" /></a>
</td>
* note that I've left the onMouseOver variable blank as I can't get further than this (i.e. I'm completely clueless when it comes to javascript!)
here's the html/php for the subnavigation:
Code: Select all
<div id="overcollections">
<?php
include ("connection/db.php");
$pagequery = "SELECT id, contentTitle, contentSection, contentPage, contentSubSection, contentOrder FROM content_tb WHERE contentSection = 'collection' AND contentSubSection = ''";
$pageresult = mysql_query ($pagequery) OR DIE("No results");
?>
<table width="90%" border="0" cellpadding="5" cellspacing="0" align="center" style="vertical-align:top">
<tr><?php while ($pagerow = mysql_fetch_array ($pageresult))
{
?>
<td style="height:15px; vertical-align:bottom" align="center"><a href="content.php?section=<?php echo $pagerow['contentSection']?>&page=<?php echo $pagerow['contentPage']?>"><h6><?php echo $pagerow['contentTitle'];?></h6></a>
</td><?php } ?>
</tr>
</table><?php
include ("thirdnav.php");
?>
</div>
That's about as far as I get. I've looked up a lot of various code for showing/hiding images, but I'm not sure how to do this if I'm showing/hiding various div id's.
Any help or pointing in the right direction would be HUGELY appreciated!
Posted: Tue Sep 28, 2004 10:24 am
by feyd
untested
Code: Select all
function getElem(id)
{
return document.getElementById ? document.getElementById( id ) : document.allї id ];
}
function switchSubNav(toWhich)
{
var subNavArray = new Array( 'overCollections' ); // put your other div ids here.
var obj = null;
for(var x = 0; x < subNavArray.length; x++)
if((obj = getElem( subNavArrayї x ] )) != null)
if(subNavArrayї x ] == toWhich) obj.style.visibility = 'visible';
else obj.style.visibility = 'hidden';
}
Posted: Wed Sep 29, 2004 2:43 am
by CoderGoblin
A possible useful link for a dropdown menu:
http://www.htmldog.com/articles/suckerfish/dropdowns/
All you need to do is use the CSS/javascript and create a nested <ul><li> list using information retrieved from the DB.
Regards
Posted: Wed Sep 29, 2004 3:04 am
by mudkicker
oh my god!
this is the link what i searchin for

thanks coder

this will help me too!
Posted: Wed Sep 29, 2004 8:57 am
by dardsemail
Feyd,
Thanks so much for posting... its not working for me, but I'm not 100% sure why. It could be that its not being called directly - for example, what should I put in the onMouseOver in the href? Isn't this where it would be called from?
I might be able to debug from there if I could get that far
Thanks again!
Cheers,
Darlene
PS - Coder - thanks so much, I will check out the page you posted. Though, my initial look at it shows that its a hovering menu. I really want to just be able to show and hide a pretty standard table menu built from a mySQL array generated via PHP - do you think it will still achieve this?
Posted: Wed Sep 29, 2004 9:57 am
by feyd
you add all the id names you use to the array inside switchSubNav(), and you pass in a string containing the id you want to display.
The call is done from the onmouseover attribute like so:
Code: Select all
onmouseover="switchSubNav('overCollections')"