Question

My question is: It is possible to achieve this example using only css? If not what would you do? Jsfiddle examples are really appreciated 😉
How to obtain also the slashes? Should i use an image or in css is possible? And the triangle that change when is clicked? I know it is possible to do it with Js maybe in css :after and :before would help me?
PS: Javascript to Hide Menu:

<script language="javascript"> 
    function toggle() {
    var ele = document.getElementById("toggleMenu");
    var text = document.getElementById("displayMenu");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Menu";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>
<div class="menu-toggle"><div id="wrap"><a id="displayMenu" href="javascript:toggle();">Menu</a></div></div>
<div id="toggleMenu" style="display: none">
            <div class="menu">  
                <ul><li> Home </li>
                    <li> Item </li>
                </ul>
            </div>
</div>

Answer 1

Usually I do something like this with images to achieve the click event with just css

<figure>
<img id="zoom" src="http://cargowire.net/Content/images/events/stackoverflow.jpg" alt="EE" />
<figcaption>
<ul>
<li>
<a href="#zoom">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>

and CSS:

   figure { background: #e3e3e3; display: block; float: left;}
       #zoom {
          width: 0px; 
          -webkit-transition: width 1s;
      }

      #zoom:target {
         width: 400px;

      }

Check here: http://jsfiddle.net/dCTeW/ Maybe something similar can be done for menus too