SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Can anyone figure out a way to get another level popup to work?

    Can anyone figure out a way to get another level popup to work with this pure CSS click menu of mine?


    The only way I could fudge it was to include :hover on the second level. That holds it there when you add the second :target popup. But, that is sloppy as it is no longer click to go out and click closed to go back.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    why dont u get rid of the JS to close and simply add an anchor to "menu"?

    there is only ONE :target allowed so I am nto sure if having multiple levels could even be possible.


    I have done a similar multi-level menu, but it relies on :focus whcih mean ( i think) only FF could support it

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I do have an anchor to close. The js is only there to remove the back button problem with :target.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You can easily make another level pop out but as soon as you do that the previous level is no longer the target and will disappear thus leaving only the current child menu in view.

    You need a mechanism where the effect on the child maintains an effect on the parent and the only method I know is the float drop method used in Timo's dropdown menu that we used in the quiz. You may be able to replace the hover effects with :target but it could get complicated very quickly.

    It seems to be working in this reduced example using barebones code (instead of nested lists) but should work in a nested list.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    a {
        display:block;
        height:25px;
        text-decoration:none;
        color:#000;
        background:#ccc;
        width:200px;
        margin:0 -1px 0 0;/* negative right margin effectively makes this 199px wide */
    }
    a:hover{background:red;}
    a.main{
        float:left;
        margin:1000px -199px 0 0;/* 199px negative margin effectively makes this 1px wide. The 1000px bottom margin pushes the main link into view to counteract the fact that the parent div has been pulled upwards. */
    }
    div{width:200px;float:left;margin-top:-1000px}/* this pulls the whole menu above the viewport to make it invisible except for 
    the main link which we have pushed downwards to counteract this movement. The floated main link moves downwards but doesn't bring the static text that follows with it. */
    div div {width:auto;margin:0}/* submenu div must be with auto because we want it to expand and cause the float drop */
    
    /* remove the negative margin which has the effect of blocking the negative top margin on the submenu so that the sub menu is now pushed below the main link once again.*/
    div div#test1:target a{margin-right:1px;}/* This is the key ...... the sub links which are now in view  are made wider than the space allowed and cause the element to drop below the floated anchor. As usual with float drop all links that are in this sub div will be pulled with it as this is a feature of float drop. */
    
    #test2{margin-right:-100&#37;}
    div div#test1 div{visibility:hidden}
    div div#test1 div#test2:target{visibility:visible;margin-left:200px}
    div div:target a{margin-right:1px;}
    
    </style>
    </head>
    <body>
    <div><a class="main" href="#test1">Target</a>
        <div id="test1"><a href="#1">sub 1</a> 
               <a href="#test2">Open Sub link &raquo;</a>
                     
                    <div id="test2"><a href="#1">sub 2</a> 
                           <a href="#2">sub 2</a>
                             <a href="#3">sub 2</a> 
                             <a href="#4">sub 2</a> 
                    </div>
                 
               <a href="#3">sub 1</a> 
                 <a href="#4">sub 1</a> 
        </div>
    </div>
    </body>
    </html>
    Whether it's usable or not is another matter

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I'll play with that and see if I can make it usable.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Post back if it works, Eric (or if it doesn't). I haven't posted in here because I don't have the knowledge to make a sensible contribution, but I've been following with interest. I'd love to see if this can work properly.


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
  •