Jump Menu & Pop-Up Windows – Multiple issues

[Black Mamba]

Hi,

I’m trying to set up a jump menu that when you select an item from the list a new window pops up.

Issues so far:

• Links are not working. I don’t know much about javascript (self-taught) so must be making a very n00b mistake somewhere. I just can’t find it by myself.

• How do I apply the javascript to have the windows pop up to the menu items? I’d know how to do it the links were not part of the jump menu, but not with the menu.

• How do I style the menu? Font family, size and so on… This should be pretty simple and I’ve been trying with CSS but it’s not working!

Thanks.

http://codepen.io/ZHAA/pen/xbLEbG

[Black Mamba]

The reason was that, that was the “look and feel” I wanted.

But you’re right.
A simple dropdown ul li menu probably my best option.

I just found http://www.herzogdemeuron.com and that’s what’s being used there.

Now the issue is going to be styling it. I could go for something similar but I’m not sure I get how they’re doing it. It doesn’t look to be pure CSS.

[Black Mamba]

OK, I agree that using ul li is the way to go.

Issues so far:

• I need to click the text in order to open the pop up window. Clicking the blank space after the text (everything highlighted in blue) should also trigger the link.

• When I click a link and the new window pops up, the menu stays open. It should close automatically.

[Black Mamba]

@bearhead

Thanks. Looks great.

The only issue now is that adding a 2nd menu it doesn’t allow me to control them separately.

Edit:
Styling is also an issue.
I’ve been looking at herzogdemeuron.com css and can not replicate that style. Not even close!

[Black Mamba]

Oh, ok.
I was trying something like:

$(".menu, .menu2").click(function(){

Initially I had this:

OS X (Safari)

http://i.imgur.com/ziSg4Tx.png

Win (Firefox)

http://i.imgur.com/tWZAaAV.jpg

I’d like at least to be able to change font-family and font-size. Obviously the more flexibility the better, but overall I’d be happy with that.

herzogdemeuron looks like this:

OS X (Safari)

http://i.imgur.com/bs7OAY0.png
http://i.imgur.com/Y3ZjyUv.png

Win (Firefox)

http://i.imgur.com/E4LcjCD.jpg

Our code so far:

Any OS/browser

http://i.imgur.com/UBECiZD.jpg

Pretty different… :(

Edit: I’ve seen that in Chrome it actually looks pretty similar. What’s the issue the other browsers?

[Black Mamba]

Right, but herzogdemeuron’s page in Safari is not using the default styling.

The default would be this:
http://i.imgur.com/ziSg4Tx.png

Not this:
http://i.imgur.com/bs7OAY0.png

Right?

This is pretty much what I was looking for:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Drop-down_content

Should I go back to <select> and <option> ?

[Author]

Posts