software:development:demo:cms:ucms:appendix:appendix_css:nav:responsive
Адаптивная верхняя навигации
Пример адаптивной верхней навигации
Измените размер окна браузера, чтобы увидеть, как это работает.
- index.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Загрузите библиотеку значков, чтобы отобразить меню гамбургера (бары) на маленьких экранах --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> /* Добавить черный цвет фона для верхней навигации */ .topnav { background-color: #333; overflow: hidden; } /* Стиль ссылок внутри панели навигации */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Изменение цвета ссылок при наведении курсора */ .topnav a:hover { background-color: #ddd; color: black; } /* Добавить активный класс, чтобы выделить текущую страницу */ .topnav a.active { background-color: #4CAF50; color: white; } /* Скрыть ссылку, которая должна открывать и закрывать верхнюю навигационную панель на небольших экранах */ .topnav .icon { display: none; } /* Если ширина экрана меньше 600 пикселей, скройте все ссылки, кроме первой ("Главная"). Показать ссылку, которая содержит должен открыть и закрыть верхнюю навигационную панель topnav (.icon) */ @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } /* Класс "responsive" добавляется в верхнюю навигационную панель используя JavaScript, когда пользователь нажимает на значок. Этот класс делает topnav хорошо выглядеть на небольших экранах (отображать ссылки по вертикали, а не по горизонтали) */ @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Главная</a> <a href="#news">Новости</a> <a href="#contact">Контакты</a> <a href="#about">О нас</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div style="padding-left:16px"> <h2>Пример адаптивной верхней навигации</h2> <p>Измените размер окна браузера, чтобы увидеть, как это работает.</p> </div> <script> /* Переключение между добавлением и удалением класса "responsive" в topnav, когда пользователь нажимает на значок */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/appendix/appendix_css/nav/responsive.txt · Последнее изменение: — VladPolskiy