2

Example

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>
Improve this question
3
  • 1
    I posted the version i made, but i would like to use ccs only. Ideas? Commented Jan 17, 2013 at 20:01
  • It's possible with :active but it messes up the URL. I'd do it with JS. Commented Jan 17, 2013 at 20:03
  • @Vinit yes, i am only waiting to finish the menu, then i will publish it here and vote the best answer. Commented Jan 25, 2013 at 14:45

3 Answers 3

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Great, i am waiting for the answers at the other questions. Fantastic, 2 left :D Thanks.
On IE9 no smooth transition, but your idea is great. +1 for that
+1 for the :target selector. New to me, and thats why i love SO. Be cautious though, as it seems to affect your browser history: css-tricks.com/on-target
0

It is perfectly possible, but only when the mouse hovers, not on click as far as I am aware. You will want to use CSS :hover states.

There is an in depth article here: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

and the demo for that article here: http://csswizardry.com/demos/css-dropdown/

If you want to use click then a small bit of jquery may help you something like:

$('.menu-item').click(function(){
    $(this).find('hover-div').toggle()
})

http://api.jquery.com/toggle/
that is the Documentation for toggle which is what you need to achieve.

Improve this answer

5 Comments

:hover does not correspond to clicking, but hovering.
It works with tapping in some mobile device browsers (Android, Opera mobile, maybe others too).
Yes, i know that, my question was different, if i could do it with css i know how to do it with js, your solution used jquery and it is ok, but not what i was looking for. Thanks anyway
As far as i am aware it is not possible with css using a click event
check @Vinit example: stackoverflow.com/a/14387291/1951894 ;) Just answered this question, 2 left :)
0

If you insist on using click in stead of hover, you could try to use :focus as suggested, but it would actually be a hack, and not considered correct use of HTML and css. Just for demonstration though, have a look at this: http://jsfiddle.net/9efMt/1/

As you can see, I use an input, with the :focus pseudo class and the + sibling selector. Nothing really wrong with that css, but putting the menu in an input is just not done!

I used jquery for the js in the, imo, correct example that is in the same fiddle. All i do is toggling a class when the menu link is clicked. It looks like this:

$('#menu2').click(function() {
  $('#menu2-sub').toggleClass('active');
});

The css should be fairly straight forward.

Improve this answer

1 Comment

Yes the jquery work well, but i was wondering if there was a css solution, and your as you said is a hack but i will test it to see if i could use it ;) Thanks.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.