Pure CSS Dropdown

I have a center aligned fixed width site. Can I do a pure css vertical dropdown menu with flexible positioning to account for the varying horizontal positions of the page based on it's center alignment? Thanks

 

As far as I know - it'll be ok. As long as it has flexible positioning

 

Yes, that's the question. how to have flexible positioning without javascript. Maybe some clever way of creating a container of some sort and hiding part of it (clipping?) and showing it on hover?

 

Yes, you can. You just need to account for the width of the browser's viewport (not to be confused with screen resolution, which is meaningless) and how much of that viewport is taken up by the Web page (for example, whether the person using the site has increased the text size or not).

 

This is correct, pls test the page in various sizes with the browsers viewport taken into consideration. Exactly as above, whether someone has hit ctrl + etc

 

or in my case, the control button plus the mouse wheel (gotta love Opera)

 

Isn't that on most Gecko browsers and Opera? Ctrl + mouse wheel.

 

Yes, thats on most applications now. MS Office, Adobe Suite and most webbrowser support this.

BP

 

Anyone uses XSitePro and if so , is there a way to do css vertical dropdown menu ? I know the new version 2.0 is coming up but they are tight lip about what will be included other then "many features"

 

How can you dynamically check that and adjust that without using javascript? Essentially, I want the dropdown to line up under the top link regardless of where the top link ends up being due to the center alignment of the page.

 

Why the hell would you want to go through all this trouble in the first place? Just use Javascript.

 

Because anytime you can use CSS instead of javascript, it's better. I'm thinking about ideas that might be a little hokey. For example, do you think it would work if I made the nav and it's hidden dropdown a z-index 2 and then using the display or visibility property on hover. If I put the nav on a different z-index, would it still automatically center like everything on the first z-index?

 

I'd actually use absolute positioning for this. Set the list item the nested list is in to relative, then set the position of the nested list to absolute (it will now be relative to its parent, the list item) and left to -999em;

Then when the list item is hovered over, set the left position on the nested list to 0;

Or are we talking about two completely different things here?

 

Excluding Javascript, do Suckerfish dropdowns not do what you want?

 

There's nothing nested, only a drop down that becomes visible when the top link is hovered.

Absolute positioning. Of course. I'm so stupid. I forgot that absolute positioning was in relation to it's containing block, not the viewport (unless there are no containing blocks). So as the page container moves due to it's center positioning, the dropdown will naturally move with it. Duh. Thanks for the reminder.

 

I'm not nesting anything. I think I was misunderstood because the answer was so easy that people assumed I was talking about something else. Whoops.

 

Nested in "nested elements" - I'm talking about HTML here, not CSS.

For example, <h1>Top Level Heading<span></span></h1> has a span element nested inside the H1 element.

Or in your case, the unordered list is inside the list item containing it. I guess a better way to think about it would be a parent-child relationship.

 

I'm not nesting anything in the html. It's just a simple dropdown of links that become visible when the top, visible link is hovered over. I simply forgot that absolute positioning can be in relation to it's containing box and not the viewport. So it will move with the container since it is part of it, or I should say, because it's coordinates are relative to it's containing box.. Problem solved.

 

Link to markup?

 

I don't have any, it was a theoretical sort of question. But all I would do is create a container, put some top horizontal links, and then, create the dropdown links as an absolutely positioned dropdown link container that is initially set to invisible, and then, when the regular, visible top link is hovered over, the dropdown container becomes visible. Actually, the hover is the questionable part now because it only relates to itself. Therefore it can only effect it's own appearance, and not the appearance of another element (the hidden dropdown). So i still might need javascript unless someone knows how to use css to get around this. Maybe make the link and the hidden dropdown all in the same container and use the clip attribute?