14 replies [Last post]
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Well my site is nearly complete, there's just one thing the client wants (I personally love it how it is, but still Laughing out loud )

http://www.geocities.com/magicboy2000uk/mkcf/

The hover menu on the left (adapted from the fantastic click submenu thing) - she doesn't want the submenus appearing underneath, but to the right hand side.

The way it's done now is easily - a jot of JS switched the submenus from hidden to block.

I have a feeling that there's gonna need to be that JS removed and a lot of CSS and absolute positioning going on Tongue blech

Now I have not much experience with this, so if anyone could help me out it would be great.

Cheers Laughing out loud

The css is http://www.geocities.com/magicboy2000uk/mkcf/layout.css

Verschwindende wrote:
  • CSS doesn't make pies

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Submenu hover help

Hi thepineapplehead,
Have you tried using display:inline; instead of block.
The other thing I would try is setting the li's of the sub menu to float:left;

Hope that helps

Anonymous
Anonymous's picture
Guru

Submenu hover help

The menus all stay open if you roll over them too quickly.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

Laughing out loud I know

I'll try float left, or display inline, and see how it goes. Thanks.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

Okay, display:inline merely does the same thing but gives the submenus a bigger bottom margin.

How woudl I go about editing the js code to change them to float: left; ?

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

<bump>

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Submenu hover help

The menus didn't work on click for me but on hover. As I am more familiar with suckerfish, so here is a quick reworking of suckerfish dropdowns to provide a vertical menu that expands horizontally.

It should be able to be dropped into your <div> along with the positioning styles and javascript.

The key positioning style for the fly-outs is:

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	z-index: 6;
	left: 5em;
	top: 0em;
}

Other wise, the only differences from the original are:

  • to remove the float:left from #nav and #nav li
  • add in position:relative to be able to control to control the top of the fly out - necessary on horizontal flyouts to give a larger overlap and minimize the chances of the user losing hover while moving to the flyout.
  • add in z-indexes as suckerfish relies on transparent backgrounds - which is ok if the flyouts don't overlap other parts of the menu - if you alter the positioning of the flyouts so that they don't overlap they can be removed
  • make a couple of adjustments to cater for IE's peculiar way of looking at the world.

Altering the visual styling to match your current menu shouldn't be too hard.

A couple of notes on the website.
- I am not a fan of changing font-weight on hover as it causes the text to expand. I find that jumping bad enough, but if the expansion is sufficient to cause text to move over two lines ...
- most of your link titles are exactly the same as the link prompt. For me it makes more sense when the title is used to provide a little more detail about what the link means or where it will take you.

[/]
briski
briski's picture
Offline
Elder
London
Last seen: 9 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Submenu hover help

Chris..S wrote:
A couple of notes on the website.
- I am not a fan of changing font-weight on hover as it causes the text to expand. I find that jumping bad enough, but if the expansion is sufficient to cause text to move over two lines ...
- most of your link titles are exactly the same as the link prompt. For me it makes more sense when the title is used to provide a little more detail about what the link means or where it will take you.

I would also just like to mention that the swishy background image you have behind the text, for me at least, makes the text hard to read. It's rather distracting, if you have to have it I would at least "wash" it out a bit more.

Also any reason you are using a H2 for Milton Keynes Christian Foundation and not H1?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

The bold on hover isn't my idea, it's the clients. Gawd bless em.

As for the H2 - I don't really know what I was thinking. I must have though I was using a page header, whereas I'm just using the logo.

Thanks Chris and Briski, I'll see what I can do.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

Ok, I'm getting right fed up with this.

http://www.geocities.com/magicboy2000uk/mkcf/index2.html

I'm sure there's numerous unnecessary code in the CSS (layout2.css)

How do I get rid of the hulking great left margin?

how do I apply a bottom margin to only the links on the left, not the submenu links?

And why the hell are they in Times New Roman?

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Submenu hover help

thepineapplehead wrote:
How do I get rid of the hulking great left margin?

#nav {margin-left:0; padding-left:0;}

remember by default browsers assign an indent to ul and ol elements Wink

thepineapplehead wrote:
how do I apply a bottom margin to only the links on the left, not the submenu links?

#nav li {margin-bottom: 1em;}
#nav ul li {margin-bottom: 0;}

thepineapplehead wrote:
And why the *beep* are they in Times New Roman?

I am not sure about this one. But I would never apply a font to the html element and I would be extremely wary about applying a font-size to an element and its descendent in the same style rule as you have ...
html, body, p {
	padding: 0;
	margin: 0
	font: .8em Verdana, Arial, Helvetica, sans-serif;
}

0.8em means body will use the font at 80% of the browser default setting. p will use the font at 80% of its parent's setting, which ultimately means 64% of the browser default setting. But in your case, for those <p> within #content (which also uses a font-size of 0.8em) that will be ~50% of browser default setting. Font characteristics are inherited so it shouldn't really be necessary to define the same font on more than the outermost element.

Any how, I think the browser is upset with that first rule, change things to be.

html, body, p { margin:0; padding: 0;}
body { font: .8em Verdana, Arial, Helvetica, sans-serif;}

and remove the font style from #content.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

Thanks a bunch. I'm making a load of silly mistakes today, aren't I?

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Submenu hover help

thepineapplehead wrote:
Thanks a bunch. I'm making a load of silly mistakes today, aren't I?

Are your eyes getting like this -- Shock -- ?

Sounds like its time for break.

Cool

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Submenu hover help

Your in Quirks mode
Sorry just couldn't resist it TPH (you Doctype zealot you) Smile. Time to get yourself some real web space ?

I see that Gary has actually written this code then Wink

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Submenu hover help

Hugo wrote:
Your in Quirks mode
Sorry just couldn't resist it TPH (you Doctype zealot you) Smile. Time to get yourself some real web space ?

I see that Gary has actually written this code then Wink

Hugo.

Yes, unfortunately geo<naughty word>ies is being a bit gay, but it's only a temprary host until they move it to their host (http://www.mkchristianfoundation.co.uk/)

Quirks Mode . . . you big fool

And Gary . . . I couldn't thank you enough Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies