CSS селектор родственный не вызывает

У меня есть следующие в моем CSS (в режиме де-ошибка с флажком отображается, но будет скрыт в финале):CSS селектор родственный не вызывает

<style type="text/css"> 
* { margin: 0; padding: 0; font-family: sans-serif; } 
#nav-trigger { display: none; } 
#nav-icon { display: none; } 
#navigation { display: block; } 
nav  { width: 100%; text-align: center; } 
nav ul { float: right; line-height: 50px; } 
nav li { display: inline; list-style-type: none; } 
nav a { text-decoration: none; padding: 10px; color: #999; } 
nav a:hover { color: #C00; } 

@media screen and (max-width: 480px) { 
nav ul { display: block; float: none; margin-top: 50px; background-color: #C00; } 
nav li { display: block; } 
nav a { display: block; padding: 3px; border-bottom: 1px dotted #CCC; } 
nav a:hover { color: #FFF;} 

#nav-trigger { display: block; } 
#navigation { display: none; } 
#nav-icon { font-size:32px;display:block;position:relative;width:40px;height:40px;text-align:center;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;margin-left:auto;margin-right:8px; } 
#nav-icon::before { content:"";position:absolute;top:.25em;left:4px;width:1em;height:.125em;color:#fff;border-top:.375em double #ddd;border-bottom:.125em solid #ddd;box-sizing:content-box } 
#nav-trigger:checked ~ #navigation { display: block; } 
} 
</style>

Мой HTML:

<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
<label for="nav-trigger" id="nav-icon"></label> 
<nav id="navigation">  
    <ul> 
     <li><a href="#">Link 1</a> 
     <li><a href="#">Link 2</a> 
     <li><a href="#">Link 3</a> 
     <li><a href="#">Link 4</a> 
    </ul> 
</nav>

Мои навигация реагирует при изменении размера окна и скрывает навигационное меню, когда меньше 480 пикселей, и отображается значок моего гамбургера, но когда я нажимаю значок (или соответствующий флажок), мое меню не появляется. У меня есть проблема с моим селектором CSS (последняя строка моего CSS).

Пытается держаться подальше от JavaScript/JQuery.

Нужна помощь!

Спасибо!

источник

2014-11-23 James Ullrich

где коробка ввода в вашем html? –

Кажется, что вы работаете: http://jsfiddle.net/9c7afqhg/ - при установке флажка отображаются ссылки навигации - не могли бы вы объяснить, в чем проблема? – Danield

может тестироваться в браузере? –

Вы должны использовать JQuery для "проверки действия":

$(document).ready(function() { 
    $('#nav-trigger').change(function() { 
     if($(this).is(":checked")){ 
      $('#navigation').show(); 
     } else { 
      $('#navigation').hide(); 
     } 
    }); 
});

Подробнее: http://api.jquery.com/change/

источник

2014-11-23 09:07:41 uymin

это можно использовать используя css только. и OP css отлично. –

Это была ошибка кодировщик (отсутствие сна). Восстановленный код в другом браузере (спасибо Bhojendra и Danield).

источник

2014-11-23 09:53:42

CSS селектор родственный не вызывает

ответ

Смежные вопросы