Expanding and Collapsing Menu ...

[jleeinc]

hello everyone, looking for a little help ... i know this cant be hard, but due to my limited php knowledge, i need some help ... working on a site that needs expanding and collapsing menu ... i really dont want to use javascript, but rather php ... i've been looking around, and have seen some things, but i figured i'd ask exactly and hopefully someone can help out ... assume i know nothing LOL ... i'm not an idiot, just novice at php coding

what i've got is a script that has a "category" and "subcategory" fields (within a db, mysql), and presently i've got it set up such that when you add a either the category and/or subcategory it shows it in the navigation ... well i'm afraid that if too many subcatatories are added my page can/will get rather long, so what i'd like to see is having the subcategories hidden until the category is clicked on, then once clicked on it will display all the subcats in the category, moving everything else down ... and if you are anywhere on the site within that particular category that all the subcats will show as well ...

i think i'm making some sense here, but please dont hesitate to ask questions, etc ...

this is example of the navigation code:

http://jleeinc.com/sample_code.txt

and here's a site that's actually using the script:  http://onlinedetail.com

this site is actually a perfect example (note: it's still a work in progress) ... on the left navigation "products for sale" ; websites, databases, and templates are the "categories" and all the items with a red arrow are "subcats" ... sorry to go on and on, but just wanted to be as thorough as possible with my explaination ...


ANY HELP IS MORE THAN APPRECIATED!!

Jerimy.
jlee@jleeinc.com

[trq]

An expanding / collapsing menu has little to do with php sorry. Its either Javascript or css.

[jleeinc]

ok, i can handle css too then :)  ...just dont want to use java if i can help it...

all this being said, if someone has the javascript that would accomplish what i'm looking for i would be greatful for that as my backup ... thanks to all in advance!

Jerimy.

[ShogunWarrior]

You're going to have to use Javascript.
I'd recommend looking up [b]Scriptaculous[/b], some great visual effects libraries, stuff like expanding/collapsing, shrinking/growing areas etc.

[syed]

you can use css to do this but you will also need javascript as stated by the guys above, the css menu might work in other browsers such as firefox but you will need javascript to make it work with ie, i have written menus and i have always needed javascript and i have not seen any other menu scripts without the use of javascript.

[SharkBait]

There is a hack for IE to get the hover effect to work with it.

http://www.xs4all.nl/~peterned/csshover.html

talks about it. Its a pain but there is a way to make IE work a bit better.  But yea.. it isnt pure CSS ;) Perhaps one day IE will follow the other browsers and play nice.

[Woolf]

This [i]can[/i] be done with PHP, as even I use PHP for collapsing / expanding content boxes in my admin panel. However, it's not as simple as 1-2-3. It will require a bit of knowledge that I'm not sure you have, if you have limited PHP knowledge as you say. Anyway, I'll give you an overview of what it's like:

1) For your categories, when clicked on, it will go to that section as normal.
2) For the other categories (that are not currently clicked on), they will be collapsed as normal.
3) In your navigation script, you can check to see if a category is set (in the url... display.php?cat=X). If it is (and it matches the current one in the loop), you can get the subcategories for it. Otherwise, only the main category will be displayed.

Here's an example of what your script might look like:
[code]<?
include("config.php");

// connect to database
$link = mysql_connect("$dbhost","$dbuser","$dbpass");
mysql_select_db("$dbname",$link);
?>

<style type="text/css">
table            { font-family: verdana; font-size: 11px }
a                  { font-family: verdana; font-size: 11px; text-decoration: none }
a:hover      { font-family: verdana; font-size: 11px; text-decoration: underline }
</style>

<center>
  <table border="0" cellpadding="2" cellspacing="0" width="100%">
<?
$result = mysql_query("SELECT * FROM cats WHERE active='1'");
while ($row = mysql_fetch_array($result)) {
?>
    <tr background="images/website_seo_34.jpg">
      <td><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="display.php?cat=<?=$row[cid];?>&scat=n"><b><font color="#000000"><?=$row[name];?></font></b></a>
<br>
<?
//Check if current category is being viewed
if($_GET['cat'] == $row['cid']){
$result2 = mysql_query("SELECT * FROM scats WHERE cid='$row[cid]' AND active='1'");
while ($row2 = mysql_fetch_array($result2)) {
?>
    <tr>
      <td>&nbsp;&nbsp;<a href="display.php?cat=<?=$row[cid];?>&scat=<?=$row2[scid];?>"><?=$row2[name];?></a></td>
    </tr>
<?
}}} ?>
</td>
    </tr> 
  </table>
</center>[/code]

[jleeinc]

Woolf, this works PERFECTLY!!!  i KNEW it could be done, it's not toggling when you click on it, but honestly i like this method even better, and if i wanted it to "toggle" open and closed without going to the actual category page, java would be my solution, but nonetheless, i like this better, and works great!

*note i did change the html a litte from the code above, but the php is what really counts and what i'm showing in this example below*

for all to see:  www.OnlineDetail.com

when you click on the category, in the "products for sale" it goes to that page on the web site, and opens up all the subcategories in the menu navigation ...


MANY THANKS woolf!

Jerimy.