Jump to content
Stef's Coding Community
Sign in to follow this  
newseed

A Menu Challenge

Recommended Posts

No, it's not game like challenge but an actual problem that I would like to see if it can be possible to solved. It's really not a problem but more or less an added feature for the client.

 

 

Here's the actual site:

 

ww w.calt rout.org/

 

This menu was done using DHTML Menu Builder (ht tp://softw are.xfx.net/utilities/dmbuilder/index.htm).

 

If hover over About Us, you will see how it changes to light yellow in which it it breaks open the second level top border (intentionally). Move the mouse down to Conversation Partners and you will see the same thing.

 

The client wanted to move away from this Menu Builder software and so I was given the task to create a css dropdown flyout menu. Here's the result:

 

ww w.calt rout.org/new-menu/dropdown-flyout-2.html

 

If you hover over About Us, the dropdown ul has a border around it and again with the second level.

 

What I like to do it achieve the same visual affect as the original where the border breaks open when hovered.

 

Example:

 

example.jpg

 

Any suggestions how I might be able to pull this off?

Share this post


Link to post
Share on other sites

Well I have a partial solution for the top link, I imagine the flyout would work the same. I hope this helps

 

Add height 29px to the following

#nav li:hover > a.top_link {
   color: #294F2D;
   background: #ffffcc;
   height: 29px;
}
#nav li:hover > a.top_link span {
   background: #ffffcc;
   height: 29px;

}
#nav li:hover > a.top_link span.down {
   background: #ffffcc;
   height: 29px;
}

 

and change your z-index to -300 in this

#nav li:hover ul.sub {
   left: 0px;
   top: 27px;
   background: #ffffcc;
   padding: 3px;
   border: 1px solid #9F7327;
   white-space: nowrap;
   width: 160px;
   height: auto;
   z-index: -300;
   padding: 0 5px;

}

 

If it doesn't work I'll post the complete code, as I may have missed some vital piece of info.

Edited by virtual

Share this post


Link to post
Share on other sites

Thanks. Unfortunately this did not work. I tried to use the same approach before to no avail.

 

I have implemented your css code in which you can view using the original link in the first post.

Share this post


Link to post
Share on other sites

1. I think the way I would approach it is to make images for the hover state for the top level like About which have no bottom border and are slightly higher than the top level height and overlap the drop down level concealing half the top border of Mission History.

 

2. Mission History's top border covers two top level items and there may be a way to break a border along part of a length. I think I read about this once but can't remember how it was done.

 

3. There is also another possibility using the border-image attribute which could have only part of a border along the top of About but border-image only works in modern browsers.

Share this post


Link to post
Share on other sites

Well I can assure you it worked on my Mac for the top links. I will look at it again today. I noticed that you said

I have implemented your css code in which you can view using the original link in the first post.

I went to the original link but the css is still the same, the added height and the change in z-index is not there.

 

I did almost what Wickham was saying without an image, making the length of the hover state for About longer so that it covers the top border, but that only works if the drop down is behind the top link level.

Share this post


Link to post
Share on other sites

Your menu and css are at the following link:

http://180virtual.com/newseed_menu/index.html

 

I have tested on Mac in Firefox 3.5, Safari and Opera and the border is no longer there from the top link hover nor from the right hand flyout "Conservation Partners". Even the Regions top link no longer has the border on hover.

However I did not bother with the left side flyouts, in case you still tell me the whole does not work. :(

Edited by virtual

Share this post


Link to post
Share on other sites

Thanks virtual and my apologies because I edited the wrong css which is why you didn't see the results.

 

I've just finished implementing the styles just prior to your last post and it does indeed work. I even touched it up a bit to have borders in the parent li which makes it much nicer. You can review my link again to see the results.

 

As for the flyout portion, it's not really important and I certainly don't have the time to go further with this. Client is already happy as is but probably more so since you provided a solution to my feature request.

 

You are welcome to try to find a solution for the flyout but it's not necessary.

 

Thanks.

Share this post


Link to post
Share on other sites

Have you checked on a MAC?

In Safari and Firefox from About the flyout still has a border, in Conservation the flyout is on the left with several pixels of white space and the flyouts from it don't work because of the gap. Regions has double borders on each side. In Opera there some other weird things going on.

 

I guess you must be working on it, it's changing as I refresh.

Edited by virtual

Share this post


Link to post
Share on other sites

I think I have solved the flyout border issue....and yes I was working on it.

 

Give it a look and let me know if you find good results for the dropdown / flyout. (ignore Conversation's and Region's dropdown/flyout because it's still a work in progress)

Share this post


Link to post
Share on other sites

Yes the About drop down and flyout are fine in all 3 browsers. Let me know if you want me to check the others later on.

Share this post


Link to post
Share on other sites

I've just finished the menu and it's working as I hoped. Surprisingly, the son of a gun is visually the same in IE6 too.

 

Thanks for your part in this.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...