/    Sign up×
Community /Pin to ProfileBookmark

Drop down menus

Copy linkTweet thisAlerts:
Jan 28.2006

So I started [URL=http://www.webdeveloper.com/forum/showthread.php?t=93021]this thread[/URL] in the javascript section about this, thinking it would be done with that. But people told me that CSS would be a better solution. Here’s my latest post from that thread, which I still need help with. Thanks.

[URL]http://homepage.mac.com/nemesis_256/test[/URL]

OK so I’m kinda getting something (by using the suckerfish menus tutorial) but there’s still lots of problems. The working menus are the lower ones, where there’s the 3D Art graphic and Grunts and Remoras.

First I can’t use image maps in these images. If you go to the 4th square, you’ll see that the whole menu disappears when you go over the map. Originally I had a big long image, and I was gonna use image maps for the links. So since that didn’t work I seperated the squares. But now the images go on another line if they go all the way to the next menu (grunts in this case). Notice that there aren’t any <li> tags for those images at all.

Second is the spacing between the menus. I would want it to be close up like the menu on the top of the page, not have 200 or whatever pixels like it is now.

Last (I think) but not least is stupid IE. The menus show up on the right instead of on the bottom. Anyway to fix this?

The location for these menus is up in the black where the other one is. That menu is at the bottom of a table. Is this going to cause a problem, since the menu would be going down outside of the table? I’ve been told that I can do all this layout stuff I’m doing with the table with CSS, but I don’t know how. That would be having the black bar the width of the browser window, having the 2 images on each sides, and the menu centered. It would also be nice if there wasn’t that white border around the black.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 28.2006 — It's supposed to be (Son of) Suckerfish dropdowns, but with images/image maps in the submenus. Is that the intension?

First your missing the classes that make it work in IE.

The submenu probably needs to look like this, for the image map to work:&lt;li&gt;
&lt;a href="stuff.html"&gt;
&lt;img src="images/square.png"&gt;
&lt;img src="images/square.png"&gt;
&lt;img src="images/square.png"&gt;
&lt;/a&gt;
&lt;img src="images/square.png" usemap="#menu"&gt;
&lt;map name="menu"&gt;
&lt;area shape="rect" coords="5,5,30,30" href="stuff.html" alt="Home"&gt;
&lt;/map&gt;
&lt;/li&gt;

Last (I think) but not least is stupid IE. The menus show up on the right instead of on the bottom.[/QUOTE]Don't see any difference to FF, except in IE5 where the submenu is slightly higher.

Use the html 4 strict DTD not the xhtml.

Then [URL=http://validator.w3.org/]validate[/URL] the document.
Copy linkTweet thisAlerts:
@nemesis_256authorJan 28.2006 — So I moved the <map> into the <li> tag, removed the <a> from the <img> (I have no idea why I did that, that was stupid). Now it's working in firefox (mac) and IE 5.something (windows). IE Mac won't start up right now, it crashes all the time, but that's the one I was having the menus show up on the right instead of the left. With the map moved inside the <li> tag, it still won't work on Safari (same as before, it disappears once you go over the image map).

Another weird behavior is on IE 6.0 on the PC. The boxes often disappear when the cursor goes between two of the squares (over the white areas). It works if you move the cursor at a certain speed. If you can make it to the image that has the image map, it works.

I need to find out how to do this with javascript, like I originally intended....might work better.

Why do you say I should use HTML 4.01 strict and not xhtml 1.0? This is for a class, and I think I need to use xhtml.
Copy linkTweet thisAlerts:
@FangJan 29.2006 — I need to find out how to do this with javascript, like I originally intended....might work better.[/QUOTE]Make a decision. No point in continuing with css if you want it in JavaScript.
Why do you say I should use HTML 4.01 strict and not xhtml 1.0? This is for a class, and I think I need to use xhtml.[/QUOTE]What you have written so far is neither html 4 strict nor xhtml. Read-up on both of these.
Copy linkTweet thisAlerts:
@nemesis_256authorJan 30.2006 — OK so I fixed most of the menu, the code is a lot cleaner now.

Two more small problems. I want the menu to be aligned in the center in that table. Right now it's left aligned.

Second is where the drop down menus show up. For example right now, the first square is directly below the word 3d art, but can I change it so the 3rd (or whatever, give a value in pixels) image is below it? Basically just shift the images over.
Copy linkTweet thisAlerts:
@FangJan 30.2006 — <i>
</i>#nav {width:30em;} /* element must have width to be aligned */

#nav li &gt; ul {
top: auto;
left: -100px; /* or some othe -ve value, same for IE! */
}

#nav li:hover ul, #nav li.over ul{ display: block; left: -100px; }


Still need to [URL=http://validator.w3.org/]validate[/URL] the document.
×

Success!

Help @nemesis_256 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...