1

I need to create a vertical menu like so:

  • Item 1
    • Item 1.1
    • Item 1.2
  • Item 2
  • Item 3
  • Item 4

I need the sub-menu to expand/collapse below it's parent item on hover. I need it to have a page indicator or the ability to use the active state so the menu displays the page you're currently on. Also, this is going to be customized several times throughout a site, so I need to keep the titles/links in the html only.

I haven't been able to find or create a solution that fits all of these requirements. I have been researching for a few days and keep coming up empty handed. Any advice and/or solutions would be greatly appreciated!

4

2 回答 2

1

May be a simple sliding jQuery menu would help you here.

Here is an example fiddle.

Let me know if it helps you or not.

Edit

Well for this active-state issue I had to play a little more with the code and finally I got it as you wanted it to be (i guess so)...

Here is the NEW FIDDLE.

Also here now I am using class selectors that makes the code much smaller and easy to read... :)

Cheers..

Update:

May be this is what you want: http://jsfiddle.net/Zx2EU/3/

于 2012-07-23T02:15:56.430 回答
0

Perhaps something like the jQuery EasyUI "Async Tree", then just add some Javascript/PHP/whatever to determine if it is the current page or not, and then print something like < b > before every one (and < /b > at the end).

http://www.jeasyui.com/demo/index.php

For example: 

<?php

$currentFile = $_SERVER["SCRIPT_NAME"];
$parts = Explode('/', $currentFile);
$currentFile = $parts[count($parts) - 1];

?>
...
<li<?php 
    if ($currentFile == "index.php") {
        echo " class=\"selected\"";
    } else {

    } 
    ?>>
    <a href="index.php">Homepage</a>
</li>

And in the stylesheet:

.selected { font-weight: bold; }

Dynamic Drive's might be a bit lighter: http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Also lookup Apycom, they might have one, but they aren't free.

于 2012-07-23T01:40:26.690 回答