Меню на весь экран на чистом CSS3 для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Меню на весь экран на чистом CSS3 для uCoz


Описание меню:

С помощью CSS мы создадим анимированное меню, которое будет занимать весь экран и будет находится слева-вверху, страницы (то есть не будет занимать место на самой странице, а лишь в 60х60 пикселей сверху). Само меню полностью построено на CSS и не имеет ни каких картинок и js. Фон меню выполнен в синих тонах, а кнопка открыть и закрыть в голубых. CSS меню адаптировано под все мобильные устройства. Установка очень проста, надо в верхнюю часть или в основной Cascading Style Sheets подключить CSS и поставить HTML код к Вам на сайт.

Пример реализации CSS3 меню без использования javascripta или сторонних плагинов. Вариант можно использовать не только как меню, а, например, для удобного блока с текстом, или описания изображения и т. д.

Установка:

Для начала в верхнюю часть подключаем стили (CSS):
Код
<style>
.flex-center {
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -webkit-align-items: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
           justify-content: center;
}
* {
           box-sizing: border-box;
           font-family: 'Open Sans', sans-serif;
           font-weight: 300;
}

a,
a:visited,
a:hover,
a:active {
           color: #ffffff;
           text-decoration: none;
}

h1 {
           font-family: 'Pacifico', cursive;
           font-weight: 400;
           font-size: 3em;
           text-align: center;
}
.outer-menu {
           position: fixed;
           top: 10vh;
           left: 0;
           z-index: 1;
}
.outer-menu .checkbox-toggle {
           position: absolute;
           top: 0;
           left: 0;
           z-index: 2;
           cursor: pointer;
           width: 60px;
           height: 60px;
           opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
           -webkit-transform: rotate(135deg);
           -ms-transform: rotate(135deg);
           transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
           top: 0;
           -webkit-transform: rotate(90deg);
           -ms-transform: rotate(90deg);
           transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
           opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
           pointer-events: auto;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
           width: 200vw;
           height: 200vw;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
           opacity: 1;
           -webkit-transition: opacity 0.3s ease 0.3s;
           transition: opacity 0.3s ease 0.3s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
           box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
           -webkit-transform: rotate(225deg);
           -ms-transform: rotate(225deg);
           transform: rotate(225deg);
}
.outer-menu .hamburger {
           position: absolute;
           top: 0;
           left: 0;
           z-index: 1;
           width: 60px;
           height: 60px;
           padding: .5em 1em;
           background: rgba(33, 150, 243, 0.75);
           border-radius: 0 0.12em 0.12em 0;
           cursor: pointer;
           -webkit-transition: box-shadow 0.3s ease;
           transition: box-shadow 0.3s ease;
           -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -webkit-align-items: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
           justify-content: center;
}
.outer-menu .hamburger > div {
           position: relative;
           -webkit-box-flex: 0;
           -webkit-flex: none;
           -ms-flex: none;
           flex: none;
           width: 100%;
           height: 2px;
           background: #fefefe;
           -webkit-transition: all 0.3s ease;
           transition: all 0.3s ease;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -webkit-align-items: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
           justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
           content: '';
           position: absolute;
           z-index: 1;
           top: -10px;
           left: 0;
           width: 100%;
           height: 2px;
           background: inherit;
           -webkit-transition: all 0.3s ease;
           transition: all 0.3s ease;
}
.outer-menu .hamburger > div:after {
           top: 10px;
}
.outer-menu .menu {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           pointer-events: none;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -webkit-align-items: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
           justify-content: center;
}
.outer-menu .menu > div {
           width: 0;
           height: 0;
           color: #fefefe;
           background: rgba(41, 98, 255, 0.97);
           border-radius: 50%;
           -webkit-transition: all 0.3s ease;
           transition: all 0.3s ease;
           -webkit-box-flex: 0;
           -webkit-flex: none;
           -ms-flex: none;
           flex: none;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -webkit-align-items: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
           justify-content: center;
}
.outer-menu .menu > div > div {
           text-align: center;
           max-width: 90vw;
           max-height: 100vh;
           opacity: 0;
           -webkit-transition: opacity 0.3s ease;
           transition: opacity 0.3s ease;
           overflow-y: auto;
           -webkit-box-flex: 0;
           -webkit-flex: none;
           -ms-flex: none;
           flex: none;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-align: center;
           -webkit-align-items: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -webkit-justify-content: center;
           -ms-flex-pack: center;
           justify-content: center;
}
.outer-menu .menu > div > div > ul {
           list-style: none;
           padding: 0 1em;
           margin: 0;
           display: block;
           max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
           padding: 0;
           margin: 1em;
           font-size: 24px;
           display: block;
}
.outer-menu .menu > div > div > ul > li > a {
           position: relative;
           display: inline;
           cursor: pointer;
           -webkit-transition: color 0.3s ease;
           transition: color 0.3s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
           color: #e5e5e5;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
           width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
           content: '';
           position: absolute;
           z-index: 1;
           bottom: -0.15em;
           left: 0;
           width: 0;
           height: 2px;
           background: #e5e5e5;
           -webkit-transition: width 0.3s ease;
           transition: width 0.3s ease;
}
</style>

Код меню:
Код
<div class="outer-menu">
           <input class="checkbox-toggle" type="checkbox" />
           <div class="hamburger">
           <div></div>
           </div>
           <div class="menu">
           <div>
           <div>
           <ul>
           <li><a href="#">Главная страница</a></li>
           <li><a href="#">Форум нашего сайта</a></li>
           <li><a href="#">Каталог файлов</a></li>
           <li><a href="#">Создать сайт бесплатно</a></li>
           </ul>
           </div>
           </div>
           </div>
</div>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.08.2016 в 12:30
Материал просмотрен: 2185 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

Пожаловаться
Сказать спасибо

5 комментариев


webmasterivan
webmasterivan @webmasterivan 11.10.2015 14:131
+6
Красиво, че то только CSS файл большой.
uTrojan
Анимация.
При желание, всегда сжать можно.
DeQiz
Павел @DeQiz 18.10.2015 00:373
+1
А на мобильном будет работать?
Ромчик
Да. Будет работать и полностью адаптивно под все популярные мобильные устройства.
sea-serpent
Все хорошо, то "обожаемый" IE...
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта