HTML
  Home arrow HTML arrow Page 4 - Creating an IE-Only Database Driven Menu S...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML
By: Annette Tennison
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 34
    2002-01-05

    Table of Contents:
  • Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML
  • Creating the database
  • Displaying the menus in Internet Explorer
  • Displaying the menus in Internet Explorer (contd.)
  • Conclusion

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML - Displaying the menus in Internet Explorer (contd.)


    (Page 4 of 5 )

    We use the $nodeResult resource to loop through each of our menu headings and display them. Each one is displayed as a <td> tag, using the style classes we talked about earlier:

    </head>

    <body bgcolor="#FFFFFF">

    <table width="250" border="0" cellspacing="0" cellpadding="0">

    <?php



    while($node = mysql_fetch_array($nodeResult))

    {

    ?>

    <tr>

    <td class="root_td">

    <img id="img_root_<?php echo $counter; ?>" onClick="ToggleNode(td_root_<?php echo $counter; ?>, img_root_<?php echo $counter; ?>)" border="0" src="minus.gif" style="cursor:hand">

     <?php echo $node[1]; ?>

    </td>

    </tr>

    <tr>

    <td id="td_root_<?php echo $counter++; ?>" class="child_td">

    <table width="100%">


    As you can see, the <img> tag calls the JavaScript function "ToggleNode" whenever it is clicked on. We are using a counter to give each <td> tag a unique id. The id of each <td> heading tag and a pointer to its expand/collapse image is passed to the ToggleNode function.

    <?php



    $sql = "select * from nodes where parentId = {$node[0]} order by title asc";

    @$childResult = mysql_query($sql);



    while($child = mysql_fetch_row($childResult))

    {

    ?>

    <tr>

    <td class="child_td">

    <a href="<?php echo $child[2]; ?>">

    <?php echo $child[1]; ?>

    </a>

    </td>

    </tr>

    <?php

    }

    ?>


    Once the menu header <td> tag is displayed, we re-query the "nodes" table to get a list of its menu items. Each of these items will have a parentId matching the nodeId of its menu heading. The <td> tag uses the "child_td" class to set the style of each menu item, and the URL field is also used to display the text as a hyperlink.

    We have used the "mysql_fetch_row" function to retrieve each row from the queries resource object. If we wanted to refer to each field by its name, we could’ve used the "mysql_fetch_array" function instead.

    To finish up, we close all open table tags and close both the <body> and <html> tags:

    </table>

    </td>

    </tr>

    <?php

    }

    ?>



    </table>

    </body>

    </html>


    Once you have saved your script in a directory that can be read by your web server, fire it up in your browser to see it in action. I am using Internet Explorer 6, however I have also tested it in Internet Explorer 5 and 5.5, and it worked fine. Here’s how it looked in my browser:

    All headings collapsed:

    Our menu with all headings collapsed

    The "ASP.NET Books " and "C# Books " headings expanded:

    Our menu with two headings expanded

    Collapsing a heading:

    Collapsing a menu heading with a single click

    Let’s try adding a new menu heading, just to see how easily it really is. Jump back to the MySQL console window and enter the following SQL command:

    insert into nodes values(0, 'XML Books', '', 0);

    Press Enter, jump back to Internet Explorer, and click on the refresh button. You should have a new menu heading:

    Our new XML Books heading

    More HTML Articles
    More By Annette Tennison


       · Thanks for the way to get the menu from database. When i do that the menus all the...
       · ie only?WOW! can't wait to make an ie only <insert thing here>how...
     

    HTML ARTICLES

    - Comparing Browser Response to Active Client ...
    - Testing Browser Response to Active Client Pa...
    - Active Client Pages: Completing the Code for...
    - ACP and Browsers: Setting up an Example
    - How Browsers Respond to Active Client Pages
    - Completing a Tree with Active Client Pages
    - HTML Form Verification and ACP
    - Building an ACP Tree
    - Completing an ACP 3D HTML Table Image Gallery
    - Building an ACP 3D HTML Table Image Gallery
    - A Multiple Page Image Gallery with Active Cl...
    - Building an Image Gallery with Active Client...
    - Concluding a Menu for All Browsers
    - A Vertical Menu for All Browsers
    - Downloading Long HTML Pages with ACP







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek