Creating a menu that expands 1

Scorez2000 · Mar 31, 2004

Ok. Web based application that tracks the outfitting of bathrooms.

There's 4 buildings, each building has a series of 'cores', each core has a number of floors, each floor has a number of bathrooms.

I need to list this all on a page, but I don't want it all to be viewable at once.

So far I have

-Block A
--Core 1
---Floor 1
----Bathroom 1
----Bathroom 2
----Bathroom 3
----Bathroom 4
----Bathroom 5

There are over 600 bathrooms, so it makes for a huge page.

How could I do this so when the page loads, it only shows:

BLOCK A
BLOCK B
BLOCK C
BLOCK D

And then when you click a block, it expands and shows the cores, click a core and it shows floors, click a floor, it shows bathrooms.

viol8ion · Apr 12, 2004

Make each block a hyperlink to another page that displays the cores, which in turn are hyperlinks to a page that displays the floors, which in turn... and so forth and so on...

When in doubt, deny all terms and defnitions.

http://www.wuli.com

Scorez2000 · Apr 14, 2004

I was looking for something a bit more slick and dynamic.

BabyJeffy · Apr 14, 2004

Well... you can do a "slick and dynamic" solution... but with 600+ bathrooms... that would lead to a LOT of data on the page -- and some quite slow page rendering.

The reason viol8ion probably suggested that solution was because of the slow page rendering.

I recently had a "lotus notes style twistie" to expand a list of items. There were in excess of 800 items... each represented inside a <div> with a class on it. The page took a LONG time to load and a LONG time to render (when it was downloaded).

Your call.

Here is how I did it... I have loaded the contents of my menu using your data for this example:

Code:

<html>
<head>
<style type="text/css">
.invis { display:none; }
.submenu { padding-left:10px; }
</style>

<script type="text/javascript">
function showHide(myItemID)
{
  var myObj = document.getElementById(myItemID).style;
  myObj.display = myObj.display != 'block' ? 'block' : 'none';
}
</script>
</head>

<body>
<div>
  <a href="javascript:showHide('blockA')">Block A</a><br />
  <div id="blockA" class="invis submenu">
    <a href="javascript:showHide('blockACore1')">Core 1</a><br />
    <div id="blockACore1" class="invis submenu">
      <a href="javascript:showHide('blockACore1Floor1')">Floor 1</a><br />
      <div id="blockACore1Floor1" class="invis submenu">
        <a href="showbathroom.php?id=53">Bathroom 1</a><br />
        <a href="showbathroom.php?id=55">Bathroom 2</a><br />
        <a href="showbathroom.php?id=37">Bathroom 3</a><br />
      </div>
      <a href="javascript:showHide('blockACore1Floor2')">Floor 2</a><br />
      <div id="blockACore1Floor2" class="invis submenu">
        <a href="showbathroom.php?id=57">Bathroom 1</a><br />
        <a href="showbathroom.php?id=62">Bathroom 2</a><br />
        <a href="showbathroom.php?id=96">Bathroom 3</a><br />
        <a href="showbathroom.php?id=16">Bathroom 4</a><br />
        <a href="showbathroom.php?id=91">Bathroom 5</a><br />
      </div>
    </div>
    <a href="javascript:showHide('blockACore2')">Core 2</a><br />
    <div id="blockACore2" class="invis submenu">
      <a href="javascript:showHide('blockACore2Floor1')">Floor 1</a><br />
      <div id="blockACore2Floor1" class="invis submenu">
        <a href="showbathroom.php?id=223">Bathroom 1</a><br />
        <a href="showbathroom.php?id=251">Bathroom 2</a><br />
        <a href="showbathroom.php?id=237">Bathroom 3</a><br />
        <a href="showbathroom.php?id=217">Bathroom 4</a><br />
      </div>
      <a href="javascript:showHide('blockACore2Floor2')">Floor 2</a><br />
      <div id="blockACore2Floor2" class="invis submenu">
        <a href="showbathroom.php?id=257">Bathroom 1</a><br />
        <a href="showbathroom.php?id=262">Bathroom 2</a><br />
      </div>
  </div>
</div>
</body>
</html>

The showHide() function doesn't hide every child node if a parent is hidden. This is easy to add if it's something you are after.

Hope that this gets you started?

Jeff

imstillatwork · Apr 22, 2004

sounds like a fairly major thing to keep track of. I would recommend a database and some server side scripting. That would be your only option for a easily manageable easily updateable system. Asp, php, coldfusion, etc...

BabyJeffy · Apr 23, 2004

Well... I think that's a given... the code I've put up would provide the end result of querying the database... effectively delivering a "more slick" solution than just resubmitting the page back to itself constantly to update the menu contents.

Heh... it would be an absolute pain to manage all the code above as just plain html (and not generated server side).

Jeff

imstillatwork · Apr 23, 2004

I would have thought so, but with all the talk of loading it all up at once, I wasn't so sure.

If its a intranet or lightweight page, you'l never notice the page reloads anyway. The whole beauty of a drill down is that you don't have to load everything, you only get what you need.

you don't need any javascript of dhtml of fancy css. all you need is a few links and a few database calls. It will be the fastest, easiest, most reliable way to do it.

I could have you a database and coldfusion demo in 15 minutes if you're intersted.

Scorez2000 · Apr 23, 2004

I used BabyJeffy's solution and it worked an absolute dream.
I only had to drill down as far as floor level, not per bathroom so it's not as big as i expected.

Much appreciated all.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Creating a menu that expands 1

Scorez2000

Programmer

viol8ion

Technical User

Scorez2000

Programmer

BabyJeffy

Programmer

imstillatwork

IS-IT--Management

BabyJeffy

Programmer

imstillatwork

IS-IT--Management

Scorez2000

Programmer

Similar threads

Part and Inventory Search

Sponsor