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

HTML & CSS
1

Can anyone figure out a way to get another level popup to work [URL=“http://www.visibilityinherit.com/projects/popup-menu-demo5.php”]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

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

I do have an anchor to close. The js is only there to remove the back button problem with :target.

4

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.


<!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 :slight_smile:

5

Thanks Paul! I’ll play with that and see if I can make it usable.

6

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.