Отзывчивое меню: вертикальное на меньшем, но горизонтальном на большом экране

-1

На отзывчивом веб-сайте я хотел бы отображать вертикальное меню на более мелких экранах и горизонтальное меню на больших экранах. В настоящее время следующий код HTML и CSS НЕ отображает вертикальное меню на меньших экранах. Может ли кто-нибудь пересмотреть/улучшить этот код? Заранее спасибо.Отзывчивое меню: вертикальное на меньшем, но горизонтальном на большом экране

#menu { 
 
\t width: 100%; 
 
\t min-height: 40px; 
 
\t position: relative; 
 
\t background-color: rgb(52, 85, 154); 
 
} 
 
#menu a { 
 
\t display: inline-block; 
 
\t padding: 10px 4% 0px 4%; 
 
\t font: 400 16px/32px 'Courier', sans-serif; 
 
\t min-height: 40px; 
 
\t color:white; 
 
\t text-decoration: none; 
 
\t font-weight:bold; 
 
\t transition: .5s; 
 
} 
 
#menu a:hover { 
 
\t color: red; 
 
\t background-color: blue; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
#menu { 
 
\t max-width: 100%; 
 
} 
 
} 
 

 
@media screen and (max-width:775px) { 
 
#menu a { 
 
\t max-width: 100%; 
 
\t padding: 0px 5px 0px 5px; 
 
\t float: none; 
 
\t text-align: center; 
 
} 
 
} 
 

 
@media screen and (max-width:980px) { 
 
#menu { 
 
\t max-width: 100%; 
 
} 
 
}

<body> 
 
<nav id="menu"> <a href="index.html">Home</a> <a href="aboutus.html">About</a> <a href="services.html">Services</a> <a href="http://srjtax.blogspot.com/" rel="external" target="_blank">Blog</a> <a href="taxlinks.html">Links</a> <a href="faq.html">FAQ</a> <a href="contact.html">Contact</a> 
 
</nav> 
 
</body>

источник

2015-06-15 sjhawar

добавить display: block; объявления здесь:

@media screen and (max-width:775px) { 
    #menu a { 
     max-width: 100%; 
     padding: 0px 5px 0px 5px; 
     float: none; 
     text-align: center; 
     display: block; 
    } 
}

источник

2015-06-15 20:32:40 alliuca

Я просто добавил линию, которую вы предложили. Оно работает! Благодарю. Теперь, как показать/скрыть функцию на меньших экранах, чтобы вертикальное меню занимало столько места, что скрывается? – sjhawar

хорошо, вы можете использовать метод ввода ввода, если вам не нужно беспокоиться об IE8 (в этом случае вам нужно будет применить js polyfill для управления селектором: check). Я думаю, вы хотите иметь что-то вроде этого: https://jsfiddle.net/yhcj9dsd/ – alliuca

Пожалуйста, напишите в деталях код (jsfiddle.net/yhcj9dsd - allienato), чтобы я мог попробовать. Благодарю. – sjhawar

При создании отзывчивого сайта, основная навигация обычно хитрая из-за часто требования, чтобы отобразить элементы вертикально (и в выпадающем меню/гамбургере) на мобильном экране, а затем горизонтально на рабочем столе

Первым шагом является его разработка с использованием мобильного подхода. Это означает, что:

Стиль все так, чтобы она хорошо выглядит на маленьком экране
Используйте медиазапросы постепенно стиль больше размер экрана

Вот основной фрагмент, как стиль меню так что он отображается вертикально на маленьком экране и горизонтально на большом экране.

/* Mobile style first */ 
.menu { 
    text-align: center; 
} 
.menu a { 
    display: block; 
    padding: 10px; 
} 
.menu a:hover { 
    background-color: #eee; 
} 

/* Desktop style after */ 
@media (min-width: 600px) { 
    .menu a { 
     display: inline-block; 
    } 
}

Смотрите эту jsFiddle для примера

источник

2015-06-15 20:33:42 Jackson

Вы можете попробовать следующие фрагменты кода

HTML просто добавить поверочного тег прямо над навигационным теге

<span id='trigger'> Menu </span>

CSS

В начальном меню на ag изменить отображение на блок из встроенного блока и установить float влево. А затем поместить следующее:

#trigger { 
display: none; 
} 

@media screen and (max-width: 560px /* just as an example*/) { 
#trigger { 
    display: block; 
} 

#menu { 
    display: none; 
} 

div.expand { 
    display: block; 
} 

#menu a { 
    float: none; 
    border-bottom: 1px solid; 
} 
}

Javascript

jQuery("#trigger").click(function() { 

    jQuery("#menu").slideToggle(500, function() { 
     jQuery(this).toggleClass("expand").css('display','500'); 
    }); 

});

Я надеюсь, что это помогает

источник

2015-06-15 21:32:58 abm

Отзывчивое меню: вертикальное на меньшем, но горизонтальном на большом экране

ответ

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