PDA

View Full Version : Hybrid CSS / Javascript multi-level menu



bkatzung
04-28-2009, 09:30 PM
1) CODE TITLE: menuposition

2) AUTHOR NAME/NOTES: Brian Katzung, Kappa Computer Solutions, LLC

3) DESCRIPTION: Multi-level drop-down, raise-up, and fly-out/slide-out HTML-structured menu. Uses CSS for basic visibility (when Javascript is off/disabled), and Javascript for "smart" placement near window edges and for IE work-arounds.

More description at
http://www.kappacs.com/Articles/Javascript/MenuPosition-Smart-CSS-Javascript-Hybrid-Menus.html

4) URL TO CODE:
http://www.kappacs.com/View-category/menuposition/

A sample test page is included in the downloads. This menu system is the one in use at http://www.kappacs.com/, as well as several other sites.

Feedback and suggestions welcomed.

ddadmin
04-28-2009, 10:15 PM
The CSS on all the pages appears to be missing.

bkatzung
04-29-2009, 12:21 AM
The CSS on all the pages appears to be missing.

Hmm... I'm not quite sure what you mean...

The two archives on the download page (one in ZIP format and the other in gzip'ped tar format) each contain these files:

menuposition.css - Basic CSS and sample menu implementation styling
menuposition.js - Enhanced display logic
viewport.js - Viewport support used by menuposition.js
mptest.html - Test page (includes embedded CSS)


So if you're working with mptest.html, the CSS is embedded. If you're working with your own pages, link or embed menuposition.js, viewport.js, and menuposition.css. Either prototype.js or mootools.js is also required, as referenced in the article on my site.

On the www.kappacs.com (http://www.kappacs.com/) web site, the CSS is incorporated into the Joomla template CSS (http://www.kappacs.com/templates/kappacs2.0.1/css/template_css.css). It is a superset of the archived menuposition.css.

Does that resolve your concern? If not, please rephrase it in more detail.

Nile
04-29-2009, 12:26 AM
Actually, I think he was talking about the layout and images, take a look.
http://img201.imageshack.us/img201/6005/captureito.th.png (http://img201.imageshack.us/my.php?image=captureito.png)

Is it supposed to be like this?

I really like it, maybe add a little animations to it? ( The reason for this is because there are thousands of menus exactly like this online, and you want yours to be unique, and widely used)

bkatzung
04-29-2009, 03:11 AM
Oops... an http/https interaction failure mode resulting from a recent unrelated configuration change. Should be all fixed now.

Thank you for the suggestion about animation.