Skip to content

Instantly share code, notes, and snippets.

@Ankhena

Ankhena/subnav-with-columns.html

Created November 18, 2021 19:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ankhena/ab2f34b79e3e77d4560b1db235b598f2 to your computer and use it in GitHub Desktop.
Save Ankhena/ab2f34b79e3e77d4560b1db235b598f2 to your computer and use it in GitHub Desktop.
Download ZIP
Выпадающее меню и CSS columns
Raw
subnav-with-columns.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Выпадающее меню и CSS columns</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600&display=swap');
* {
box-sizing: border-box;
}
:root {
--bright: deepskyblue;
}
body {
font-family: "Nunito Sans", sans-serif;
line-height: 1.5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.nav a {
color: #666;
text-decoration: none;
}
.nav__list {
position: relative;
display: flex;
border: 1px solid #eee;
}
.nav__item {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-bottom: 2px solid rgba(0, 0, 0, 0);
}
.nav__item::after {
content: "";
display: inline-block;
width: 8px;
height: 6px;
margin-left: 10px;
background: var(--bright);
-webkit-mask: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='4' viewBox='0 0 5 4'%3E%3Cpath d='M4.88958 0.628862L2.83617 3.21029C2.64138 3.44645 2.34107 3.44645 2.1544 3.21029L0.100984 0.628862C-0.0938068 0.384562 0.00358848 0.197266 0.30389 0.197266H4.68668C4.99509 0.197266 5.08437 0.384562 4.88958 0.628862Z'/%3E%3C/svg%3E") no-repeat center/ contain;
mask: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='4' viewBox='0 0 5 4'%3E%3Cpath d='M4.88958 0.628862L2.83617 3.21029C2.64138 3.44645 2.34107 3.44645 2.1544 3.21029L0.100984 0.628862C-0.0938068 0.384562 0.00358848 0.197266 0.30389 0.197266H4.68668C4.99509 0.197266 5.08437 0.384562 4.88958 0.628862Z'/%3E%3C/svg%3E") no-repeat center/ contain;
}
.nav__link {
font-weight: 600;
}
.nav__submenu {
display: none;
}
.nav__sub-cat {
font-size: 14px;
line-height: 1.2;
}
.nav__sub-cat li:not(:last-child) {
margin-bottom: 1em;
}
.nav__sub-cat a {
display: block;
}
.nav__sub-cat a:hover,
.nav__sub-cat a:focus {
color: var(--bright);
outline: none;
}
.nav__item:hover, .nav__item:focus-within {
border-color: var(--bright);
}
.nav__item:hover > a,
.nav__item:focus-within > a {
color: var(--bright);
outline: none;
}
.nav__item:hover .nav__submenu, .nav__item:focus-within .nav__submenu {
position: absolute;
top: 100%;
left: -1px;
display: block;
width: calc(100% + 2px);
padding: 20px;
columns: auto 200px;
column-gap: 20px;
border: 1px solid #eee;
}
.nav__sub-wrap {
/* эта обертка нужна, чтобы именно ей задать инлайн-блок, чтобы не было переноса внутри блока
если задавать инлайн-блок для li, то колонки поломаются (будут неадекватно считать размеры и количество)
*/
display: inline-block;
width: 100%;
}
.nav__subtitle {
width: fit-content;
padding-top: 0.2em;
padding-bottom: 0.2em;
background: #eee;
font-weight: 600;
text-transform: uppercase;
}
</style>
</head>
<body>
<nav class="nav">
<ul class="nav__list container">
<li class="nav__item">
<a class="nav__link" href="">link</a>
<ul class="nav__submenu">
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet orem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="nav__item">
<a class="nav__link" href="">link</a>
<ul class="nav__submenu">
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor.</a></li>
<li><a href="">link3 Lorem dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="nav__item">
<a class="nav__link" href="">link</a>
<ul class="nav__submenu">
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="nav__item">
<a class="nav__link" href="">link</a>
<ul class="nav__submenu">
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 link</a></li>
<li><a href="">link3 Lorem ipsum dolor.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="nav__item">
<a class="nav__link" href="">link</a>
<ul class="nav__submenu">
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3 lorem lorem</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3 Lorem ipsum.</a></li>
<li><a href="">link3 Lorem ipsum dolor sit.</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</li>
<li class="nav__sub-item">
<div class="nav__sub-wrap">
<p class="nav__subtitle">submenu</p>
<ul class="nav__sub-cat">
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3 lorem</a></li>
<li><a href="">link3</a></li>
<li><a href="">link3</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment