16 replies [Last post]
AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

I am trying to get a pop out menu working on our site, here's the test page I am doing it on:

http://www.meanmachinesmag.co.uk/test.html

The CSS for the menu is at the top of the stylesheet file:

http://www.meanmachinesmag.co.uk/style2.css

Basically I have got this more or less working in Firefox, however for some reason the pop-out effect doesn't work as I hoped in IE - being a bit of a noob I am stuck! Can anyone offer any advice?

Thanks
Darren

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 7 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Nice site and love the idea,

Nice site and love the idea, I'm a great big retro games fan!

The pop-up menu isnt't working for me in Firefox 2 RC2, how have you constructed it? Is it a well-known CSS menu (like the Suckerfish menu)?

Verschwindende wrote:
  • CSS doesn't make pies

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

Trying suckerfish!

Hi pineapplehead! thanks for the compliments, retro games are my passion, our site gets a lot of hits and we keep adding html text for the reviews from this much loved UK magazine.

The original code was some open source stuff which I hacked to pieces to get to look like what I wanted. Anyway I am getting nowhere so I have scrapped it in favour of the suckerfish menu you recommended.

I have modified the CSS to look like my original site menu, however now the rollovers do not align where they should! Can anyone help me with the following?

1, Get the pop-up menu to appear under the correct menu item

2, allow more than 3 options to show, there are 7 in the list under 'reviews'

Any help would be great, I'm basically trying to get it as close to our original menu but gain drop downs so I can bury more options

Cheers
Darren

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 7 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

I'm not too au fait with the

I'm not too au fait with the Suckerfish menu, so maybe someone will come along and find out where you're going wrong.

What I usually do is take the demo code, then change the stylesheets to match my site, then incorporate it into my site.

Are you using Suckerfish or Sons of Suckerfish menu?

Verschwindende wrote:
  • CSS doesn't make pies

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

Suckerfish

Well it was the suckerfish menu but I have already styled it up to the best of my ability - does anyone have any ideas about how i can sort those menus out when i center align it? Sad

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to validate your

You need to validate your markup - you've got extra closing list item tags throughout your menu.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

fixed!

sorry about that! i just added some more test options quickly and messed the structure up! the same problem remains however. any ideas?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try this

Try this instead:

#navcontainer { width: 724px; }

#nav, #nav ul { /* all lists */
font-size: 90%;
padding: 0;
margin: 0;
list-style: none;
background-color: #FF9933;
color: #000000;
font-weight:bold;
text-align: center;
}

#nav li { /* all list items */
font-weight:bold;
float: left;
margin: 0px 10px;
padding: 0;
position: relative; z-index: 10;
background-color: #FF9933;
}

#nav li a { text-decoration: none; }

#nav li li {
width: 12em;
margin: 0;
padding:3px;
border:1px solid #000000;
border-bottom:0px solid;
background:#FF9933;
}

#nav li ul { /* second-level lists */
position: absolute;
top: 20px;
width: 8em;
left: -999em;
}

#nav li ul li:hover{ background-color:#FFCA95; }

#nav li:hover ul, #nav li.sfhover ul { left: auto; }

You'll probably also need to add the clearfix class to #nav.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

check it out

Thanks for the tips, it's a lot better now but not quite there yet.

The drop-downs don't appear in the right position in IE7 and I cannot roll over them in Firefox.... also the menu is not truly centered. Any ideas?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

OK, try this: #navcontainer

OK, try this:

#navcontainer { width: 724px; background-color: #FF9933; }

#nav, #nav ul { /* all lists */
font-size: 90%;
padding: 0;
margin: 0;
list-style: none;
background-color: #FF9933;
color: #000000;
font-weight:bold;
text-align: center;
}

#nav li { /* all list items */
font-weight:bold;
float: left;
margin: 0px 11px;
padding: 0;
position: relative; z-index: 10;
background-color: #FF9933;
}

#nav a {
display: block;
float: left;
height: 20px;
text-decoration: none;
}

#nav li li a { height: auto; }

#nav li li {
width: 12em;
margin: 0;
padding:3px;
border:1px solid #000000;
border-bottom:0px solid;
background:#FF9933;
}

#nav li ul { /* second-level lists */
position: absolute;
top: 20px;
width: 8em;
left: -999em;
}

#nav li ul li:hover{ background-color:#FFCA95; }

#nav li:hover ul, #nav li.sfhover ul { left: 0; }

For some reason, IE didn't like left: auto on the :hover but 0 seems OK.
For the problem in FF, I've made the links display block and given them a height (height set back to auto for the submenu links).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

:-)

Ah that's a lot better. I noticed the rollover colour (the lighter orange) doesn't work in IE6 for some reason. Also do you know how I can get a 1px black line at the bottom of my pop-out menu?

The options still are not centered aligned in Firefox or IE (this is more obvious now I have removed one of the list options) - Do you think it might be better for me to just give up on this idea and left-align it?

Thanks for all the help so far, most appreciated!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I think they look better

I think they look better left aligned but if you want to center align them you could add text-align: center to #nav li li. For the bottom border you could either add a bottom border to the ul or give the last item a class and give it a bottom border.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

That didn't work for center

That didn't work for center aligning - I did mean the top level however - good tip for getting the bottom border using the UL.... I think it's more or less ready to go live now! Smile

edit: just checked IE6 and the menu breaks out of the container and the dropdowns don't work! arghhhh! back to the drawing board! Sad

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

For the breaking out of the

For the breaking out of the container problem, try reducing the list item margin to 8px (you might want to give IE 8px and other browsers 9px using IE conditional comments).
For the submenu rollover, change:

#nav li ul li:hover { background-color:#FFCA95; }

to this:

#nav li ul li:hover, #nav li ul li.sfhover { background-color:#FFCA95; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

Hi Tyssen, It's looking

Hi Tyssen,

It's looking great now so I have put it live:
http://www.meanmachinesmag.co.uk

Do you know how I can make the top menu items lower in IE6? They do not sit as nicely in the middle as in Firefox

Also I am having the problem that the styles do not work correctly on our forum:
http://www.meanmachinesmag.co.uk/forum/

I saw there was a style "nav" already so I have renamed the style to be called "top-nav" now (and the corresponding javascript for IE, etc) - still this has not solved the problem.... can you look at the source and see what might be wrong? i have copied all the styles across.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

AllYourBase wrote:Also I am

AllYourBase wrote:
Also I am having the problem that the styles do not work correctly on our forum:
http://www.meanmachinesmag.co.uk/forum/

Am I missing something? There's no dropdown on the forum.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AllYourBase
AllYourBase's picture
Offline
Regular
Last seen: 14 years 12 weeks ago
Joined: 2006-10-13
Posts: 14
Points: 0

Sorry I ended up removing

Sorry I ended up removing it, the dropdowns are dynamic now and it was a real mess getting it working within PHPBB! Sad

So on the whole how do you peeps feel the new style nav works on the site? Could I make any improvements? Smile