Контент в три колонки на flexbox

Рейтинг: 1Ответов: 0Опубликовано: 17.02.2023

Всем доброго времени.

Есть код, в нем конечно каша, но помогите у кого есть возможность разобраться как сделать.

Необходимо меню как на сайте https://www.ey.com/en_gl чтобы табами было. Табы вроде почти реализованы, за исключением того, что не добавляется класс к активному табу, а соответственно его пока не получилось стилизовать.

Не получается в первом табе разместить контент в три колонки. Флексами пробовал и wrap ставил, но пункты все равно уходят за границы и исчезают не переносясь на новую строку. И нужно чтобы вставили в три колонки и строки в колонках были без переносов от длинны, так как нужно будет рамки сделать и линии соответственно чтобы в одной полосе были.

Уже прям нервы берут

function burgerMenu(selector) {
    let menu = $(selector);
    let button = menu.find('.burger-menu__button');
    let links = menu.find('burger-menu__link');
    let overlay = menu.find('burger-menu__overlay');

    button.on('click', (e) => {
        e.preventDefault();
        toggleMenu();
    });

    links.on('click', () => toggleMenu());
    overlay.on('click', () => toggleMenu());
    function toggleMenu() {
        menu.toggleClass('burger-menu_active');

        if (menu.hasClass('burger-menu_active')) {
            $('body').css('overflow', 'hidden');
        } else {
            $('body').css('overflow', 'visible');
        }
    }
}

burgerMenu('.burger-menu');

const tabsBtn = document.querySelectorAll('.tabs__caption');
const tabsContent = document.querySelectorAll('.tabs__content');

function hideTabs() {
  tabsContent.forEach((tab) => {
    tab.style.display = 'none';

  });
}
hideTabs();

function showTab(i) {
  tabsContent[i].style.display = 'flex';
}

tabsBtn.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    hideTabs();
    showTab(i);
  });
});
body {
  overflow: hidden;
  font-family: "Noto Sans", sans-serif;
}

.section {
  position: relative;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.section__header {
  width: 25%;
  margin-right: 15px;
}

.nav-menu {
  width: 73%;
}

.section__nav-container {
  display: flex;
  margin-top: 15px;
  margin-bottom: 15px;
}

.burger-menu__container {
  display: flex;
  width: 100%;
}

.section__header img {
  width: 100%;
  max-width: 250px;
  height: auto;
}

.section__nav {
  display: flex;
  flex-direction: column;
}

.nav-menu__list {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.nav-menu__list-item:first-child {
  text-align: center;
}

.section__nav-top {
  display: flex;
  justify-content: flex-end;
}

.nav__search {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.nav__search i {
  font-size: 20px;
  margin-right: 10px;
}

.nav__search-icon {
  margin-right: 7px;
}

input::-webkit-input-placeholder {
  color: #B6C0A5;
  font-style: italic;
  background: #E0EFCA;
}

input:-moz-placeholder {
  color: #B6C0A5;
  font-style: italic;
  background: #E0EFCA;
}

input:-ms-input-placeholder {
  color: #B6C0A5;
  font-style: italic;
  background: #E0EFCA;
}

form {
  position: relative;
  width: 250px;
  margin: 0 auto;
}

input {
  width: 100%;
  height: 30px;
  border: 2px solid #000;
  padding: 7px;
  border-radius: 1px;
  outline: none;
  background: transparent;
  color: #000;
  font: 400 12px "Noto Sans";
  font-style: normal;
}
input::-moz-placeholder {
  background: transparent;
  color: #000;
  font: 400 12px "Noto Sans";
  font-style: normal;
}
input::placeholder {
  background: transparent;
  color: #000;
  font: 400 12px "Noto Sans";
  font-style: normal;
}

.nav-menu__list-item {
  font: 600 13px "Noto Sans";
  color: #222;
  transition: 1s ease-in-out 0.3;
}
.nav-menu__list-item:hover {
  color: #444;
}

.nav-menu__list-item .nav-menu__contacts-link {
  font: 600 14px "Noto Sans";
  color: #02357d;
  transition: 1s ease-in-out 0.3s;
}
.nav-menu__list-item .nav-menu__contacts-link:hover {
  color: #444;
}

li.nav-menu__contacts .nav-menu__list-link, li.nav-menu__contacts i {
  color: #02357d;
  margin-right: 7px;
}

li.nav-menu__contacts .nav-menu__list-link:hover {
  color: #034aaf;
}

.burger-menu__button {
  display: none;
  position: fixed;
  top: -5px;
  right: -30px;
  z-index: 30;
  width: 80px;
  height: 80px;
}
.burger-menu__button:hover .burger-menu__lines {
  background-color: #666;
}
.burger-menu__button:hover .burger-menu__lines::after {
  background-color: #666;
}
.burger-menu__button:hover .burger-menu__lines::before {
  background-color: #666;
}

.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before {
  position: absolute;
  width: 40px;
  height: 4px;
  background-color: #000;
}

.burger-menu__lines {
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}

.burger-menu__lines::before {
  content: "";
  top: -8px;
}

.burger-menu__lines::after {
  content: "";
  top: 8px;
}

.burger-menu_active .burger-menu__lines {
  background-color: transparent;
}
.burger-menu_active .burger-menu__lines::after {
  top: 0;
  transform: rotate(-45deg);
}
.burger-menu_active .burger-menu__lines::before {
  top: 0;
  transform: rotate(45deg);
}

.burger-menu_active .burger-menu__button:hover .burger-menu__lines {
  background-color: transparent;
}

.nav-logo {
  display: block;
}

.nav-logo_mobile {
  display: none;
}

.burger-menu_active .nav-logo_mobile {
  display: block;
}

.burger-menu_active .nav-logo {
  display: none;
}

.burger-menu__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.burger-menu_active .burger-menu__overlay {
  display: block;
}

.nav-logo_mobile-header {
  display: none;
}

.tabs {
  overflow: hidden;
  border-radius: 5px;
}

.tabs__body {
  background-color: #888;
}

.tabs__content {
  display: none;
  padding: 30px;
  color: #fff;
  transform: scaleY(0.8);
  opacity: 0;
  display: flex;
  transform-origin: center top;
  animation: showContent 0.6s forwards;
}

.tabs__content_active {
  display: block;
}

.tabs__caption_active {
  border-bottom: 1px solid #02357d;
}

.tabs__content.show {
  display: block;
}

.active {
  opacity: 0.8;
}

.tabs__content_title {
  color: #02357d;
  text-decoration: underline;
  font: 600 13px "Noto Sans";
}

.nav-submenu__item {
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
}

.nav-submenu__link {
  color: #fff;
  font: 600 13px "Noto Sans";
}
@keyframes showContent {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media screen and (max-width: 1024px) {
  .nav-logo_mobile-header {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-top: 15px;
    margin-left: 15px;
  }
  .section__header {
    width: 100%;
    margin: 0;
  }
  .section__nav-container {
    margin: 0;
  }
  .container.section__nav-container {
    padding: 0;
  }
  .burger-menu__button {
    display: block;
  }
  .burger-menu__container {
    width: 45%;
    position: fixed;
    padding: 20px 20px 40px 20px;
    background-color: #000;
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    left: -100%;
    transition: 0.3s ease-in-out 0.1s;
  }
  .burger-menu_active .burger-menu__container {
    left: 0;
  }
  .section__nav-bottom {
    margin-top: 20px;
  }
  .nav-menu__list-item {
    margin-top: 15px;
  }
  .section__nav-top {
    align-self: flex-start;
  }
  .nav-menu__list {
    align-items: center;
  }
  .nav-menu {
    width: 100%;
    margin-top: 25px;
  }
  .nav-menu__list {
    flex-direction: column;
  }
  .nav-menu__list-item {
    color: #fff;
  }
  input {
    border: 2px solid #fff;
    color: #fff;
  }
  input::-moz-placeholder {
    background: transparent;
    color: #fff;
  }
  input::placeholder {
    background: transparent;
    color: #fff;
  }
  .nav-menu__list-item .nav-menu__list-link {
    color: #fff;
    transition: 1s ease-in-out 0.3s;
  }
  .nav-menu__list-item .nav-menu__list-link:hover {
    color: #ccc;
  }
  .nav__search i {
    color: #fff;
  }
  li.nav-menu__contacts a {
    color: #fff;
  }
  li.nav-menu__contacts i {
    color: #02357d;
    margin-right: 7px;
  }
  li.nav-menu__contacts a:hover {
    color: #ccc;
  }
  .nav-menu__list-item {
    margin-top: 15px;
  }
  .nav-menu__contacts {
    margin-top: 25px;
  }
  .nav-submenu__list {
    left: 0;
    max-height: auto;
    width: 300px;
    flex-wrap: nowrap;
    background-color: #000;
  }
  .show {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .burger-menu__container {
    width: 75%;
  }
}/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.cdnfonts.com/css/noto-sans" rel="stylesheet">
    <script src="https://use.fontawesome.com/5f455dc027.js"></script>
    <link rel="stylesheet" href="src/css/style.css">
    <title>Тайт</title>
    <meta name="Description" content="" />
<meta name="Keywords" content="" />
<link rel="canonical" href="/" />
</head>
<body>
    <div class="section">
        <div class="container section__nav-container burger-menu">
            <a class="nav-logo_mobile-header" href="/"><img src="/src/img/aipr-logo-frvr.svg" alt=""></a>
            <a href="#" class="burger-menu__button">
                <span class="burger-menu__lines"></span>
            </a>
            <div class="burger-menu__container">
                <header class="section__header">
                    <a class="nav-logo" href="/"><img src="/src/img/aipr-logo-frvr.svg" alt=""></a>
                    <a class="nav-logo_mobile" href="/"><img src="/src/img/aipr-logo-frvr-mobile.svg" alt=""></a>
                </header>
                <nav class="section__nav nav-menu">
                    <div class="section__nav-top">
                        <div class="nav__search">
                            <i class="nav__search-icon fa fa-search" aria-hidden="true"></i>
                            <form action="" method="get">
                                <input type="search" class="nav__search-input" placeholder="Поиск по исследованиям">
                            </form>
                        </div>
                    </div>
                    <div class="section__nav-bottom tabs">
                        <ul class="nav-menu__list tabs__head">
                            <li class="nav-menu__list-item tabs__caption" data-tab="catalog">Каталог</br> исследований</li>
                            <li class="nav-menu__list-item tabs__caption" data-tab="about">О компании
                            </li>
                            <li class="nav-menu__list-item tabs__caption" data-tab="services">Услуги
                            </li>
                            <li class="nav-menu__list-item tabs__caption" data-tab="keis">Кейсы
                            </li>
                            <li class="nav-menu__list-item">Контакты
                            </li>
                            <li class="nav-menu__list-item nav-menu__contacts">
                                <i class="nav-menu__contacts-icon fa fa-phone" aria-hidden="true"></i>
                                <a href="phone:" class="nav-menu__contacts-link"></a>                            
                            </li>
                            <li class="nav-menu__list-item nav-menu__contacts">
                                <i class="nav-menu__contacts-icon fa fa-envelope-o" aria-hidden="true"></i>
                                <a href="" class="nav-menu__contacts-link"></a>
                            </li>
                        </ul>
                        <div class="tabs__body">
                            <div class="tabs__content" data-tab="catalog">
                                <!-- <h3 class="tabs__content_title">Каталог</br>исследований</h3> -->
                                <ul class="nav-submenu__list">
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Нефтегазовая промышленность (454)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Информационные технологии, оборудование (161)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Машиностроение, промышленное оборудование (590)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Металлургия, металлы, металоизделия (811)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Электротехника, электроника (140)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Добывающая промышленность, сырье (274)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Строительство, недвижимость (1009)</a>
                                    </li>
                                </ul>
                                <ul class="nav-submenu__list">
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Потребительские товары (922)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Легкая промышленность (580)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Медицинская фармакология (332)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">для бизнеса (191)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Перевозки, логистика (91)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Химическая промышленность (1601)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Потребительские услуги (345)</a>
                                    </li>
                                </ul>
                                <ul class="nav-submenu__list">
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Продукты питания (1335)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Сельское хозяйство (607)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Тара и упаковка (111)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Деревообработка (371)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Электроэнергетика (113)</a>
                                    </li>
                                    <li class="nav-submenu__item">
                                        <a href="" class="nav-submenu__link">Транспорт (375)</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tabs__content" data-tab="about">2Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum deserunt incidunt ex nisi veniam totam error omnis eum accusamus consequuntur voluptatum quis natus eaque vero quia, quae quos repudiandae rem.</div>
                            <div class="tabs__content" data-tab="services">3Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum deserunt incidunt ex nisi veniam totam error omnis eum accusamus consequuntur voluptatum quis natus eaque vero quia, quae quos repudiandae rem.</div>
                            <div class="tabs__content" data-tab="keis">4Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum deserunt incidunt ex nisi veniam totam error omnis eum accusamus consequuntur voluptatum quis natus eaque vero quia, quae quos repudiandae rem.</div>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="burger-menu__overlay"></div>
        </div>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="/src/js/scripts.js"></script>
</body>
</html>

css javascript вёрстка
Источник: Stack Overflow на русском

Ответы

Ответов пока нет.