expanding menu

slimjim

I have a simple menu system that has categories and sub categorie.
Problem is the categories list can be very long. So i think something that expands would be better.
Example : Click on main categorie name, expands and shows sub categories.

Here is the code I use for the categories now.

            $sql = "SELECT * FROM cats_m where sub='0' ORDER BY cat_name"; 
            $result = mysql_query($sql); 
            while ($row = mysql_fetch_array($result)) { 
$cat_id=$row['cat_id'];
$catname=$row['cat_name'];

                    echo "<a href='$siteurl/goto.php/$cat_id' title='$catname' STYLE='TEXT-DECORATION: NONE'><font color='#000000' size='2'><b>$catname</b></font></A><BR>";

              $sqla = "select * from cats_m where refcat_id='$cat_id' and sub='1' ORDER BY cat_name"; 
              $resulta = mysql_query($sqla); 
              while ($myrow = mysql_fetch_array($resulta)) { 
              $cat_id=$myrow['cat_id'];
              $catname=$myrow['cat_name'];
                    echo "<a href='$siteurl/goto.php/$cat_id' title='$catname' STYLE='TEXT-DECORATION: NONE'><font color='#000000' size='2'>&nbsp;&nbsp;&nbsp;$catname</font></A><BR>";

              } 
        }

big_nerd

You would have to use JavaScript... Unless you wanted the page refreshing for PHP to parse it everytime.

The Javascript way is:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ROW Test</title>
</head>
<script type="text/javascript">
function openRow(rowId)
{
	var obj = document.getElementById(rowId);
	obj.style.display = 'block';
}
function closeRow(rowId)
{
	var obj = document.getElementById(rowId);
	obj.style.display = 'none';
}
</script>
<body>
<table width="700" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
  <tr>
    <td>This is the FIRST Header <!-- (this is always shown, kind of like the category) -->
	<a  href="javascript:openRow('HROW1');">View Category</a> |<a  href="javascript:closeRow('HROW1');">Close Category</a>
	</td>
  </tr>
  <tr>
    <td id="HROW1" style="display:none;">
	<blockquote>
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER<br />
	This is the INFO for the FIRST HEADER</blockquote>
	</td>
  </tr>
  <tr>
    <td>This is the 2nd Header <a  href="javascript:openRow('HROW2');">View Category</a> |<a  href="javascript:closeRow('HROW2');">Close Category</a>
	</td>
  </tr>
  <tr id="HROW2" style="display:none;">
  	<td><blockquote>Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header <br />
	Tis is the INFO for the 2nd Header</blockquote>	
	</td>
  </tr>
</table>
</body>
</html>

You essentially name your "row" (with id) and you can show/hide it.

Hope this helps..

big.nerd

slimjim

I for the life of me can not figure out how to get it to work like this:
Keep in mind that main and subcatgories are in database.

Categorie 1
Sub 1
Sub 2
Sub 3
Categorie 2
Sub 1
Sub 2

and so on on

Your idea is what I need but how to implement it with the code I provided and what you have ?
Any idea please...

slimjim

THis sorta needs to be populated from database.

big_nerd

If there is a limited number of categories, You can do something like GROUP BY..

How is your database structured? I could probably help you to build a query, if you need... but I would need a little better idea how it works...

I would: Get a list of Categories, use two queries, one to get the list of categories (you can use group by to make sure they are limited to one @ a time), and the 2nd is to parse the info from each category.

I have this DONE already at work.. if only I could find it.. if you need help I will post some more code.. but it will have to wait until monday-ish..

I have been volintold to fill my weekend with work.

slimjim

Look at the first posting above how I do the categories and sub categories now.
Those queries work.
Of course I need I need it to work like you mention.
When I add those two queries to what you show, it just doesnt work for me.
After this quick reply I will add how I edited it when added your info to show you what I tried to do.

slimjim

This does show main categories fine, but does not show all sub categories when click on main categorie, and when clicked on all categories, it shows the same sub categorie as first one and not all sub categories.

I use one database table such as:
cats_m
--cat_id
--cat_name
--sub

main categorie uses sub=0
sub categorie uses sub=1


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>ROW Test</title> 
</head> 
<script type="text/javascript"> 
function openRow(rowId) 
{ 
    var obj = document.getElementById(rowId); 
    obj.style.display = 'block'; 
} 
function closeRow(rowId) 
{ 
    var obj = document.getElementById(rowId); 
    obj.style.display = 'none'; 
} 
</script> 
<body> 
<table width="700" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000"> 
<?
   include 'conf/config.php';
   include 'conf/opendb.php';
   require "conf/functions.php";  

        $sql = "SELECT * FROM cats_m where sub='0' ORDER BY cat_name"; 
        $result = mysql_query($sql); 
        while ($row = mysql_fetch_array($result)) { 
$cat_id=$row['cat_id'];
$catname=$row['cat_name'];

?>
  <tr>

<td>
<?                         

    echo "<a href='$siteurl/goto.php/$cat_id' title='$catname' STYLE='TEXT-DECORATION: NONE'><font color='#000000' size='2'><b>$catname</b></font></A><BR>";
?> <!-- (this is always shown, kind of like the category) --> 
    <a  href="javascript:openRow('HROW1');">View Category</a> |<a  href="javascript:closeRow('HROW1');">Close Category</a> 
    </td>
  </tr> 
  <tr> 
<?
                  $sqla = "select * from cats_m where refcat_id='$cat_id' and sub='1' GROUP BY cat_name"; 
                  $resulta = mysql_query($sqla); 
                  while ($myrow = mysql_fetch_array($resulta)) { 
                  $cat_id2=$myrow['cat_id'];
                  $catname=$myrow['cat_name'];

?>  

    <td id="HROW1" style="display:none;"> 
    <blockquote> 
    <? echo $catname;?><br /> 
</blockquote> 
    </td>

  </tr> 
<?
}
}
?> 
</table> 
</body> 
</html>

big_nerd

slimjim,

Perhaps I am a little slow today,

under the cell which is not hidden you want to display the category.. and the hidden cell will have the data.

I have already written it, I just never took the code home and don't have the resources to re-write & test it (while here).

I will show you, the method it is written is completely dynamic, which I beleive is what you need.

slimjim

Yes the cell that isnt hidden, would be the categorie name
And the cell that is hidden would show the Sub Categories

And of course each cat and sub cat would be links

big_nerd

Here is how I did it:

<?php
$query = "SELECT * from category where display = '1' ORDER BY priority ASC"; // I have a seperate table witht the list of categories
$result = mssql_query($query);
while ($row = mssql_fetch_object($result)) {
echo "<table width=600 border=0><tr bgcolor=#FFFFFF>\n<td>";
echo "<b>".$row->name." </b>| <a id=\"A_$row->num\" href=\"javascript:openROW('R_$row->id_num'); ";
echo " \">Open Category &raquo;</a></td></tr>";
echo "<tr id=\"R_$row->num\" style=\"display:none;\" bgcolor=#FFFFFF>\n<td>";
$query3 = "SELECT subcat from table where category = '$row->name' ";
$query3 = $query3." GROUP BY subcat HAVING (COUNT(subcat) > 1) ORDER BY COUNT(subcat) DESC";
$result3 = mssql_query($query3);
while ($row3 = mssql_fetch_object($result3)) {
echo "<br><b>".$row3->subcat."</b><br>";
$query2 = "SELECT model from partlist where category = '$row->name' and subcat = '$row3->subcat' GROUP BY ";
$query2 = $query2." model HAVING (COUNT(model) > 1) ORDER BY COUNT(model) DESC";
$result2 = mssql_query($result2);
echo "<br>";
while ($row2 = mssql_fetch_object($result2)) {	
echo "<a href=\"link.php?mn=".$row2->model."\">".$row2->model."</a><br>\n";
} // End While row2
} // End While row3
echo "<br></td></tr></table>";
} // End while Row..

Sorry if its a little skewed, however,

I have an "id_num" in my category table that allows me to dynamically set everything up.

Good luck again, I recommend you read through the code and try it out...

Roger_Ramjet

I'm not going to get into how you store and retrieve the categories, if your method is working then fine. However, here are some links to A List Apart which cover various ways to create dynamic menus
the original Suckerfish Dropdowns
extended to Horizontal Style
further extended by Hybrid Dropdowns
and if none of them suit you there are Many More Ways to Skin This Cat

PS I posted this cos the complex js solutions above will not work well in many browsers and the other solution that used to be around has been shown to be incompatible with XP.

big_nerd

Roger,

I am going to enjoy those links myself 🙂. Admittedly at work I program for Microsoft only.. For my personal pages I attempt to avoid javascript all together, thats just me though, it prevents cross-platform compatibility issues.

slimjim,

If you are still having some trouble with this, you can send me (if you like) a basic diagram of your database (i.e. cat = varchar(50), m_cat = text, etc) and a description of what each does, and I will write something up for you to work with using Roger Ramjet's solutions...

if you want you can email it to me at big DOT nerd AT hot mail DOT com if you do not want to include it public.

(much like my name @ the very popular email solution).

Roger_Ramjet

Glad to help. Have a good look around ALA, there are various excellent solutions for multi-level menus with all sorts of refinements. The best thing about doing it with CSS is that it degrades well - if CSS is not supported then the display: none has no effect so sub-menus are not hidden.
There is a subtle bug in the given code for Suckerfish, I forget the details cos it was ages ago when it tripped me up, but if you view the source from the example then you can't go wrong.

I have used both suckerfish and the horizontal methods and had them tested in all browsers on the most esoteric platforms with no errors.

big_nerd

Roger,

By the way on the note; how to store categories and subcat's.. if there is a better way I am always open to see it (even theory, if not code ex).

Roger_Ramjet

Well if it is a 2 level cat-subcat then I would just use 2 tables: cats and subcats - basic 3rd normal form. That way you can get the full list of cats and subcats in 1 query with a simple join, ordered with each cat and all its subcats together.

For more complex structures then you are into Storing Hierarchical Data a very complex field in its own right: eg
4 ways to store hierarchical data
There are loads of articles around on the subject, just google for them.

big_nerd

It is setup as two tables, 1 as cats, which holds priority (display order, as it displays seasonal items), cat name, display y/n (1/0), and the 2nd table has evertything else, cat, subcat, description, etc etc etc.

It is a little bit more than what I had displayed, but hey.. thats great.

Thanks again for the info, I'm going to play around with doing it all with one query.