Страница 1 из 3123»
Форум про uCoz » Раздел для uCoz » Java скрипты » Мобильное меню для Лендинг сайта выезжает справа
Мобильное меню для Лендинг сайта выезжает справа
workman
Дата: Понедельник, 18.09.2017, 12:38 | Сообщение # 1
Гл. Модератор
Сообщений:1696
Награды: 8


Вот такое простенькое меню, под мобильные устройства.
Я сделал для себя чтобы выскакивало справа, а вы если шарите в стилях, то можете заточить как вам нравится.
При клике по ссылке блок с ссылками пропадает (смотрим скрин внизу).
Меню заточено по Лендинг сайты.
DEMO только с мобильного приложения или уменьшить размер браузера ))
Код
<div class="show-on-mobile">
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<ul class="hidden-menu">
<li><a href="#">ваша ссылка</a></li>
<li><a href="#">ваша ссылка</a></li>
<li><a href="#">ваша ссылка</a></li>
<li><a href="#">ваша ссылка</a></li>
<li><a href="#">ваша ссылка</a></li>
<li><a href="#">ваша ссылка</a></li>
<li><a href="#">ваша ссылка</a></li>
</ul>
</div>

CSS
Код
.hidden-menu {display:block;position:fixed;list-style:none;padding:15px;box-sizing:border-box;width:320px;background:#007badcc;height:100%;top:0;right:-320px;transition:right .2s;z-index:2;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;}
.hidden-menu li {border-bottom:1px solid #6796ab;padding:15px;text-transform:uppercase;font-size:14px;font-family:RalewaySemiBold;}
.hidden-menu a {text-decoration:none;color:#fff;}
.hidden-menu a:hover {color:#fff000;}
.hidden-menu-ticker {display:none;}
.btn-menu {color:#0058B9;position:fixed;top:22px;right:22px;cursor:pointer;transition:right .23s;z-index:3;width:25px;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;}
.btn-menu span {display:block;height:3px;background-color:#fff;margin:5px 0 0;transition:all .1s linear .23s;position:relative;}
.btn-menu span.first {margin-top:0;}
.hidden-menu-ticker:checked ~ .btn-menu {right:-30px;}
.hidden-menu-ticker:checked ~ .hidden-menu {right:0;}
.hidden-menu-ticker:checked ~ .btn-menu span.first {-webkit-transform:rotate(45deg);top:8px;}
.hidden-menu-ticker:checked ~ .btn-menu span.second {opacity:0;}
.hidden-menu-ticker:checked ~ .btn-menu span.third {-webkit-transform:rotate(-45deg);top:-8px;}
.show-on-mobile { display:none;}
@media only screen and (max-width:620px){ .show-on-mobile { display:inline;}
header .intro {text-align:left;}
}
JS
Код
<script>$('.hidden-menu a').click(function(){
    $('#hmt').click()
})</script>
Страна: (RU)
workman
Дата: Понедельник, 18.09.2017, 12:40 | Сообщение # 2
Гл. Модератор
Сообщений:1696
Награды: 8


Вот было бы еще здорово если бы админ установил на форуме редактирование тем, так как не улеглась картинка и поменять не реально, так как нет кнопки редактирования.. Ну а с другой стороны можеттак и задумано было 07a 11a

Ну ловите тогда повтор скриншота

Страна: (RU)
Kosten
Дата: Понедельник, 18.09.2017, 16:01 | Сообщение # 3
Администраторы
Сообщений:15806
Награды: 51


workman, норм.. на главную еще перекину.
Страна: (RU)
workman
Дата: Понедельник, 18.09.2017, 16:32 | Сообщение # 4
Гл. Модератор
Сообщений:1696
Награды: 8


Kosten,
Цитата Kosten ()
норм.. на главную еще перекину.

Если можешь, то можешь хоть на луну запульнуть ))) Главное хотя бы для VIP пользователей установив настройках, чтобы они могли на форуме редактировать свои сообщения и темы 11a 11a 11a
Страна: (RU)
Kosten
Дата: Понедельник, 18.09.2017, 16:41 | Сообщение # 5
Администраторы
Сообщений:15806
Награды: 51


workman, все сделал! 09a
Страна: (RU)
workman
Дата: Понедельник, 18.09.2017, 16:44 | Сообщение # 6
Гл. Модератор
Сообщений:1696
Награды: 8


Kosten, 11a

Прикрепления: 7163010.png(7Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 18.09.2017, 17:18 | Сообщение # 7
Администраторы
Сообщений:15806
Награды: 51


workman, было подключено Редактировать свои темы - сейчас еще подключил Редактировать свои сообщения должны кнопки появиться.
Страна: (RU)
workman
Дата: Понедельник, 18.09.2017, 17:19 | Сообщение # 8
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата Kosten ()
должны кнопки появиться.

Да. Спасибо. Появились
Страна: (RU)
HTML5
Дата: Понедельник, 18.09.2017, 17:54 | Сообщение # 9
Проверенные
Сообщений:159
Награды: 3


workman, а где CSS меню? 07a
Прикрепления: 6037219.png(28Kb)


Большая база фильмов и мультфильмов онлайн в Full HD и HD качестве KinoYes.tk
Страна: (RO)
Kosten
Дата: Понедельник, 18.09.2017, 17:58 | Сообщение # 10
Администраторы
Сообщений:15806
Награды: 51


HTML5, идет CSS, попробуйте почистить кэш на браузере.
Страна: (RU)
Kosten
Дата: Понедельник, 18.09.2017, 18:02 | Сообщение # 11
Администраторы
Сообщений:15806
Награды: 51


HTML5, сейчас проверю на тестовом.
Страна: (RU)
HTML5
Дата: Понедельник, 18.09.2017, 18:06 | Сообщение # 12
Проверенные
Сообщений:159
Награды: 3


Kosten, проверил в другом браузере, там есть, а в этом нет 50a

Большая база фильмов и мультфильмов онлайн в Full HD и HD качестве KinoYes.tk
Страна: (RO)
workman
Дата: Понедельник, 18.09.2017, 18:09 | Сообщение # 13
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата HTML5 ()
а где CSS меню?

http://zornet.ru/forum/162-6444-43284-16-1505727500
Страна: (RU)
Kosten
Дата: Понедельник, 18.09.2017, 18:12 | Сообщение # 14
Администраторы
Сообщений:15806
Награды: 51


Цитата HTML5 ()
Kosten, проверил в другом браузере, там есть, а в этом нет

Тоже что то не могу его после установки увидеть. 07a
Страна: (RU)
workman
Дата: Понедельник, 18.09.2017, 18:17 | Сообщение # 15
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата HTML5 ()
Yandex браузере нет стилей

Поправил. И вообще перестань пользоваться "тормозом" Я.Браузер
Сейчас Лиса круче и быстрее намного )) Уж поверь на слове!!! Я знаю что говорю 04b
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Java скрипты » Мобильное меню для Лендинг сайта выезжает справа
Страница 1 из 3123»
Поиск: