Создание реагирующих меню не работает

Я нахожусь в процессе создания персонального веб-сайта, поэтому я не уверен на 100%, что будут на контрольных точках содержания. На данный момент я использую 320px (телефон), 768px (планшет) и 1024px (рабочий стол). Я не знаю, нужен ли мне конкретный для планшетов, поскольку они, вероятно, могут использовать полноэкранный режим, но я имею его на месте на всякий случай.Создание реагирующих меню не работает

У меня возникли проблемы с отображением ссылок на ссылки в строке, когда они находятся на полном экране, и я не могу понять, как получить раскрывающееся меню в режиме мобильного просмотра. У меня есть meta viewport, установленный на ширину устройства, и 1.

Я бы хотел, чтобы встроенный режим зависал над каждым, чтобы отобразить цвет фона с 8px x 20px padded. Я стараюсь, если возможно, избегать javascript и jquery. И без поплавков тоже.

HTML

<nav class="nav-menu" role="navigation"> 

    <ul> 
    <li><a class="blue" href="" title="Home">Home</a></li> 
    <li><a class="red" href="" title="Blog">Blog</a></li> 
    <li><a class="green" href="" title="Contact">Contact</a></li> 
    </ul> 

    <a href="#" id="pull"></a> 

</nav>

https://jsfiddle.net/xpu9bxjc/

Любая помощь будет принята с благодарностью!

источник

2015-08-12 user1052448

Не устанавливайте точки останова для устройств ... установите их, когда ваш дизайн ** нуждается в них **, если это будет на 743.25 пикселей, пусть будет так. –

Я согласен с @Paulie_D. Кроме того, в вашей скрипке, похоже, у вас есть мобильный стиль для средних экранов, в то время как ваш немобильный стиль отображается, если вы уменьшаете размер экрана до мобильного. Измените свой медиа-запрос на 'max-width' вместо' min-width', чтобы исправить это. –

Я отменил min/max и получил его, работая так, как я хочу, в отношении отображения inline на больших экранах. Однако, как я могу установить падение в мобильном режиме? – user1052448

В вашей скрипке у вас есть мобильное меню, отображаемое на размерах экрана, которые являются средними и выше, в то время как ваше немобильное меню отображается, когда вы сжимаетесь до экрана мобильного размера.

Чтобы это исправить, изменить медиа запрос от:

@media only screen and (min-width: 320px) {

к:

@media only screen and (max-width: 320px) {

Для добавления эффекта парения, вы хотите добавить :hover к вашему селектору, а затем применить любые стили захотите там навестить.

.nav-menu a:hover { 
    /* put hover styles here */ 
}

Обновлено в вашем fiddle.

источник

2015-08-12 21:26:26

Awesome. Я попробую это сегодня вечером и посмотрю, как это работает. Благодаря! – user1052448

Создание реагирующих меню не работает

ответ

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