Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Rollover Drop Down Menu

S

sbryan

macrumors member
Original poster
Jun 6, 2007
96
0
What's the most efficient way to code Navigation buttons that drop down to display different items (i.e. About Us --> Completed Projects, Team, Mission Statement, etc.)

I tried to do it using a swap image, a transparent GIF and a series of images... but I believe that's too complicated to maintain.
 
Most efficient way?

To me efficiency means overall the easiest way to do it so you spend the least amount of time writing code and customizing plus the menu is scalable and cross-browser compatible so you have less worries about code and more focus on menu content and design.

I'd look into Javascript frameworks that take all these issues into account, not just one or two of said issues. These include JQuery Menu Plugins or the MooTools version.

You can do the same with basic CSS, Javascript and HTML - but the frameworks I listed are pre-written, DOM specific (standards compliant), well supported and easy to customize. To me, that's efficiency in action.

-jim
 
This is related to the appearance of <li> items in an un-ordered list.

I have three buttons, each an <li> item, displayed inline, without bullet styling. For whatever reason, this <ul> is indented about 47px.

There is no styling.

An image not in a un-ordered list displays without being indented.

I tried starting over twice. I checked the page properties to make sure there wasn't a setting messing things up. There wasn't.

Any idea as to what is causing this?
 
angelwatt said:
Could you post the code (HTML and CSS)? There's a couple things that could be up.
Click to expand...

I discovered what was hosing it up, but I'm not sure why I need to make the changes I made.

I hadn't specified margin or padding for the <ul>. When I specify 0 for padding-left, padding-top, margin-left, and margin-top it works.
 
sbryan said:
I discovered what was hosing it up, but I'm not sure why I need to make the changes I made.

I hadn't specified margin or padding for the <ul>. When I specify 0 for padding-left, padding-top, margin-left, and margin-top it works.
Click to expand...

That was one idea I had. There's a number of default styles browsers add to elements. That's why those CSS Reset style sheets are popular. That way all the styles have to be deliberately set and looks more uniform across browsers.
 
I know I'm in the wrong spot - but I wish they had this option in iWeb!

Obviously, without a lot of repetitive trickery.

I'm leaving this post! I know you hardcore coders hate us WYSIWYG losers!
 
angelwatt said:
That was one idea I had. There's a number of default styles browsers add to elements. That's why those CSS Reset style sheets are popular. That way all the styles have to be deliberately set and looks more uniform across browsers.
Click to expand...

I hammered out the left/right padding and margins in the horizontal list, but within the line items of that list, I have other <ul>'s that are oriented vertically.

They have unneeded padding, too. I tried doing the same sort of fix but it didn't work. I found a Reset Style Sheet in the Yahoo Dev community and that didn't work, either. Any thoughts on this? It appears with extra padding in Safari, FF, Opera, and IE.
 
sbryan said:
I hammered out the left/right padding and margins in the horizontal list, but within the line items of that list, I have other <ul>'s that are oriented vertically.

They have unneeded padding, too. I tried doing the same sort of fix but it didn't work. I found a Reset Style Sheet in the Yahoo Dev community and that didn't work, either. Any thoughts on this? It appears with extra padding in Safari, FF, Opera, and IE.
Click to expand...

My own reset is based on Eric Meyers'. I'm not sure about new ideas unless you can show some code that can produce the issue. Otherwise it's just guessing.
 
CSS Play

If your looking to create some drop down menus, you can do so with just CSS so you don't need any java script or any other coding.

One of my favorite sites is http://www.cssplay.co.uk/ this site is amazing teaching you how to do some crazy stuff with css and is a great learning tool.
 
angelwatt said:
My own reset is based on Eric Meyers'. I'm not sure about new ideas unless you can show some code that can produce the issue. Otherwise it's just guessing.
Click to expand...

Sweet. That reset helped me determine the problem. It was the line-height!

Once I introduce LightBox v2.0 or ThickBox v3.1 in addition to the Moo Tools menu plug-in, my previously working menu is broken.

Both plug-ins are popular image gallery plug-ins.

I thought it best to add to this thread instead of creating a new one.

Thanks,
SB
 
Please see this site for a better idea of the problem. Possibly related to the Z-index properties that Lightbox, Thickbox, Slimbox, etc. introduce.
 
When I look at the page, the JavaScript files

/test/js/mootools-for-dropdown.js
/test/js/UvumiDropdown.js

are not found and thus causes errors. It's return 403 Forbidden errors for them. Does this happen for you as well?
 
Java Index

The files are there. They were working previously in a live environment. When I throw another plug-in into the mix, that's when things go haywire.

Also, the only link that works is the main page. Other content has not been added. I forgot to mention that.

angelwatt said:
When I look at the page, the JavaScript files

/test/js/mootools-for-dropdown.js
/test/js/UvumiDropdown.js

are not found and thus causes errors. It's return 403 Forbidden errors for them. Does this happen for you as well?
Click to expand...
 
Yes, they're there, but I'm getting "forbidden" messages, not "not found" messages.

You don't have permission to access /test/js/mootools-for-dropdown.js on this server.
Click to expand...

You might want to check the file permissions.
 
Excellent.

Figured it out this morning.

I used a Lightbox alternative called Slimbox from the same community that produced the drop-down menu using Mootools.

In addition, permissions on my script folder were hosing things up.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back