Горизонтальное меню располагается сверху web-страницы, именно там её ожидает увидеть большинство из нас. Когда человек ищет информацию на мобильных телефонах, ему не очень интересно пролистывать навигацию. Поэтому на этих устройствах меню должно быть изначально скрыто и появляться при нажатии на некую кнопку. Повторный клик по кнопке или по другому участку сайта скроет навигацию.
Адаптивное горизонтальное меню на CSS
<style> nav a, nav:before, nav div:before { display: inline-block; padding: 10px 0; color: #fff; text-align: center; cursor: pointer; /* курсор в виде руки, обязателен для Opera Mini */ background: rgb(6,55,82); /* цвет фона кнопки "меню" */ } nav a { width: 25%; /* 4 пункта меню, то есть 100%/4 */ background: rgb(46,95,122); /* фон пунктов меню */ text-decoration: none; } nav a:hover { background: rgb(96,145,172); /* фон пунктов при наведении */ } @media (max-width: 800px) { /* для экранов, меньше 800px, см про адаптивную вёрстку */ nav a, nav:before, nav div:before { width: 100%; /* пункты меню растягиваются на всю ширину блока */ } nav:before { content: "меню"; } nav:focus:before { content: none; } nav:focus div:before { content: "свернуть меню"; } nav:not(:focus) div:not(:active) { /* магия кнопки "меню", благодаря чему навигация скрывается/появляется по щелчку */ display: none; } } </style> <!-- tabindex нужен, чтобы срабатывал :focus --> <nav tabindex="0"><div tabindex="0"><a href="#">Первый пункт</a><a href="#">Второй пункт</a><a href="#">Третий пункт</a><a href="#">Четвёртый пункт</a></div></nav>
Код основан на этом решении [см. псевдокласс :focus]:
Щелчок по зелёному цвету устанавливает фокус, по красному — снимает. Фокус снимается и при клике вне элемента.
<div tabindex="0" id="raz"><div tabindex="0"></div></div>
37 комментариев:
<style>
nav a {
display: inline-block;
width: 25%; /* 4 пункта меню, то есть 100%/4 */
background: rgb(46,95,122); /* фон пунктов меню */
text-decoration: none;
}
nav a:hover {
background: rgb(96,145,172); /* фон пунктов при наведении */
}
nav a, nav:before {
height: 30px;
line-height: 30px; /* высота пунктов меню, line-height = height */
color: #fff;
text-align: center;
cursor: pointer; /* курсор в виде руки, обязательно для Opera Mini */
}
@media (max-width: 500px) { /* для экранов, меньше 500px, см про адаптивную вёрстку */
nav {
position: relative;
}
nav:before {
content: "меню";
display: block;
background: rgb(6,55,82); /* цвет фона кнопки */
}
nav div {
display: none;
position: absolute; /* меню находится поверх контента */
left: 0;
right: 0;
}
nav a {
width: 100%; /* пункт меню растягивается на всю ширину блока */
}
}
</style>
<nav><div><a href="#">Первый пункт</a><a href="#">Второй пункт</a><a href="#">Третий пункт</a><a href="#">Четвёртый пункт</a></div></nav>
<script>
var nav = document.getElementsByTagName('nav');
mynav();
function mynav() {
var width = window.innerWidth || document.documentElement.clientWidth;
if (500 >= width) {
nav[0].children[0].style.display = 'none';
nav[0].onclick = function(event) {
event = event || window.event;
var t = event.target || event.srcElement;
if (t != this) { return true; }
this.children[0].style.display = this.children[0].style.display === 'none' ? 'block' : 'none';
}
}
}
window.onresize = function() {
mynav();
var width = window.innerWidth || document.documentElement.clientWidth;
if (500 < width) {
nav[0].children[0].style.display = 'block';
}
}
</script>
<script>
var nav = document.getElementsByTagName('nav');
mynav();
function mynav() {
if (500 >= document.documentElement.clientWidth) {
nav[0].children[0].style.display = 'none';
nav[0].onclick = function(e) {
if (e.target != this) { return true; }
this.children[0].style.display = this.children[0].style.display === 'none' ? 'block' : 'none';
}
}
}
window.onresize = function() {
mynav();
if (500 < document.documentElement.clientWidth) {
nav[0].children[0].style.display = 'block';
}
}
</script>
А на смартфоне меню, действительно, не меняет размер и вид.
Думаю, 500px - это маловато. Напишите 800px
Спасибо.
Попробуйте код из комментария 3
Google Hrom android.
Честно сломал мозг.
Ссылку вверху все нормально, которую Вы дали. Ставлю на сайт черт что.
Блокируются не страницы, а домен
Это стандартная система комментариев Blogger. Впрочем, капчу можно установить на любой сайт http://www.google.com/recaptcha/intro/index.html
Более трех скриптов на сайте сильно тормозят загрузку сайта в опере мини, с телефона ( не Вайфай)
прокрутка вверх/вниз - Меню сворачивается, из-за чего невозможно нажать/увидеть пункты меню в самом внизу.
Проверял другие скрипты-все окей!
Тест был на сенсором экране.
Код который Вы мне дали- в закрытом состоянии под меню пустое место , размера меню когда оно открыто. Не очень красиво когда пол экрана пустое место.
Желаю Вам больше учиться и меньше писать и у других будет меньше проблем.
Не поленился выяснить: правда угрохал уйму времени , зря.
Удачи, Виктор Цой.
Извините за доставленное неудобство!
Это в принципе возможно в данном коде?
content: "свернуть меню";
content: "меню";
напишите
content: url(http://f.cl.ly/items/1U2c3b1215383h3a2T2r/icon-menu.svg);
(картинку лучше поставить свою)
Если не трудно не могли бы вы помочь с ЦСС, вот тема на тостере:
https://toster.ru/q/282521