SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Shadow on a floating menu

    Hi,

    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.

    Looking forward to find out your thoughts.

    Regards,
    Iulian

    google-docs-menu.png

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Looks like you are talking about CSS3 box-shadow, if I understand rightly, but I'm not sure what you are referring to.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    See attached image.

    google-docs-menu-notes.png

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Regards,
    Iulian

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    http://www.sitepoint.com/forums/show...=1#post5406274

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    first of all,

    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?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
     
    <style type="text/css">
    ul{padding:0; margin:0; list-style:none;} /* a reset*/
    body {
        font-family: arial;
    }
    
    
    .toolbar li {padding: 3px 6px;}
    .menu-trigger {
        border: solid 1px transparent;
         position: relative;
        max-width: 150px;
        float:left;
    }
    .menu-trigger:hover {
        border-color:   #000;
        box-shadow: red 0 0 3px;
     }
    .menu-trigger:hover:after {
        position: absolute;
     	left:0;
    	right:0;
    	bottom: -3px;
    	height:5px;
    	background: #fff ;
    	z-index: 20;
    	content:'';
    	  
     }
    
    .menu-trigger ul  {
        width: 200px;
        position: absolute;
        top: 100%;
        left:-99999em;
        border: inherit;
        background-color: white;
        box-shadow: red 0 0 3px;
        z-index: 19;
        padding-top:5px;
    }
    .menu-trigger:hover ul  {
         left:-1px;
     }
     
     
    </style>
     
    </head>
    <body>
     
        <ul class="toolbar">
            <li class="menu-trigger" id="file-button">File
    		    <ul class="menu" id="file-menu">
    		        <li class="menu-item">Save</li>
    		        <li class="menu-item">Save As...</li>
    		        <li class="menu-item">Export</li>
    		        <li class="menu-invisibleline"></li>
    		    </ul>
            </li>
            <li class="menu-trigger" id="file-button">File
    		    <ul class="menu" id="file-menu">
    		        <li class="menu-item">Save</li>
    		        <li class="menu-item">Save As...</li>
    		        <li class="menu-item">Export</li>
    		        <li class="menu-invisibleline"></li>
    		    </ul>
            </li>
            <li class="menu-trigger" id="file-button">File
    		    <ul class="menu" id="file-menu">
    		        <li class="menu-item">Save</li>
    		        <li class="menu-item">Save As...</li>
    		        <li class="menu-item">Export</li>
    		        <li class="menu-invisibleline"></li>
    		    </ul>
            </li>
        </ul>
     
     
    </body>
    </html>
    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.

    hope that helps

  8. #8
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Iulian

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  10. #10
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Thanks and regards,
    Iulian

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by iulian View Post
    I know it doesn't work on older browsers, but that's fine...
    :after works in IE8+ but of course box-shadow only works in ie9+ anyway.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •