Loading





Форекс с Альпари

eTXT




Анкетка


Меню, открывающееся на весь экран

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это мобильное меню на CSS и JavaScript при клике мышкой открывается на полный экран. Работает во всех современных браузерах и мобильных устройствах.

Демо-пример

Для установки меню на сайт необходимо:

1. Скопировать и вставить код со стилями и скриптами в раздел head своего сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


Если особо не разбираетесь в CSS и JavaScript, лучше в этом коде ничего не трогать.

2. А этот участок кода скопируйте и вставьте в раздел body своего сайта, где желаете видеть ссылки на открытие меню:


<div class="menuwrapper">

<input type="checkbox" id="togglebox">
<label for="togglebox" id="navtoggler"></label>

<nav id="expand-fullpagemenu">

<label for="togglebox" id="closex">Close</label>

		<ul>
		<li><a href="#" target="_blank">Главная</a></li>
		<li><a href="#" target="_blank">Карта сайта</a></li>
		<li><a href="#" target="_blank">Мой магазин</a></li>
		<li><a href="#" target="_blank">Электронные книги</a></li>
		<li><a href="#" target="_blank">Служба поддержки</a></li>
		<li><a href="#" target="_blank">Гостевая книга</a></li>

		</ul>

</nav>

</div>


<br><span>
<a href="#" onClick="expandfullscreenmenu('open')">Открыть меню</a><br>
<a href="#" onClick="expandfullscreenmenu()">Открыть меню</a><br>
<a href="#" onClick="expandfullscreenmenu('close')">Открыть меню</a>
</span>

Меню работает на JavaScript, что позволяет переключать его состояние в полноэкранный режим. Для этого предназначена функция:


expandfullscreenmenu(action)

Параметр action может принимать один из следующих трех вариантов: open, close, или быть пустым. Когда выставлен вариант close, ссылка становится нерабочей. При вызове функции без параметров (между скобками пусто), функция всё равно переключает состояние меню до полной страницы.

Спасибо за внимание. Желаю счастья! Всё будет хорошо, даже если всё будет наоборот! Пока! L.M.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка