ansaurus

Question

Answer 1

A:

The simplest solution i would try is:

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
   <?php if($page = "Some nested page"): ?>
      <ul>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
      </ul>
   <?php endif; ?>
   </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

fcingolani 2010-08-27 01:57:14

Answer 2

A:

I want all my dynamic generated php links to be displayed like in example 1 below and when I click on a link which takes me to another page all its sub links are displayed like in example 2 and when I click on one of those links all its sub links are displayed like in the rest of the examples.

The bold part is not so clear.

all my dynamic generated php links

how is it dynamic generated? via ajax? please explain further.

takes me to another page all its sub links are displayed

If clicking a link takes you to another page, then displaying a sublink should be done on server-side. Yes you can do it client-side via jQuery but I think it would be not practical.

Summary.

Use your php to display your sublinks.

HTML

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul class="active"> <!-- active UL -->
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

CSS

ul.active ul {
    display: none;
}

with that above, use your php skills to add/remove class active to a ul. By doing that so, and with the definition of your CSS, any ul inside active ul is not visible. In above, Fourth Nested List will not be shown on page.

update

ul ul {
    display: none;
}
ul.active {
    display: block; /* or display:inline; */
}

example

<ul>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a>
      <ul>  <!-- this will be hidden and all it's sub ul -->
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
      <ul class="active"> <!-- active UL, this will be displayed on the browser -->
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a>
          <ul class="active"> <!-- this will be shown if it's closest parent ul is active also -->
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a>
              <ul>  <!-- this will be hidden and all it's sub ul -->
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
                <li><a href="link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="link.php">Third Nested List</a></li>
            <li><a href="link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="link.php">Second Nested List</a></li>
        <li><a href="link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="link.php">First Nested List</a></li>
   <li><a href="link.php">First Nested List</a></li>
</ul>

Reigel 2010-08-27 01:57:40

@Reigel all my links are generated through php and all the links are displayed even all the nested links. I want all my parent links to be displayed but not there children. Yes clicking a link takes you to another page and I really would like to know how to display the sub links using PHP.

pirate 2010-08-27 02:03:21

please see edit.

Reigel 2010-08-27 02:26:08

@Reigel What if there is nested list in other parent categories in the first nested list how will i hide those?

pirate 2010-08-27 02:37:02

please see update.., first, it will hide all the sub `ul` then if you put `class="active"` to a `ul` that ul will be shown.

Reigel 2010-08-27 02:55:08

@Reigel now the active class dosn't seem to work for the third and fourth nested list any suggestion on how to fix this?

pirate 2010-08-27 03:00:20

be back in an hour, taking my lunch :)

Reigel 2010-08-27 03:08:10

play around with this [sample](http://jsfiddle.net/N3TdG/) and read comments in it. :)

Reigel 2010-08-27 04:33:03

I fixed the problem when you were gone but know I'm stuck on something else PHP related. Thanks for the help.

pirate 2010-08-27 04:44:46

you're most welcome ;)

Reigel 2010-08-27 04:48:23

Answer 3

A:

The way I would do it is to always add all sub-menu's (and sub-sub, etc.) to your html and set an active class on the current active main menu, sub-menu, sub-sub-menu, etc.

I would then use css to hide the sub-menu's that don´t fall under an active class.

That way you can easily have your menu's pop-up in the future when somebody hovers or clicks on a parent. If you should ever want that...

jeroen 2010-08-27 02:25:28

where would I put my active class and how would my css look like for my active class and to hide the rest of the menus and example would help me out very much.

pirate 2010-08-27 02:27:36

ansaurus

tags:

views:

answers:

Dynamic Vertical menu question.

HTML

CSS

related questions