I am sure everyone of you had used, at least once, Google Docs. When you go on File and click to show the menu you will see the nice shadow effect on menu trigger and menu. I am wondering how they do it, I didn’t figured a way to have that effect without adding a new ghost element for the menu trigger which can accept z-index and appear 1px over the menu.
Ralph, thanks for looking into this. Yes, it’s the box-shadow property, but how do I get rid of the bottom border under File? “File” element and menu container element have different parents.
Google makes it hard to see how they’ve done it because it’s all done with pretty messy JS, but one option would be to use the :after pseudo element to create a little white patch that covers over the shadow at the bottom of the link.
I will look into the :after pseudo-element and I will post here any solution I find. If you have any example in your mind, I would appreciate if you could post it.
The best thing to do would be to get your dropdown as close to working as you can, and then we can help you get the box shadow working. It’s easier to help with the actual code you are using.
If you can’t post a link to your current work, then try to post a code example here, using a template like this:
Your menu should be structured as an unordered list. making your code semantic, it will work to your benefit whether or not you get your site looking like you want to
as far as the styling… maybe this is what you were looking for?
The sticky/clicking part will require either .js ( to to switch classes on elements) or some unsemantic markup which I would generally steer clear of, besides it would also limit your browser support.
dresden_phoenix, your solution is also valid and I would recommend it for any application where the elements can be structured this way. Most of the websites probably are doing it this way. In case of web apps is a little different, as you may be constrained by the framework to not follow the semantics.
In my HTML code above I tried to reproduce the conditions that create the problem, which is that the menu trigger and the floating menu are rendered in different parents, in which case z-index and other tricks cannot be applied.
would your framework permit the menu-triggers and menus to be wrapped within the same container , even if not adjacent? You may be able to use the general sibling selector (~) that way. If you are stuck with this exact mark up, am afraid then that ralph is right and.js would be the only way.
Sidenote: I am a little lost as to why a web app coded in HTML would WANT to follow HTML convention, but we get stuck with the client we get stuck with
Remove the z-indexes from the main containers and just use the :after element (with a z-index) on the tab to rub out the line. Using left and right it will auto size to the tab automatically.
Paul, your solution was exactly what I was looking for. I am not accustomed to the use of :after, so there were very few to none chances to come up with this on my own. I know it doesn’t work on older browsers, but that’s fine…