Horizontal Drop-down Menu Plugin

zsigmonda / 2008-12-23 08:43:50   


I've developed a css plugin for indexhibit that organizes exhibition categories into a horizontal rather than vertical menu. Rolling over each category opens a drop-down list of all the exhibits inside. The plugin can be seen in action on this test site.

I thought it would be useful to provide Indexhibit users with a quick and easy way to change their site navigation from vertical to horizontal. The plugin provides code for the basic layout (as shown on the test site), which can then be customized with additional styles (font, color, etc) for a more personalized look.

You can download the plugin HERE
The download includes all files necessary, as well as installation instructions.

This plugin was developed in collaboration with Mushon Zer-Aviv as part of his class 'Open Source Design' at Parsons The New School for Design. You can check out our class blog to see our process.

I hope this will be helpful to indexhibit users! Feel free to respond to this thread with any questions or comments you may have.


Vaska A / 2008-12-23 11:03:58   

Is this based on Suckerfish? Has it been tested on IE6 and below (you probably need some javascript to make it work)?

I won't have a chance to look at this for awhile myself...but I will.

Thanks for doing this...and tell Mushon to get in touch with me...I would love to chat with him.

arsondpi / 2008-12-23 11:21:58   

---This is cool---
Indexhibit is their tweek toy!

mushon / 2008-12-23 23:26:32   

Hi Alexandra, Vaska, all,

yeah, both Alexandra and Ed have posted their contributions to Indexhibit based on the class choice of this project for open source style contribution as designers. Karen and Khurry will probably post their own documentation contribution later this week. The choice was made by the class, not by me personally and I was excited by the insight and dedication they expressed in their work.

I chipped in too... :)
Specifically for Alex's plugin (or rather css snippets) it was important to have a semantic sidebar to work with where the differentiation between section title and its children links is embbeded within the markup created by php and easily selectable through css.

I have modified plugins/index.php to be more semantically useful and I think it would actually make sense for more than just Alex's code, but for others who might want to theme Indexhibit.

Neither I nor my students are serious code-monkeys, so by all means do take our code and change it to work better. We basically wanted to express our appreciation to the amazing work you guys have been doing and to contribute back in the form of (imperfect) code to hopefully be modified and improved upon by the community.

So yeah, not sure about cross browser compatibility with Alexandra's code, but maybe that's something someone else here might be helpful with.



Vaska A / 2008-12-24 00:18:02   

"more semantically useful" has already been implemented into the new (unreleased) version. Many better things coming soon.

mushon / 2008-12-24 17:48:06   

that's great! Anywhere we can track the changes? do you hold a public repository somewhere you can refer us to?

Vaska A / 2008-12-24 17:54:55   

No we don't. We don't view this as a normal open source project...Dan and I are doing things a little different from the norm.

But things will become more transparent soon...alot of things are coming.

Netsvetaev / 2008-12-25 08:26:30   

Can you make complete theme for indexhibit with this menu? Just index.php, style.css, and other files.

I replaced index-files .and copy css. But that doesn't work.


What I did wrong?

Netsvetaev / 2008-12-25 08:28:39   

sorry, right link - test.netsvetaev.ru

Netsvetaev / 2008-12-25 14:01:50   

And if I replace index.php in plugin folder — exhibitions hiding and I see some bugs.

zsigmonda / 2008-12-28 06:22:57   

I guess there are some bugs in the plugin, and I'm also not sure about cross-platform compatibility. As Mushon mentioned above, I am not a serious coder, in fact I just learned 2 months ago. However, I thought that giving users an easy way to change the navigation system from vertical to horizontal (or atleast trying to!) would be a useful contribution to indexhibit. Perhaps this is something that can be implemented when the new semantic sidebar is released.

I would definitely encourage anyone with more coding experience than me to take these css snippets and refine them - I'll try to work on it some more as well!

Netsvetaev / 2008-12-28 17:35:40   

well, I think, that I found problem. In my template I added 

  1. <ul class='nav chronological'> before <plug:front_index /> and it shown menu in your style.

But in my template code is

  1. <ul>
  2. <li class='section-title'On-going</li>
  3. <li><a href='http://test.netsvetaev.ru/index.php?/project/432434-pppp/' onclick="do_click();">432434 пппп</a></li>
  4. </ul>

And your code is

  1. <li id='Print'><h3>Print</h3>
  2. <ul>
  3. <li><a href='http://www.alexandrazsigmond.com/indexhibit/index.php?/print/davis-polk/' onclick="do_click();">Davis Polk</a></li>
  4. </ul>
  5. </li>

If I'm right, this changing in index.php in "plugin" folder. Your index file in archive is not a plugin file, it is template file.
Can you give index.php from your "plugin" folder?

Instruct / 2008-12-28 20:39:28   

Thanks for sharing and it looks great from the sample site,

I'm trying hard to get this to work but not 100% sure where to insert the new css coding into my sample.css file? Has anyone else managed to get this working at all?

rixx / 2008-12-28 23:57:04   

Yes thanks for great 'plugin'.
I'd like to use it too, but confused as to where exactly to insert the new css coding into my sample.css
I've played around a bit without success, due to my limited experience..

Regards Robert

Netsvetaev / 2009-01-02 09:52:26   

I did it! I'm not a php coder, but I found solution =)
There is plugin's index.php and working menu example.

  1. Just replace this file in your plugin folder and add 
  2. <ul class='nav chronological'> 
  3. before 
  4. <plug:front_index />
  5.  in your template index.php
Netsvetaev / 2009-01-02 09:55:04   

sorry, visit test.netsvetaev.ru for menu.

mneedle / 2009-01-07 17:37:40   

ive done something wrong, i downloaded the pack, followed the instructions which came with it, but i dont understand how i " replace the #menu{}, #menu ul{} and #content{} portions of the style.css file of whichever template theme you are using. To install, simply replace the portions of css above with the code contained in the file 'horizontalmenu_plugin.css.' "
Do i have to use dreamweaver or do i simply just drop this into my FTP CLient?????
please help as ive lost my whole site

Netsvetaev / 2009-01-07 17:46:41   

mneedle you need to cut old styles in your css called "menu", "menu ul" and "content" and paste new styles from "horizontalmenu_plugin.css".

I have this problem too, so I just saved all their style.css from test site and replaced my default css with it.

mneedle / 2009-01-07 17:51:01   

whats my css?
im new to all this

mneedle / 2009-01-07 17:53:11   

my stie is now saying No direct script access allowed

Netsvetaev / 2009-01-10 08:04:19   

mneedle, css - cascading style sheets. Style.css in your template folder is your css file.

I have trouble with ie6/7/8, my menu not working there.
Test site in ie.

But test.netsvetaev.ru and sample site in first post in ie working correctly. Please, help to find solution.

Netsvetaev / 2009-01-12 17:50:55   
  1. and I did it again =)
  2. Menu not working in ie, if your index.php without
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en>
  5. If you paste doctype into index - it will work.
rixx / 2009-01-15 04:40:00   

Thanks for all the work. I'm not sure which of your sites is now working in ie? Can you post the url?


Netsvetaev / 2009-01-15 06:43:37   

rixx, netsvetaev.ru is working in ie 7/8. In ie6 it have bugs and i can't fix them =(

Vaska A / 2009-01-15 21:49:58   

That's what I meant with my first question...this will never work in IE6 without some javascript. This is an iteration of a Suckerfish menu...you might give Google a search for that to see how it works.

We have a horizontal menu plugin coming...you know...when we can finally release the new version.

Netsvetaev / 2009-01-16 15:06:15   

Vaska, but in test site it working correctly in ie too =(

Vaska A / 2009-01-16 15:14:41   

In IE6?

It's really hard for us to support user contributed code these days. I wish that people would be interested enough to support their own work but it becomes work for myself and the moderators around here.

We're really suffering these days...and I know you are aware of this.

I wish I could do more for this...but I've already written a horizontal drop down plugin a long time ago that will work with new Indexhibit.

Netsvetaev / 2009-02-03 05:40:09   

Solution for ie is very simple:

We have code like this:

  1. <div id="header">  
  2.     <div id="nav" class="sf-menu">Here the menu</div>  
  3. </div>  
  4. <id="content">Here the content</div>

Add z-index in *.css file for this blocks:

  1. #header {  
  2.     z-index:2;  
  3. }  
  4. #content {  
  5.     z-index:1;  
  6. } 

Menu works in ie without bugs and any java-scripts. =)
original post

Vaska A / 2009-02-03 12:47:34   

Did you check this with IE6? It doesn't work...it's actually really messed up.

jazzy / 2009-05-06 03:06:21   

Can you please guys put together files and documentation on how to install Horizontal Menu.

I have tried several times and it does not work.


Vaska A / 2009-05-06 05:48:03   

Have you been reading the comments in this thread?

No...it would be really nice if people would help finish this. I'm deleting that 'demo' from the server right now (which is not based on this).

This tutorial doesn't work...the code was never finished and never really tested. I should close this thread...but I won't.

Rodebloem / 2010-01-12 21:18:24   

Ouch, I tried this out with my site and didn't have my original plugin index saved... now ive undone my work and don't know how to go back before I tried this. Just been wanting a horizontal menu that opens with the hover over the logo but couldn't figure it out. Now I don't know what my plugin index would have looked like. Just want my original setup, my index in my template is as it was before I messed with it... but how do I restore the plugin? Yikes, I wish I was more experienced. Feel so limited with this set up so far. Any suggestions??

Thanks so much

rowstyles / 2010-03-29 16:24:03   

Can someone re-post the files for installation?


ivo_valadares / 2010-03-29 21:31:20   

Yes. It would be nice to have the files for this plugin.


Klara / 2010-03-30 14:23:45   

I'd love to have this plugin!

Vaska; I've read in some posts of yours that there is a new version coming with an horizontal menu in it, though these have been posted some year ago, is this version out? Is it in the version coming out or has it been cancelled?

arsondpi / 2010-03-30 17:28:29   

Mathieu build two themes that you can find in the forum.
Search for Centered and Columner...

rowstyles / 2010-03-30 21:42:07   

Hey guys, for those of you who have been experimenting with the hover drop-down menu but experiencing problems, I edited Ross Cairns' version and it's now working fairly well.

Here's the script:


This thread has been closed, thank you.