Dynamic Sub-Naviation Bar on Mouseover

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Dynamic Sub-Naviation Bar on Mouseover

Post 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!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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:
  1. do your selection for the menus
  2. write all the subnavs into their own div's that share a class, but differ in their id.
  3. 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.
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Thanks Feyd... Other than the first task, I haven't done any of this before, but I'll give it a shot!
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post 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!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

untested

Code: Select all

function getElem(id)
&#123;
  return document.getElementById ? document.getElementById( id ) : document.all&#1111; id ];
&#125;

function switchSubNav(toWhich)
&#123;
  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&#1111; x ] )) != null)
      if(subNavArray&#1111; x ] == toWhich) obj.style.visibility = 'visible';
      else obj.style.visibility = 'hidden';
&#125;
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

oh my god!
this is the link what i searchin for :) thanks coder ;) this will help me too!
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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')"
Post Reply