单击时显示菜单

Question

i have the following menu:

<div id ="navigation-menu">
    <div id ="squaremenu">
        <ul>
            <li><a class ="homemenu" href="#Home" data-menuanchor="#Home"><img id ="homemenu" src="homemenu.bmp" height="30" width="30" /><span id="spanhome">Home</span></a></li>
            <li><a class="imprimir" href="#Servicios" data-menuanchor="#Servicios"><img id ="imprimir" src="imprimir.bmp" height="30" width="30" /><span id="spanimprimir">Imprimir</span></a></li>
            <li><a class="contacto" href="#Contacto" data-menuanchor="#Contacto"><img id="contacto" src="contacto.bmp" height="30" width="30" /><span id="spancontacto">Contacto</span></a></li>
        </ul>
    </div>
</div>

styled with css.

http://jsfiddle.net/t86Vp/

I would like if it's possible to hide most of the menu to the left and unhide it everytime i click on the menu? If it's possible anyone can give solution with javascript/css?

Thanks in advance.

Thanks for your fast answer, i know i may not have explained myself well because english is not my main language.

Edit: What i really want is show only a portion of the menu, and everytime i clic it, then show or hide the other portion.

Once again, thanks for your fast answers

And sorry if i cant make myself clear english is not my main language.

Solution for the people with the same problem/idea: (menu that open or close every time you click it

Thanks to @Sergio

http://jsfiddle.net/6xCEp/2/

Answer 1

You could use this:

$('#squaremenu').on('click', function () {
    $(this).addClass('abrir');
});

CSS

/************
*   ADDED
*/
#squaremenu img {
    display:none;
}

#squaremenu.abrir {
    width:36px !important;
}
#squaremenu.abrir img {
    display:block;
}
/***********
* END 
*/

#squaremenu {
    position:fixed;
    left:0px;
    top:150px;
    display:block;
    margin: 0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background:rgba(43,50,61,1);
    font-size: 1em;
    color:white;
    width:10px; /* CHANGED!! */
    height:120px;
}

Demo

Answer 2

You may need javascript for this. Include jquery in your page and try this

$("#squaremenu a").on("click", function(){
    var $this = $(this);    
    $this.find("span").toggleClass("menu-item-visible");
});

You may need to group all css styles that show that menu under one class, then toggle that class as shown above. In my example I used the class menu-item-visible

Let me know if you have any more questions on this or if it's not clear