css based drop down menu to be used in php

[virtualadz]

yes yes there is a separate file for it where from it will copy it's menu names :

[virtualadz]

hey scott if all your questions have cleared then i would like to elaborate the next issue with this menu, should i proceed

[scott100]

Ok yes i get the picture now, you wan't to dynamically build a drop down menu from the contents of a database? Is that right?

[virtualadz]

yes very much right ,just see this post which i prepared, you will find as if i am starting from the beginning, here ;s my question: i everyone, i have a test drop-down menu at : www.virtualadz.com i want to include it in www.bhuratea.com , now the problem i am facing is not related to the menu to be included in php but something else:if you look at the menu on www.virtualadz.com you will see "Our products" as the first menu and under it some sub-menus as well, no visit www.bhuratea.com and there you will find the same word "Our Products" to the left in column_left.php as boxes. you will also see the category names of it now i want those cateogry names with their url's to be in the 1st sub-menu of the drop-down menu. bcoz copying the url's in the menu with thier names and updating everytime is abig task. the names of the categories should come under the first sub-menu automatically, so whenever i add a category it is also included in the submenu, is there a way i can achieve this code for the 1st menu with its sub:<div class="menu"><ul><li><a class="hide" href="../menu/index.html">Our Products</a><!--[if lte IE 6]><a href="../menu/index.html">Our Products<table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">Darjeeling Tea</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">Green Tea</a></li> <li><a href="../menu/form.html" title="Styling forms">Black Tea</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">Assam Tea</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">Flavoured Tea</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">Tea Bags</a></li> <li><a href="../menu/bodies.html" title="fun with background images">Blended Tea</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">Tea Bags</a></li> <li><a href="../menu/em_images.html" title="em size images compared">Blended Tea</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>hope it is clear , anyone can help.

[virtualadz]

hey scott have a look at this code for www.bhuratea.com 's products they automactically come from the database:

<?php/*Virtualdzdadmaddad*/  function tep_show_category($counter) {    global $tree, $categories_string, $cPath_array;    for ($i=0; $i<$tree[$counter]['level']; $i++) {      $categories_string .= "  ";    }    $categories_string .= '<a href="';    if ($tree[$counter]['parent'] == 0) {      $cPath_new = 'cPath=' . $counter;    } else {      $cPath_new = 'cPath=' . $tree[$counter]['path'];    }    $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';    if (isset($cPath_array) && in_array($counter, $cPath_array)) {      $categories_string .= '<b>';    }// display category name    $categories_string .= $tree[$counter]['name'];    if (isset($cPath_array) && in_array($counter, $cPath_array)) {      $categories_string .= '</b>';    }    if (tep_has_category_subcategories($counter)) {      $categories_string .= '->';    }    $categories_string .= '</a>';    if (SHOW_COUNTS == 'true') {      $products_in_category = tep_count_products_in_category($counter);      if ($products_in_category > 0) {        $categories_string .= ' (' . $products_in_category . ')';      }    }    $categories_string .= '<br>';    if ($tree[$counter]['next_id'] != false) {      tep_show_category($tree[$counter]['next_id']);    }  }?><!-- categories //-->          <tr>            <td><?php  $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);  new infoBoxHeading($info_box_contents, true, false);  $categories_string = '';  $tree = array();  $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");  while ($categories = tep_db_fetch_array($categories_query))  {    $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],                                                'parent' => $categories['parent_id'],                                                'level' => 0,                                                'path' => $categories['categories_id'],                                                'next_id' => false);    if (isset($parent_id)) {      $tree[$parent_id]['next_id'] = $categories['categories_id'];    }    $parent_id = $categories['categories_id'];    if (!isset($first_element)) {      $first_element = $categories['categories_id'];    }  }  //------------------------  if (tep_not_null($cPath)) {    $new_path = '';    reset($cPath_array);    while (list($key, $value) = each($cPath_array)) {      unset($parent_id);      unset($first_id);      $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");      if (tep_db_num_rows($categories_query)) {        $new_path .= $value;        while ($row = tep_db_fetch_array($categories_query)) {          $tree[$row['categories_id']] = array('name' => $row['categories_name'],                                               'parent' => $row['parent_id'],                                               'level' => $key+1,                                               'path' => $new_path . '_' . $row['categories_id'],                                               'next_id' => false);          if (isset($parent_id)) {            $tree[$parent_id]['next_id'] = $row['categories_id'];          }          $parent_id = $row['categories_id'];          if (!isset($first_id)) {            $first_id = $row['categories_id'];          }          $last_id = $row['categories_id'];        }        $tree[$last_id]['next_id'] = $tree[$value]['next_id'];        $tree[$value]['next_id'] = $first_id;        $new_path .= '_';      } else {        break;      }    }  }  tep_show_category($first_element);   $info_box_contents = array();  $info_box_contents[] = array('text' => $categories_string);  new infoBox($info_box_contents);?>            </td>          </tr><!-- categories_eof //-->

now the question is to include them in the menu as li , hope you do it

Edited May 16, 2006 by Jonas

[scott100]

Here's what i had in mind, i haven't tested it bacause this is just a made up database with tables, you will need to look at the parts in red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title></title></head><body><?php ini_set ('display_errors', 1);error_reporting (E_ALL & ~E_NOTICE);// Connect and select.if ($dbc = @mysql_connect ('[color="red"]localhost[/color]', '[color="red"]username[/color]', '[color="red"]password[/color]')){if (!@mysql_select_db ('[color="red"]mydatabase[/color]')){die ('<p>Could select the database because: <b>' . mysql_error() . '</b></p>');}} else {die ('<p>Could not connect to MySQL because: <b>' . mysql_error() . '</b></p>');}// Define the query.$query = 'SELECT * FROM [color="red"]mytable[/color]';if ($r = mysql_query ($query)) { // Run the query.// Retrieve and print every record.print '<DIV class=menu><UL>  <LI><A class=hide href="http://www.virtualadz.com/menu/index.html">Our Products</A>  <!--[if lte IE 6]>  <A href="http://www.virtualadz.com/menu/index.html">Our Products  <TABLE>    <TBODY>    <TR>      <TD><![endif]-->        <UL>';while ($row = mysql_fetch_array ($r)) {print "<LI><A title=[color="red"]{$row['name']}[/color] href=[color="red"]{$row['address']}[/color]>[color="red"]{$row['name']}[/color]</A> </LI>      ";}print '</ul><!--[if lte IE 6]></td></tr></tbody></table><![endif]-->  </TABLE>';} else { // Query didn't run.die ('<p>Could create the menu because: <b>' . mysql_error() . "</b>. The query was $query.</p>");} // End of query IF.mysql_close(); // Close the database connection.?></body></html>

[virtualadz]

why is this part needed the there was none in the code i provided you, they are located in a other file, so need to include over and over again in each page, i only want the sub-menus names to come from database similar to what i gave you in Post #31, the database is already setup, only the names of the sub-menu should come from the database, rest all will be as theya are.Connect and select.if ($dbc = @mysql_connect ('localhost', 'username', 'password')){if (!@mysql_select_db ('mydatabase'))

[scott100]

I never saw your post #31 until i had finished working on the example.This is the important part, when you get the row from the database print it out in the <li>Yours is slightly different but do you see what i mean?while ($row = mysql_fetch_array ($r)) { print "<LI><A title={$row['name']} href={$row['address']}>{$row['name']}</A> </LI>";}

[virtualadz]

hey should it be like this:<div class="menu"><ul><li><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>" class="hide"><?php echo MENU_PRODUCTS; ?></a><!--[if lte IE 6]><a href="<?php echo tep_href_link(FILENAME_ALL_PRODUCTS); ?>"><?php echo MENU_PRODUCTS; ?><table><tr><td><![endif]--><ul><li>while ($row = mysql_fetch_array ($r)) {print "<LI><A title={$row['name']} href={$row['address']}>{$row['name']}</A> </LI>";}</li>but where's the href, it should also copy the link you only gave title

[scott100]

Ok, say this is your database where name and address are field headings.

name              addressTea                 http//:www.tea.comCoffee             http//:www.coffee.comBiscuits            http//:www.buscuits.com

And this is your php

while ($row = mysql_fetch_array ($r)) {print "<LI><A title={$row['name']} href={$row['address']}>{$row['name']}</A> </LI>";

you would get this<li><a title="Tea" href="http//:www.tea.com">Tea</a></li><li><a title="Cofee" href="http//:www.coffee.com">Coffee</a></li><li><a title="Biscuits" href="http//:www.biscuits.com">Biscuits</a></li>

[virtualadz]

but the address og my products are like thishttp://bhuratea.com/index.php?cPath=21http://bhuratea.com/index.php?cPath=22http://bhuratea.com/index.php?cPath=23http://bhuratea.com/index.php?cPath=24and going, hope it is clear

[scott100]

Yes that's fine.All i am doing is giving you general guidance, nothing what i'm posting is actually real, it's just made up examples, what you have to do it take away the code and modify it to suit your needs.

[virtualadz]

ok , but will i have to add li for every link on the sub-menu, in post #31 you wil see that there is a common <br> which is automatically added if there are two products, so will it automatically add sub-menu links or i have to include li for every,

[scott100]

<li><a></a></li> should be used for each item, that's the way it was set up.li is set to DISPLAY: block, so i would delete the <br>

[virtualadz]

ok let me try , but i may be unable to do it.

[virtualadz]

hi scott can you make the first sub-menu i would be very grateful, otherwise i will have to make something like that manually, please can you.........

[virtualadz]

ok i somehow did it, but now i want to make sub-menu items aligned left rather than center. www.bhuratea.com and see the menu.

[scott100]

basic_dd.css

.menu {	MARGIN: 0px; WIDTH: 750px; FONT-FAMILY: arial, sans-serif;}.menu UL {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}.menu UL LI {	FLOAT: left; POSITION: relative}.menu UL LI A {	BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #a8a8a8; BORDER-LEFT: #fff 0px solid; WIDTH: 90px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none}.menu UL LI A:visited {	BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #a8a8a8; BORDER-LEFT: #fff 0px solid; WIDTH: 90px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none}.menu UL LI UL {	DISPLAY: none; TEXT-ALIGN: left;}.menu UL LI:hover A {	BACKGROUND: #6495ed; COLOR: #fff;}.menu UL LI:hover UL {	DISPLAY: block; LEFT: 0px; WIDTH: 105px; POSITION: absolute; TOP: 21px; TEXT-ALIGN: left;}.menu UL LI:hover UL LI A {	DISPLAY: block; BACKGROUND: #a8a8a8; WIDTH: 190px; COLOR: #fff; TEXT-ALIGN: left;}.menu UL LI:hover UL LI A:hover {	BACKGROUND: #6495ed; COLOR: #fff; TEXT-ALIGN: left;}

basic_dd_ie

TABLE {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse}.menu UL LI A.hide {	DISPLAY: none}.menu UL LI A.hide:visited {	DISPLAY: none;text-align: left}.menu UL LI A:hover {	BACKGROUND: #6495ed; COLOR: #fff;}.menu UL LI A:hover UL {	DISPLAY: block; LEFT: 0px; WIDTH: 155px; POSITION: absolute; TOP: 22px; TEXT-ALIGN: left;}.menu UL LI A:hover UL LI A {	BACKGROUND: #a8a8a8; WIDTH: 190px; COLOR: #fff; TEXT-ALIGN: left;}.menu UL LI A:hover UL LI A:hover {	BACKGROUND: #6495ed; COLOR: #fff; TEXT-ALIGN: left;}

you may also want to add some padding as they sit up tight agains the box.

[virtualadz]

what do you mean "you may also want to add some padding as they sit up tight agains the box. " by this

[virtualadz]

hi, just did it but then it i so co close to the left that doesnt look nice , it tried margin-left: 2px; but that didn't help

[Little Goat]

that is why he said padding. try padding:2px;LG

[scott100]

Wherever you see text-align: left in the css, add margin:2px.for example:

.menu UL LI A.hide:visited {	DISPLAY: none;text-align: left;margin:2px}

These are really basic questions, have you ever went through the css tut?

[virtualadz]

this yet doesnot do any good

[Little Goat]

do padding!padding:2px;LG

[virtualadz]

thanks