CSS Меню №13 - пример кода

Демо

4,32 КБ
HTML, CSS
Меню
адаптивное, вертикальное, горизонтальное
tricksforweb.dev
Лицензия MIT

Код
Редактор

HTML

<div class="menu-block">
    <div class="logo">
        <a href="#">
            <img src="https://tricksforweb.dev/wp-content/uploads/2024/01/logo-site.webp" alt="logo" />
        </a>
    </div>
    <nav class="menu" role="navigation">
        <ul class="menu-links">
            <li><a href="#">О нас</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Партнёрство</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </nav>
</div>

CSS

.menu-block,
.logo,
.menu,
.menu-links,
.logo > a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

.menu-block {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.36);
    -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.36);
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.36);
}

.logo {
    margin: 0 15px;
}

.logo > a {
    height: 100px;
    line-height: 100px;
    padding: 50px 0;
}

.logo > a > img {
    max-height: 40px;
}
.menu-links a {
    -webkit-text-decoration: underline 0 rgba(255, 255, 255, 0);
    -moz-text-decoration: underline 0 rgba(255, 255, 255, 0);
    text-decoration: underline 0 rgba(255, 255, 255, 0);
    text-underline-offset: 1px;
    text-transform: uppercase;
    color: black;
    -webkit-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
.menu-links a:hover {
    text-decoration: underline;
    color: blue;
    -webkit-text-decoration-color: blue;
    -moz-text-decoration-color: blue;
    text-decoration-color: blue;
}

.logo > a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 5px 0;
}

.logo > a > img {
    max-height: 40px;
}

.menu-links {
    list-style: none;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
}

.menu {
    margin: auto 0;
}
.menu-links li:not(:last-child) {
    margin-right: 10px;
}

@media only screen and (min-width: 1240px) {
    .menu-block {
        width: 250px;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: column;
        -webkit-box-shadow: 11px 0 28px 4px rgba(0, 0, 0, 0.22);
        -moz-box-shadow: 11px 0 28px 4px rgba(0, 0, 0, 0.22);
        box-shadow: 11px 0 28px 4px rgba(0, 0, 0, 0.22);
    }

    .logo {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        margin: 15px 0;
    }

    .logo > a {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 100px;
        line-height: 100px;
        padding: 50px 0;
    }

    .logo > a > img {
        width: 100%;
        max-height: 100%;
    }

    .menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        margin-top: 0;
    }

    .menu-links {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: column;
    }

    .menu-links li {
        width: 100%;
    }

    .menu-links li:not(:last-child) {
        margin-bottom: 15px;
    }
}

HTML
CSS

Фрагмент кода, который мы рассматриваем, направлен на создание навигационного меню веб-сайта, которое было бы как привлекательным, так и функциональным. Представьте: в верхней части веб-страницы находится изящное горизонтальное меню. Это меню является вашим проводником, ведущим вас в различные части сайта. Оно зафиксировано в верхней части и остается с вами, когда вы прокручиваете страницу. Оно разработано так, чтобы быть первым, что вы видите, с чистым белым фоном и тенью, которая слегка поднимает его над страницей, делая его более заметным.

Но вот где все становится действительно интересным. Это меню не просто красивое; оно создано для адаптации. Когда размер экрана достигает определенной ширины — благодаря магии CSS медиа-запросов — меню переходит из горизонтального расположения в вертикальное. Это то, что мы называем адаптивным меню. Как будто меню понимает, что экран становится слишком узким, и говорит: «Нет проблем, я могу измениться!» Вдруг меню растягивается вниз по боку вашего экрана, лучше используя пространство и сохраняя все доступным, независимо от размера устройства.

Стилизация CSS — это то, что придает этому преобразованию жизнь. Она обеспечивает согласованный вид меню на разных устройствах, с настройками для того, как выглядят и ведут себя ссылки при наведении на них. Речь идет о том, чтобы сделать меню не только функциональным, но и частью общего дизайна сайта. Переход от горизонтального к вертикальному расположению меню на меньших экранах является ярким примером дизайна с учетом пользователя, обеспечивая легкость навигации по сайту, независимо от того, как вы к нему обращаетесь. Эта адаптивность необходима в современном мире, где мы переключаемся между устройствами так, будто это ничего не стоит.