Фон быть видимым при нажатии

Question

В настоящее время фон моего .menu красный. Я пытаюсь достичь: этот фон не отображается до тех пор, пока он не будет нажат. (И, очевидно, вернуть состояние при нажатии, чтобы закрыть меню.

<div class="menu"> 
    <div class="line"></div> 
    <nav> 
     <ul> 
      <li> 
       <a href="">Lorem ipsum dolor sit amet.</a> 
      </li> 
      <li> 
       <a href="">Dicta, aliquam doloremque harum labore.</a> 
      </li> 
      <li> 
       <a href="">Rerum enim ab, distinctio voluptatum?</a> 
      </li> 
      <li> 
       <a href="">Harum doloremque eveniet porro ratione.</a> 
      </li> 
      <li> 
       <a href="">Cupiditate et similique eius deserunt.</a> 
      </li> 
     </ul> 
    </nav> 
</div> 

menu { 
    position: fixed; 
    height: 50px; 
    width: 50px; 
    cursor: pointer; 
    top: 30px; 
    left: 11px; 
    background: #ed1c24; 
    opacity: 0.7; 
    -webkit-transition: all 250ms ease-in-out; 
    transition: all 250ms ease-in-out; 
    z-index: 100; 
    overflow: hidden; 
} 
.menu nav { 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    -ms-transform: translateY(-50%) translateX(-50%); 
    -webkit-transform: translateY(-50%) translateX(-50%); 
    transform: translateY(-50%) translateX(-50%); 
    opacity: 0; 
    -moz-transition: all 250ms linear 250ms; 
    -o-transition: all 250ms linear 250ms; 
    -webkit-transition: all 250ms linear; 
    -webkit-transition-delay: 250ms; 
    -webkit-transition: all 250ms linear 250ms; 
    transition: all 250ms linear 250ms; 
    pointer-events: none; 
} 

Answer 1

это решение вам нужно?

.menu:active, .menu:focus, .menu:hover 
{ 
    background-color: red; 
} 

.menu 
{ 
    background-color: transparent; 
} 

Answer 2

Является ли это решение вам нужно? сначала удалить .menu цвет фона и по щелчку добавить цвет фона red.

$('.menu').click(function(){ 
    $('.menu').css('background-color','red'); 
}); 

Answer 3

$('.menu').click(function(){ 
 
    $('.menu').toggleClass('active'); 
 
});

.menu.active { 
 
    background:red; 
 
}

и удалить жесткий цвет кода и прозрачность при добавлении кода JQuery в тег сценария в теле Ofter ваш HTML код, а также добавить библиотеку Jquery в разделе заголовка HTML, то JQuery код работы

когда класс это добавить в меню, а затем .menu.active перспективе CSS и когда снова нажмите удалить класс, а также удалить BG цвет [также проверить это] [1]

[введите описание ссылки здесь] [1]

[1]:

var main=function(){ 
 
\t $('.menu ul li').click(function() 
 
\t { \t 
 
\t \t $('li').removeClass("active"); 
 
\t \t $(this).addClass("active"); 
 
\t \t 
 
\t }); 
 
}; 
 
$(document).ready(main);

@charset "utf-8"; 
 
.menu ul { 
 
    border-top: 1px solid #636366; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #636366; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 45px; 
 
    
 
    float:left; 
 
} 
 

 
.menu a { 
 
    color: #000; 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    display:block; 
 
    padding:10px 20px; 
 
}/* CSS Document */ 
 
.menu li:hover a, 
 
.menu li.active a{ 
 
\t background:#000; 
 
\t color:#fff; 
 
} 
 
.dropdownM, 
 
.dropdown{ 
 
\t border:1px solid #666; 
 
\t display:none; 
 
}

<div class="menu"> 
 
      <ul> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">Help</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      <div class="dropdown"> 
 
      \t <p>press any key</p> 
 
      </div> 
 
      
 
      <div class="dropdownM"> 
 
      \t <p>You press M key</p> 
 
      </div> 
 
     </div> 
 
     <script src="jquery.min.js"></script> 
 
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>