Создание меню на чистом CSS

Как сделать меню для сайта на чистом CSS?

Доброго времени суток, друзья. Частой задачей при разработки сайта или приложения является создание меню с целью лучшей навигации. Есть несколько путей решения этой задачи: либо с помощью CSS, либо с использованием JS. В данной статье я хочу показать вам путь решения этой задачи по средствам только одного CSS. Приступим.

Видео по теме:

Создание HTML макета

Для начала нам потребуется создать саму верстку по средам HTML тегов. Давайте же сделаем это.

		<nav>
            <div class="wrapper">
                <label for="menuToggle">Меню</label>
                <input id="menuToggle" type="checkbox">
            
            <ul class="menu clearfix">
                <li><a href="#">Главная</a></li>
                <li><a href="#">Страница1</a></li>
                <li><a href="#">Страница2</a></li>
                <li><a href="#">Страница3</a></li>
                <li><a href="#">О нас</a></li>
            </ul>
           </div>
        </nav>
        <section class="b-content">
            <div class="wrapper">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis 
				 autem consequatur eum facere neque. Tenetur laboriosam 
				 repellendus neque fuga, velit, totam, est, aspernatur 
				 sunt sapiente earum quo beatae. Fuga, officia.
             </div>
         </section> 
		 

Добавление основных CSS стилей

html{
    height: 100%;
    font-size: 18px;
}

.menu{
    list-style-type: none;
    margin: 0; 
    padding: 0;
}
nav{
    background: #4c3167;
}
.menu li{
    float: left;
}
.menu li a {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
}

section{
    padding-top: 10px;
}

.wrapper{
    max-width: 1024px;
    padding: 0 30px;
    margin: 0 auto;
}
.b-content{
    height: 100%;
    background: #c1aaff;
    color: #000;
}
.menuToggle{
    padding: 10px 15px;
    cursor: pointer;
    color: #fff;
    display: none;
}
body{
    height: 100%;
}

nav input{
    display: none;
}
nav label{
    padding: 10px 15px;
    color: #fff;
    display: none;
}

Добавление стилей для мобильной версии

@media ( max-width: 670px) {
    nav label{
        display: block;
    }

    #menuToggle:checked + .menu{
        display: block;
        position: absolute;
        background: #4c3167;
        width: 100%;
        margin-left: -30px;
        padding-left: 28px;
    }
    .menu li{
        float: none;
    }
    .menu{
        display: none;
    }
}

Это все что нужно для для создания меню на чистом CSS. Давайте поподробнее рассмотрим как это все работает. У нас есть обычный список в котором мы храним меню. Мы добавляем checkbox с помощью которого мы будем хранить состояния и тег <label> который будет у нас в роли кнопки меню на мобильных устройствах.

        <label for="menuToggle">Меню</label>
        <input id="menuToggle" type="checkbox">
            

Скрываем сам checkbox и оставляем смену состояния только тегу <label>.

Теперь добавляем стили которые будут показывать блок меню если мы кликае по тегу <label> и скрывать его по второму клику.

	#menuToggle:checked + .menu{
        display: block;
        position: absolute;
        background: #4c3167;
        width: 100%;
        margin-left: -30px;
        padding-left: 28px;
    }

Данная статья подошла к концу. Тут я оставил для вас исходник на GitHub. Сегодня мы рассмотрели пример того как на нативном CSS  c использование checkbox можно создать полноценно адаптивное меню для мобильных устройств. C вами был Corvax. Да новых встреч!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.