Search code examples
csstransitiontargetstretch

CSS3 :target not working?

I have the following code :

<!DOCTYPE html>
<html>
    <head>
        <title>Void Museum</title>
        <meta charset="utf-8">
        <style type="text/css">
        html * {
            margin: 0;
            padding: 0;
            }
        #panel,
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            }
        #panel {
            left: -220px;
            width: 250px;
            background: #030;
            -webkit-transition: all 0.5s;
               -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                 -o-transition: all 0.5s;
                    transition: all 0.5s;
            }
        #content {
            left: 250px;
            right: 0;
            background: #003;
            }
        #panel:target {
            left: 0;
            background: red;
            }
        #content:target {
            background: yellow;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="panel">
            LEFT PANEL
        </div>
        <div id="content">
            CONTENT
        </div>
    </body>
</html>

And two questions :

  • Why isn't the panel coming out when i click on it ?

  • How could i force the #content block's left property to 250px when #panel is targeted ? Should i change all this to use relative positions ? If so, how would i force #content not to overflow of the right side of the page ?

This code does work when i use :hover instead of :target so i assume there's something i don't understand about :target.

Thanks in advance :)

Solution

  • The reason it isn't working is because you are using :target as "is-clicked" or similar, which doesn't exist. In CSS, something that can mimic that behaviour is the following:

    You make a href to an id (e.g. #panel) and then click it. Now you have a #panel on your url and can start using :target

    See here

    The text links to #panel, activating :target and allowing it to work as if it was "clicked".