I’m working with two css menus, one above the other. The top acting as the main navigation menu with drop-downs and the bottom as a breadcrumb trail but with similar rollovers to the above. These work fine. Except the top menu drop-downs go under the menu items below rather than over. Is there a way of switching this around or do I have to completely reconfigure the menus, or do away with the bottom css menu and replace it with something more conventional.
I’ve tried various permutations without success. Working with a box model layout.
you have a closed (height limited) section on top (headerarea with menu)
the upper-content area (this hype thing) and headers
the 4-column-grid as the third one
finally the footer-area
will mean, that submenus of the upper css-menu won’t will appear cause this container is probably just 65px in height and therefore cut-off.
So I was forced to rebuilt my BM in the following way:
The header and the the upper-content area situated together in one box.
Then the the 4-column-grid as the second one
The footer area.
Within your first main area you now win that space you need for the submenu.
The point is, that the submenus only bridges containers one above the other with a defined width (960px) but not containers with the 100% width sitting one above the other.
Hrggnnn - I know that this might sound a bit curious and mazed, but it’s in fact the point of the gist.
Unfortunately, I don’t have the example of the rebuilt live (only on my MAMP Server) - but as soon I have, I’ll let you know.
BTW - all content of this page is done with webyep (all - including the menu).
My problem I think is simpler than I perhaps explained.
Imagine two horizontally aligned css menu’s (freeway action) - one immediately above the other. The top one has some drop-down sub menu items, the bottom is just straight.
Problem is that the top sub menu drop-downs go behind the bottom menu rather than over the top of the separate menu below it.
I’ve tried various permutations of re arranging the div’s they are in and also tried nesting in different ways, it seems the navigation ‘above’ will always slip behind that which is below. It cannot like an item be brought forward.
I might just have to use a more conventional rollover menu for the lower ‘breadcrumb’ navigation menu.
Normally when dealing with layered items you can adjust their z-index (the layer height off of the page) by simply dragging the item up and down in the site panel. Use the cog icon at the foot of the site panel to display items and drag your layer lower in the window to raise it higher in the stack of items. Items at the bottom of the list will be above the ones listed above them.
I say normally because if your page has been constructed using an inflow construction (boxes within boxes) you may find that you can’t adjust the ordering of these items. In that case you may have to add a style to your page to raise the submenu items over the top of the second menu item.
If you post an example of your page online I’m sure I can tell you what this style may look like.
Regards,
Tim.
On 18 Oct 2011, at 12:58, seoras wrote:
I’ve tried various permutations without success. Working with a box model layout.
Yes Tim, that’s the general situation. I can’t move the layers up or down in the site panel because of inflow nature. All the general content will be cms or I might have done it differently, still could of course.
I can see that both of your menus have a z-index of 1 which means they occupy the same layer on the page. If you can’t move the layer in the layout, because you are using an inflow page construction, then one option is to add a custom piece of CSS that will force one of the menus onto another layer.
Yes Tim, that’s the general situation. I can’t move the layers up or down in the site panel because of inflow nature. All the general content will be cms or I might have done it differently, still could of course.
But having a brief look at your design, I’d recommend you to go probably another way down the road.
You said you did it as a boxmodel layout, you’ll come to a caveat named “Masterpage”. As you know, Inline Construction breaks with the Master Pages and especially the css menus can be a nightmare to re-fix cause in strangest case you have to do a single entry on all child pages (and you have a lot of them).
In your case, you could wrap your thoughts about a Hybrid-BM (Dan named it once that way) cause you have no need to center your page with centered boxes in a 100% one.
The only fear you have is (I guess) the content/footer relationship, so you could design your header Freeway-like with layers and an underlying big wrapper only containing the content and footer as inline stuff.
So you’d take advantage of both:
Freeway’s Master/Child relation and pushed down footer by growing content. Just a suggestion.
Dan did a screencast on this topic, but he’s actually off (this would explain all)
Thanks for thoughts and advice, always appreciated.
The client will be populating each page via cms (Pulse) so needed an expandable solution as you guessed, I could separate but would still need a wrap for the drop shadow, though the general layout and design is in flux at the moment, I could drop the drop shadow. Client wanted the navigation along the top, I would have put it elsewhere but… etc.
I NEVER use master pages (!) though I was considering it this time round due to the number of pages. Master pages are ‘for me’ a road to disaster, deleting elements I don’t wish too etc. I would only consider for the most basic layout elements. I’ll certainly look into the css menu issue, thanks.
When you have a website with only a few pages, its easier to go through each and adjust accordingly. Most of the sites I do are very small, this one is a redesign from one of my very first, which has built up and expanded over the years.
Hi,
I’ve just tested my sample page below in IE8 (Win XP) and it appears to work as expected with the top menu opening the sub menus over the second one. http://www.freewayactions.com/test/css-menu-z-index/
Regards,
Tim.
On 20 Oct 2011, at 12:28, seoras wrote:
Just tested on my pc and IE 8 and it doesn’t work unfortunately, though not too surprised. Do you think I could sue Bill Gates.
I think with the various permutations I was working on something had gone array. Works now, just a slight spacing issue that isn’t a problem as such.
I tried splitting the header / nav section from the text area as suggested but there’s more of a spacing issue between the elements with IE8 etc. than completely inline.
I have a problem. Don’t know if this is the same issue has. I have CSS menu (action) that displays the submenu below the picture on the page, regardless where I put the menu (on top) and picture (bottom).
Yes that looks like a similar issue to mine, that I had with this site: (http://www.isleofrum.com)
Follow Tim’s advice and snippet of code and see what happens, remembering of course to change the name of - ‘#navigationdiv’ to whatever you have called your navigation div.
I’ve used Tim’s snippet on several occasions now. :)))
Hi there
Thanks for the tip. I have tried it but nothing happens. (I am probably doing something wrong).
If you check the site in question you will see that I am using 8 separate CSS menus. Only the one with a sub menu is behaving this way, and only on it’s own page. I used the name of that menu in the code. What did I do wrong…?
Try a different z-index:? I think that relates to the position of the layer, for the page that doesn’t work. Or check you have the div “carouselbox” positioned the same as “backgroundimage” You will see this in the site panel on the left. They appear to be positioned differently so have a different z-index.
I’m no code person so err… - good luck:))
Can’t quite see your rational for having 8 css menus when one would have done. But it works, so…
Yes George - the construction is hampered by 8 CSS menus and a Carousel.
While you can affect the relative z-indexes of the menus within their own menu div the really more important relationship is between the main menu div and the Carousel Div.
Make sure that the main pane of the Carousel is ‘Sent to Back’ and the main menu Div is ‘Bring to Front’
