Jump to content
virtualadz

css based drop down menu to be used in php

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Jonas

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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'))

Share this post


Link to post
Share on other sites

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>";}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

<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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...