Как собрать меню сайта одинаково доступное на всех экранах от 1650 рх до 280 рх без сокрытия под «гамбургер» и всегда видимое в полный размер. Причём, не просто меню, а многоуровневое меню с раскрытием подменю в любом количестве.
Когда это востребовано? Например вы верстаете сайт строительной фирмы с большим количеством страниц и услуг на них. Когда перед вами настольный монитор можно смотреть меню из 6-7 пунктов и выпадающие подменю в любом количестве.
Причём, подменю могут выезжать сбоку, вниз. Но, при при переходе на узкие дисплеи планшетов, смартфонов меню трансформируется в «гамбургер» и чтобы увидеть меню, требуется развернуть «гамбургер» и всего 5-6 меню возможно увидеть. Если же меню содержат надписи из 2-3-4 слов, места им нет. Да, ещё и показать подстраницы.
Предлагаю использовать технологию flex для достижения адаптированности меню с одной стороны. С другой, манипулируя позиционированием flex элементов z-index, дать возможность показывать подменю с вертикальным выходом без изменения размеров.
Это позволяет посетителю сайта без лишних движений сразу переходить к любой странице и её разделам. Для владельцев смартфонов это особенно удобно.
Ниже привожу HTML код меню и его стилевое оформление. Копируйте, пользуйтесь, кому это подходит. Посмотреть работу такого меню приглашаю на моей странице по оказанию услуг ремонта холодильников Харькове здесь
<body>
<div class="help">
<section>
<h1>Меню горизонтальное многоуровневое адаптированное на CSS Flexbox с вертикальным раскрытием подстраниц</h1>
<ul class="menu">
<li class="menu__item_time"><a href="#p1" class="nav__link">Страница 1</a>
<ul class="submenu">
<li class="menu__fox"><a href="#p10" class="nav__link">Подстраница 1</a></li>
<li class="menu__fox"><a href="#p11" class="nav__link">Подстраница 2</a></li>
<li class="menu__fox"><a href="#p12" class="nav__link">Подстраница 3</a></li>
</ul>
</li>
<li class="menu__item_time"><a href="#p2" class="nav__link">Страница 2</a>
<ul class="submenu">
<li class="menu__fox"><a href="#p13" class="nav__link">Подстраница 1</a></li>
<li class="menu__fox"><a href="#p14" class="nav__link">Подстраница 2</a></li>
<li class="menu__fox"><a href="#p15" class="nav__link">Подстраница 3</a></li>
<li class="menu__fox"><a href="#p16" class="nav__link">Подстраница 4</a></li>
<li class="menu__fox"><a href="#p17" class="nav__link">Подстраница 5</a></li>
</ul>
</li>
<li class="menu__item_time"><a href="#p3" class="nav__link">Страница 3:</a>
<ul class="submenu">
<li class="menu__fox"><a href="#p18" class="nav__link">Подстраница 1</a></li>
<li class="menu__fox"><a href="#p19" class="nav__link">Подстраница 2</a></li>
<li class="menu__fox"><a href="#p20" class="nav__link">Подстраница 3</a></li>
<li class="menu__fox"><a href="#p21" class="nav__link">Подстраница 4</a></li>
<li class="menu__fox"><a href="#p22" class="nav__link">Подстраница 5</a></li>
</ul>
</li>
<li class="menu__item_time"><a href="#p4" class="nav__link">Страница 4</a>
<ul class="submenu">
<li class="menu__fox"><a href="#p23" class="nav__link">Подстраница 1</a></li>
<li class="menu__fox"><a href="#p24" class="nav__link">Подстраница 2</a></li>
</ul>
</li>
<li class="menu__item"><a href="#p5" class="nav__link">Страница 5</a></li>
<li class="menu__item"><a href="#p6" class="nav__link">Страница 6</a></li>
<li class="menu__item_time"><a href="#p7" class="nav__link">Страница 7</a>
<ul class="submenu">
<li class="menu__fox"><a href="#p25" class="nav__link">Подстраница 1</a></li>
<li class="menu__fox"><a href="#p26" class="nav__link">Подстраница 2</a></li>
<li class="menu__fox"><a href="#p27" class="nav__link">Подстраница 3</a></li>
<li class="menu__fox"><a href="#p28" class="nav__link">Подстраница 4</a></li>
</ul>
</li>
</ul>
<p> Задача организации, в особенности же реализация намеченных плановых заданий
способствует подготовки и реализации новых предложений. Товарищи! постоянное
информационно-пропагандистское обеспечение нашей деятель</p>
<p>Повседневная практика показывает, что дальнейшее развитие различных форм деятельности
способствует подготовки и реализации системы обучения кадров, соответствует насущным
потребностям. </p>
</section>
</div>
</body>
<style>
html {
min-height:100%; /* всегда показываем вертикальную полосу прокрутки */
}
.help{
width:100%;
}
section{background-color: #f1f1df;margin:10px auto;max-width:930px;}
h1{text-align:center; font-size:1.5em;}
.menu{
max-width:940px; /*максимальная ширина flex контейнера*/
margin: 0px auto; /*центрируем блок*/
padding: 0px;
display: flex; /*присваиваем свойство flex*/
-webkit-box-pack: justify; /*присваиваем свойство flex*/
-ms-flex-pack: justify; /*присваиваем свойство flex*/
flex-wrap: wrap; /*определяем многорядность flex элементов*/
align-items: center; /*центрируем flex элементы относительно поперечной оси*/
justify-content: center; /*центрируем flex элементы относительно главной оси*/
border:1px solid red; /*рамка flex контейнера*/
}
.menu__item{
display:block;
text-align: center;
font-weight: 500;
width: 250px;
height: 44px;
border:2px solid #808080;
border-radius: 3px;
margin: 7px;
background: #ccc;
}
.menu a:link{color:#000 !important;}
.menu a:visited {color: #000;text-decoration: none;}
.menu a:hover {color:#ff0000 !important; text-decoration:none;}
.menu a:active {color: #000;text-decoration: none;}
.menu__item:hover{background: #fff;}
.menu__item_time{
display:block;
text-align: center;
font-weight: 500;
width: 250px;
height: 44px;
border:2px solid #808080;
border-radius: 3px;
margin: 7px;
background: #ccc;
}
.menu__item_time:hover{
background: #fff;
}
.menu__fox:hover{
background: #fff;
}
.nav__link{
display: inline-block;
text-decoration: none;
margin:0 auto;
color:#000 !important;
}
.submenu {
position: absolute;
opacity: 0;
z-index:-9; /*перемещение под нижний слой потока*/
transform: scaleY(0); /*масштабирует элемент по вертикали до "0".*/
transform-origin :0 0; /*координаты точки поворота*/
transition: .5s ease-in-out; /*длительность анимации по ease-in-out*/
padding:0px;
margin:0px;
}
.menu__item_time:hover .submenu {
opacity: 1;
z-index:9; /*перемещение над верхним слоем потока*/
transform: scaleY(1); /*масштабирует элемент по вертикали до своего размера*/
}
.menu__fox{
display:block;
text-align: center;
font-weight: 500;
width: 250px;
height: 44px;
border:2px solid #808080;
border-radius: 3px;
margin: 7px -2px;
background: #ccc;
}
</style>
Это интересно
0
|
|||
Последние откомментированные темы:
-
Xiaomi перевернули мир, такой цены еще не было
(1)
bigluzer131261
,
09.01.2020
20250205070323