Question

I’m using a “windowed layout” (that is, the content inside certain divs look like in-browser windows, for a web-app look), and I’d like for the following function:

• When a div is clicked, it gets smaller so as to not take up space. When it is clicked again it re-expands.

This is an example for a simple page with two <div>s:

Suppose <div id="window1"> and <div id="window2">

#window1 {
    width: 30px;
}

#window1:active {
    width: 100px;
}

Problem is, once the mouse button is let go of, the width returns to its original size.

---

Basically the page has a little menu at the bottom left of the screen (fixed) that I would like to get out of the way for people with smaller resolutions (1024 and under) because it will get in the way of the text.

Answer 1

Here’s how I’d do it using :target – http://jsfiddle.net/joplomacedo/V6pJT/3/

Html

<div class="block">
    <a class="open" href="#menu"></a>

    <div id="menu">
        Menu Item 1<br />
        Menu Item 2<br />
        Menu Item 3<br />
        Menu Item 4<br />
        Menu Item 5<br />
        Menu Item 6<br />
        Menu Item 7<br />
        <a class="close" href="#"></a>
    </div>
</div>

CSS

.block {
    position: relative;
}

#menu{
    width: 100px;
    background: red;
    border: 1px solid #aaa;
}

#menu:target {
    background: orange;
    width: 200px;
}

.open,
.close {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

.close {
    display: none;
}

#menu:target .close {
    display: block;
}

​Unfortunately this solution makes the page jump every time you click it. It’s unnecessarily big too. A solution taking advantage of the :checked selector would require much less html and css and it also wouldn’t have the page jump on every click. Here’s that solution, and the one I recommend:

The HTML…

<div class="block">
    <label for="toggle"></label>
    <input type="checkbox" id="toggle"/>

    <div id="menu">
        Menu Item 1<br />
        Menu Item 2<br />
        Menu Item 3<br />
        Menu Item 4<br />
        Menu Item 5<br />
        Menu Item 6<br />
        Menu Item 7<br />
    </div>
</div>

…and the CSS…

.block { 
    position: fixed;
    bottom: 0;
}

#toggle {
    display: none;
}

label[for="toggle"] {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

#menu{
    width: 100px;
    background: red;
    border: 1px solid #aaa;
}

#toggle:checked ~ #menu {
    background: orange;
    width: 200px;
}

​

​