Master the art of creating click events using only CSS

Question

Master the art of creating click events using only CSS

Is it possible to achieve this example using only CSS? If not, what would be the alternative solution? Any JSFiddle examples would be greatly appreciated! How can I also add slashes - should I use an image or can it be done with CSS? And what about the triangle that changes when clicked? I've heard it can be done with JavaScript or maybe using :after and :before in CSS? PS: Javascript for hiding 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>

html css

Answer 1

Answer №1

My typical approach is to use images in combination with CSS to create a click event without Javascript

<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>

This is accomplished using the following CSS:

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

      #zoom:target {
         width: 400px;

      }

To see an example, visit: http://jsfiddle.net/dCTeW/. This technique could potentially be applied to menu design as well.

Answer 2

My typical approach is to use images in combination with CSS to create a click event without Javascript

<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>

This is accomplished using the following CSS:

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

      #zoom:target {
         width: 400px;

      }

To see an example, visit: http://jsfiddle.net/dCTeW/. This technique could potentially be applied to menu design as well.

Answer 3

Answer №2

To achieve a dropdown menu that appears when the mouse hovers over it, you can utilize CSS :hover states. Clicking to reveal the dropdown may require some jQuery code like this:

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

You can find more information on toggling elements using jQuery at http://api.jquery.com/toggle/.

If you want to delve deeper into creating pure CSS dropdown menus, check out this detailed article:

For a demo of the CSS dropdown menu in action, visit:

Answer 4

To achieve a dropdown menu that appears when the mouse hovers over it, you can utilize CSS :hover states. Clicking to reveal the dropdown may require some jQuery code like this:

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

You can find more information on toggling elements using jQuery at http://api.jquery.com/toggle/.

If you want to delve deeper into creating pure CSS dropdown menus, check out this detailed article:

For a demo of the CSS dropdown menu in action, visit:

Answer 5

Answer №3

If you prefer using click instead of hover, there is a workaround by utilizing :focus, however it may be considered a hack and not the proper use of HTML and CSS. For illustrative purposes only, you can view an example here: http://jsfiddle.net/9efMt/1/

In the demonstration, an input is used with the :focus pseudo class and the + sibling selector in the CSS. While this method is acceptable in terms of styling, placing a menu inside an input goes against standard practices.

In my opinion, the correct approach is demonstrated in the same fiddle using jQuery for the JavaScript. The code simply toggles a class when the menu link is clicked:

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

The CSS portion should be relatively easy to understand.

Answer 6

If you prefer using click instead of hover, there is a workaround by utilizing :focus, however it may be considered a hack and not the proper use of HTML and CSS. For illustrative purposes only, you can view an example here: http://jsfiddle.net/9efMt/1/

In the demonstration, an input is used with the :focus pseudo class and the + sibling selector in the CSS. While this method is acceptable in terms of styling, placing a menu inside an input goes against standard practices.

In my opinion, the correct approach is demonstrated in the same fiddle using jQuery for the JavaScript. The code simply toggles a class when the menu link is clicked:

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

The CSS portion should be relatively easy to understand.

Master the art of creating click events using only CSS

Answer №1

Answer №2

Answer №3

Similar questions

Discovering whether a link has been clicked on in a Gmail email can be done by following these steps

How can I detect a click event on an SVG element using JavaScript or jQuery?

Steps to replace the content of an HTML file (such as modifying images) by clicking on an element in a separate HTML file

Combining Text and Images with a Background Video using CSS

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

Show side by side using javascript

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Moving a popup div along with a marker in Leaflet can be achieved by using the set

Loading CSS files conditionally in Angular2's index.html

Steps for making a toggle button with Bootstrap

Trick for adjusting padding on top and bottom for responsive blocks of varying widths

Tips for resolving CSS issues in a vast style sheet

Form that adjusts input fields according to the selected input value

What strategies can I employ with flexbox to achieve my design goals?

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

The background color appears to be fixed in place even after attempting to switch it to

Strategies for Implementing Multi-Step Password Form Validation

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

Show information from mysql in a dual-column format

What is the best way to determine font size based on the width of the