Полноэкранное меню для сайта на HTML и CSS
 | |
| Это отличное приложение для навигаций под мобильные устройства, также под интернет сайты, где при клике появится на весь экран меню запросов. Теперь есть возможность установить значок в любом месте, главное, чтоб он был виден. Так как он идет знаком на раскрытие бокового меню, но здесь открытие наполненным будет. Где в самом центре вы увидите запросы или самые актуальные ключевые слова. Где можно по одному клику сделать один переход на основной материал. Тематически не могу сказать, что оно точно может подойти, к той или иной теме. Здесь больше идет под функциональность и безусловно в основе стоит навигация по сайту. Безусловно, это альтернативное исполнение мобильного полно экранного меню, в котором используется CSS3, для того чтобы сначала свернуть полно экранное меню, расширяясь, чтобы заполнить экран при его расширении. Так как вся информация будет находиться на развороте. Палитра цвета может быть разная, если у вас красивый дизайн, то здесь есть возможность сделать прозрачную штору, которая откроется. Он использует популярный CSS флажок рядом со спутником, чтобы переключать меню между открытыми и закрытыми, когда нажат переключатель. Меню работает во всех современных браузерах и мобильных устройствах, в то время как в IE8 представлен более ограниченный интерфейс, который по крайней мере будет функционален для этих пользователей. Часто называют меню гамбургеров на CSS, что отображается на полный экран меню навигации. Для шрифта в этом меню используется Bitter шрифт Google. Проверяя на работоспособность, где после установки, должно так получится.  Приступаем к установке: HTML Код <div class="zonetulastnug"> <input type="checkbox" id="gturesazilonta" /> <label for="gturesazilonta" id="gsazolperdsam"></label> <nav id="vertulopaskanub"> <label for="gturesazilonta" id="zartunok">Close</label> <ul> <li><a href="http://zornet.ru/">ZorNet.Ru Вебмастера</a></li> <li><a href="http://zornet.ru/load/81">Скрипты для uCoz</a></li> <li><a href="http://zornet.ru/load/81">Шаблоны для uCoz</a></li> <li><a href="http://zornet.ru/load/84">Меню для сайта uCoz</a></li> <li><a href="http://zornet.ru/news/">Новости на сайте</a></li> </ul> </nav> </div> CSS Код body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } input[type="checkbox"]#gturesazilonta { position: absolute; left: 0; top: 0; visibility: hidden; } label#gsazolperdsam{ z-index: 10; display: block; position: relative; font-size: 9px; width: 3.8em; height: 2.1em; top: 0; left: 0; text-indent: -1000px; border: 0.6em solid black; border-width: 0.6em 0; cursor: pointer; } label#gsazolperdsam::before{ content: ""; display: block; position: absolute; width: 100%; height: 0.5em; top: 47%; margin-top: -0.3em; left: 0; background: } nav#vertulopaskanub { width: 100%; height: 100%; top: 0; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); transform: scaleY(0); background: #83e4f5; display: block; position: fixed; visibility: hidden; z-index: 100; opacity: 1; text-align: center; overflow: auto; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } nav#vertulopaskanub *{ opacity: 0; } nav#vertulopaskanub a{ text-decoration: none; color: black; text-transform: uppercase; } nav#vertulopaskanub ul{ list-style: none; margin: 0; padding: 0; position: relative; max-height: 100%; top: 38%; -webkit-transform: translateY(-45%); transform: translateY(-45%); font: bold 2em 'Bitter', sans-serif; } nav#vertulopaskanub ul li{ margin-bottom: 27px; } nav#vertulopaskanub ul li a{ padding: 8px; } nav#vertulopaskanub ul li a:hover{ text-decoration: underline; } nav#vertulopaskanub label#zartunok{ /* Large x close button inside nav */ width: 79px; height: 79px; overflow: hidden; display: block; position: absolute; cursor: pointer; text-indent: -1000px; z-index: 10; top: 0; right: 0; } nav#vertulopaskanub label#zartunok::before, nav label#zartunok::after{ content: ""; display: block; position: absolute; width: 100%; height: 6px; background: black; top: 50%; margin-top: -3px; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } nav#vertulopaskanub label#zartunok::after{ -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } input[type="checkbox"]#gturesazilonta:checked ~ nav#vertulopaskanub{ visibility: visible; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); transform: scaleY(1); opacity: 1; } input[type="checkbox"]#gturesazilonta:checked ~ nav#vertulopaskanub *{ visibility: visible; opacity: 1; /* last 0.5s specifies delay before transition begins */ -webkit-transition: opacity 0.4s 0.4s; -moz-transition: opacity 0.4s 0.4s; transition: opacity 0.4s 0.4s; } input[type="checkbox"]#gturesazilonta:checked ~ nav#vertulopaskanub ul{ top: 50%; -webkit-transition: top 0.4s 0.4s; -moz-transition: top 0.4s 0.4s; transition: top 0.4s 0.4s; } input[type="checkbox"]#gturesazilonta:checked ~ nav#vertulopaskanub label#zartunok::before{ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.4s 0.4s; -moz-transition: all 0.4s 0.4s; transition: all 0.4s 0.4s; } input[type="checkbox"]#gturesazilonta:checked ~ nav#vertulopaskanub label#zartunok::after{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.4s 0.4s; -moz-transition: all 0.4s 0.4s; transition: all 0.4s 0.4s; } Когда вы нажимаете на значок меню в правом верхнем углу, он перемещает меню навигации, которое заполняет весь экран и превращает меню гамбургера. Где аналогично по знаку делаем клик меню навигации и снова откроет содержимое. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |