My sexy pure CSS mega drop down

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Adam S's picture

The menu system on the left is superfish on the on the right is three mega drop down tabs. They mega drop down tabs are all div elements so I can put virtually anything in there and create regions. List, slide show, menu or a list, slide show and a menu. What I'm hoping to do is create an exposed filter views search block using hook_form or something (I'm not sure) to redirect the results to a different page.

The header has two divs each containing a container div with the class .wrap. I figure once I get my elements spaced where I want them I can create in PhotoShop a background and just splice it into four parts. Should give the ability to create some very cool design.

As you can see I kept the Dynamic Display Block from my old site. In the right column the Quick Tabs module will be used to create tabs.

I can't talk about just yet because of the competition. I wish I could show you what I'm doing with the topic hubs.

AttachmentSize
sexymegadropdown.jpg94.97 KB

Comments

nice...

IrishGringo's picture

Are you using the Superfish mocule? or did you just put superfish in the theme?
can you talk more about you did this? perhaps some code examples?

Yes, I used the Superfish

Adam S's picture

Yes, I used the Superfish module in that example. http://drupal.org/project/superfish. IE wasn't working on my computer for some reason which I thought was a great thing until I thought about having a look at my website in IE7. Ooops. Now I'm just being a jackass writing this. A new version of the superfish module was released April 13 which I would like to have a look at.

You can also have a look at the Dynamic Persistent Menu http://drupal.org/project/dynamic_persistent_menu. Framework theme has native support for them http://drupal.org/project/framework. OpenPublish was at some point based on Framework.

Here is the code for the pure CSS mega drop down. All you need to do is put regions in them. http://www.visibilityinherit.com/code/mega-drop-down.php

Marine job board with Drupal 7 at http://windwardjobs.com

Superfish CSS for OP menubar?

ithacaindy's picture

I'm looking for instructions how to modify the sf/css/superfish.css file to match the default OP menu CSS. Any tips?

How to Add Superfish Without Breaking OP's Design?

ithacaindy's picture

I added Superfish to my site, following directions from Jeff Burnz, but it broke the OP design. How do I modify the following to stay within the OP design:

In *.info:

regions[superfish_menu] = Superfish Menu
stylesheets[all][] = sf/css/superfish.css
stylesheets[all][] = sf/css/theme.css
scripts[]          = sf/js/superfish.js

In page.tpl.php:

<?php if ($superfish_menu): ?>
  <div id="superfish"><?php print $superfish_menu; ?></div>
<?php endif; ?>

Thanks.

Adamsohn, Could you please

kenyan's picture

Adamsohn,
Could you please let us newbies 'know' how to change the OP primary links to the Mega cc dropdown please?
More like could you maybe post the changed primary links css if its not too much of a bother?

This is advanced theming

Adam S's picture

This is advanced theming stuff. I was hoping that someone who knows what they are doing would also be interested in this idea of using a dropdown menu with block regions for navigation. For the time this is actually well past my ability.

Marine job board with Drupal 7 at http://windwardjobs.com

ok how about the dropdown

kenyan's picture

ok
how about the dropdown menu on your site?
I have been trying to get the same horizontal dropdowns (as in 2nd level is horizontal too) for ages.
Care to share? :)

What about this module?

jsims281's picture

I've just started using this module which produces mega menus really easily:

http://drupal.org/project/megamenu

What has your experience been

pkcho's picture

What has your experience been like with the megamenu module? Are you having problems with it at all? The project says that it is pre-alpha and should not be used on a production site, is this true from your experience?

Thank you,
Joe

How do you build...

shinz83's picture

I've enabled the module in my OpenPublish install.. and now I need the next steps. How can I make the primary links use the megamenu? How would I go about setting it up?

Thanks!

Mega menu for 4 levels using superfish module

eljak's picture

My approach to this is to set the menu to have the navbar for the top 2 levels and a mega menu for the 3rd and 4rth levels.
I am using the wrapping method found in this code : http://www.i-cre8.com/blog/tutorials/jquery/superfish-mega-menu/index.php, i am adding the wrappers divs with jquery in the page.tpl.php file.
But at this stage i still have the problem that the 4rth level items are hidden and they appear when the parent is hovered, so i am trying to find a way to cancel superfish behavior from them.
Is this a good solution?

MegaMenu

duckzland's picture

What do you guys think about my mega menu ? http://duckzland.com

Gorgeous

bevenson's picture

duckzland, it's gorgeous! Is this in OP?!