PPK Navigation

Hierarchical Menus is a different story. A few months ago one of our clients tried to use HierMenus on his site only to find that it didn't behave quite correctly. He asked me to solve the problems and after looking at the code I decided to start again from scratch. That was the beginning of the PPK Navigation which does exactly the same as HierMenus but is smaller, easier to understand and just doesn't mess around so much.

This is the first beta version, it's not perfect yet (The links are fake, of course):

Eventually the ppkmenus should come in three flavours: with arrows or another image as starting point, like the one above, with a block of links as starting point and with a horizontal row of links as starting point.

Let's compare my script with Webreference's:

Is it better than Webreference's script? Of course I devoutly hope so, but the script is not quite ready yet. Besides I chose a slightly different approach that caused some browser bugs that don't bother Webreference's script.

But I still think Webreference's script is too bloody large and that it unnecessarily shuts out the minor browsers.

Short description

The actual show/hide script is my faithful Navigation: layers script. I added code that writes out the layers and that finds the actual position a newly revealed layer should take.

I don't yet explain the entire code because the script is still in beta. What I've done is create one top layer with ID="ppknav" and put all other layers in it:

----(Layer ppknav)----
| arrows             |
|                    |
----------------------

----(Layer ppknav)----
| arrows             |
|   -------------------
|---| Link            |
    | Link            |
    | Link            |
    -------------------

The idea is that the developer copies the script and then writes his own style sheet for the ppknav layer. Especially, he can set the position to either absolute or relative and place the menu on the page. This is all done entirely by CSS, no complex stuff necessary for filling in style in the script and then even more code for reading them out. I assume that my users can handle some basic CSS, of course.

Put a JavaScript include in the page. The menu will show up at the place of the include (except when you set the position to absolute, of course). It document.writes all layers into the page and only makes the arrow layer visible. Then we wait for the user to mouseover.

The example above uses position: relative: the layer is placed in the page. If you resize the page the layer adjusts its position. I decided to work on the relatively positioned menu first because it causes more bugs than the absolutely positioned variant.

Help me

If you're interested in a light-weight version of Hierarchical Menus and in combating bad coding in general, please help me. It's very simple, the only thing I ask you is to use my script in a test page and send me the URL.

Take any page in any site (this script is supposed to work everywhere) and put

<SCRIPT SRC="http://www.xs4all.nl/~ppk/js/ppknav/navigation.js"></SCRIPT>

in the exact place you want the menu to appear. Please remember that presently the menus always unfold right and down, so give them sufficient space. Does it appear in the right place? Does it work correctly? Please put the page online somewhere and send me the URL and test results, if any.

You can also put a little style sheet for

#ppknav {

}

in your page and try to change the position of the menus. Your style should overrule the one I use. Eventually the menu will become fully CSS configurable.

Home