Создание меню, которое будет адаптивным, пожалуй одна из сложных задач при верстке сайта, кто то делает его с помощью скриптов, а я же покажу вам способ создания адаптивного меню сайта с использованием CSS и HTML. Итак для начала нам нужно задать каркас нашего меню используя html.

Пока без стилей, конечно же не очень выглядит вот структура.

<input class="side-menu" type="checkbox" id="side-menu"> <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
<!-- Menu --><nav class="nav">
	<ul class="menu">
		<li><a href="#">Галерея </a></li>
		<li><a href="#">Блог</a></li>
		<li><a href="#">О нас</a></li>
	</ul>
</nav>

Ну и добавим стилей нашему меню, и сделаем его адаптивным.

.menuover {width: 100%;
     background-color: black; position:absolute}
.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
    overflow: hidden;
     margin-top: 82px;
}
.menu a{
    display: block;
    padding: 30px;
    color: white;
}
.menu a:hover{
    background-color: gray;
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}
.hamb{
    cursor: pointer;
    float: right;
    padding: 40px 20px;
}/* Style label tag */

.hamb-line {
    background: var(--white);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}
@media (min-width: 768px) {
    .nav{
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
    }
    .menu li{
        float: left;
    }
    .menu a:hover{
        background-color: transparent;
        color: gray;

    }

    .hamb{
        display: none;
    }
}

Это один из самых простых способов создания адаптивного меню для сайта без использования скриптов. Если у вас будут вопросы или нужна помощь в создании более сложного меню, обращайтесь помогу бесплатно. Чтобы видеть как меняется меню, изменяйте размер экрана.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .