Hello. There is a link

<div class="menu"> <a href="/">меню</a> </div>

And on the same page there is a block:

 <div class="menu_block"> //инфа </div>

Default values ​​for this block

 .menu_block { background-color: #eaeaea; width: 100%; height: 100%; position: absolute; z-index: 999; display: none; }

How to make it so that when clicking on the menu link, the display value of the menu_block block changes to block?

How to track click on a link or a block in css?

I would be grateful for the help!

  • This is simply done by JS. - Aim X
  • @AimX may have similar examples? - iKey

3 answers 3

With jquery you can do:

 $(function(){ $(".menu a").click(function(){ // отлавливаем нажатие на ссылку $(".menu_block").css({display: 'block'}); // задаем стили }); }); 
 .menu_block { background-color: #eaeaea; width: 100%; height: 100%; position: absolute; z-index: 999; display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <a href="#">меню</a> </div> <div class="menu_block"> We use this domain to render user-provided code snippets. Some of our websites have enabled interactive code snippets which can be run by other users in order to see the output. This domain is used to host the results of running those snippets. We host the results on a different domain because we must prevent same-origin from being in effect. If same-origin was possible, users could write code that caused other users to do things that they didn't want to on their Stack Exchange account. What kinds of things? Evil things. Things like logging a user out, or updating their profile, or even possibly posting questions or answers! So, this domain stops bad people from doing bad things. </div>

    Example # 1 (without jQuery):

     function showBlockMenu() { document.getElementsByClassName('menu_block')[0].style.display = 'block'; } 
     .menu_block { background-color: #eaeaea; width: 100%; height: 100%; position: absolute; z-index: 999; display: none; } 
     <div class="menu" onclick="showBlockMenu();"> <a href="#">меню</a> </div> <div class="menu_block"> <p> Content Menu </p> </div>

    Example 2 (with jQuery):

     document.getElementsByClassName('menu')[0].addEventListener('click', function() { document.getElementsByClassName('menu_block')[0].style.display = 'block'; }, false); 
     .menu_block { background-color: #eaeaea; width: 100%; height: 100%; position: absolute; z-index: 999; display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="menu"> <a href="#">меню</a> </div> <div class="menu_block"> <p> Content Menu </p> </div> 

       <script type="text/javascript"> ajax.callback = function(data){ $('#menu').text(data.menu); }; </script> <a href="#" onclick="$('#menu-open').show(); return false;">меню</a> <div id="menu-open" style="display: none;"><span id="menu">инфа</span></div>