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

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

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

Демо-пример

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

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

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

<link href="//fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<style type="text/css">
input[type="checkbox"]#togglebox {
  /* checkbox used to toggle menu state */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

label#navtoggler{  /* Main label icon to toggle menu state */
  z-index: 9;
  display: block;
  position: relative;
  font-size: 8px;
  /* change font size to change label dimensions. Leave width/height below alone */
  width: 4em;
  height: 2.5em;
  top: 0;
  left: 0;
  text-indent: -1000px;
  border: 0.6em solid black;
  /* border color */
  border-width: 0.6em 0;
  cursor: pointer;
}


label#navtoggler::before{
  /* inner strip inside label */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;
  background: black; /* stripes background color. Change to match border color of parent label above */
}

nav#expand-fullpagemenu{ /* Full screen nav menu */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  -webkit-transform: scale(0.9);  /* initially scale down nav size */
  transform: scale(0.9);
  background: #AAEDEA;
  display: block;
  position: fixed;
	z-index: 100;
  opacity: 0;
	text-align: center;
	overflow: auto;
  -moz-transition: visibility 0s 0.5s, opacity 0.5s, -moz-transform 0.5s; /* transition settings */
  -webkit-transition: visibility 0s 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
}

input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu{ /* nav state when corresponding checkbox is checked */
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
  -ms-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -transition-delay: 0s;
}

nav#expand-fullpagemenu label#closex{ /* Large x close button inside nav */
  width: 80px;
  height: 80px;
	overflow: hidden;
  display: block;
  position: absolute;
  cursor: pointer;
	text-indent: -1000px;
  z-index: 10;
  top: 0;
  right: 0;
}

nav#expand-fullpagemenu label#closex::before, nav label#closex::after{ /* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

nav#expand-fullpagemenu label#closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

nav#expand-fullpagemenu a{
	text-decoration: none;
  color: black;
  text-transform: uppercase;
}

nav#expand-fullpagemenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-height: 100%;
  top: 50%; /* center UL vertically inside nav */
  -webkit-transform: translateY(-50%); /* center UL vertically inside nav */
  transform: translateY(-50%);
  font: bold 2em 'Bitter', sans-serif; /* use google font inside nav UL */
}

nav#expand-fullpagemenu ul li{
  margin-bottom: 25px;
}

nav#expand-fullpagemenu ul li a{
  padding: 10px;
  border-radius: 20px;
}

nav#expand-fullpagemenu ul li a:hover{
  background: lightblue;
}



</style>

<script type="text/javascript">

	// Extra function to control menu state from anywhere on your page/ inside your script
	function expandfullscreenmenu(action){ //param: 'open', 'close', or empty to toggle menu state
		var togglebox = document.getElementById("togglebox")
		var newstate =	(action == 'open')? true : (action == 'close')? false : !togglebox.checked
		togglebox.checked = newstate
	}

</script>

<!--[if lte IE 8]>

	<style type="text/css">

	/* IE8 specific CSS */

	label#navtoggler{
	  border-width: 0.6em;
	}

nav#expand-fullpagemenu label#closex{
	font-size: 2em;
	text-indent: 0;
}

	#expand-fullpagemenu{
		visibility: hidden;
	}

	</style>

	<script type="text/javascript">
	 // IE8 MENU COMPATIBILITY CODE:
	document.createElement("nav")

	function expandfullscreenmenu(action){
		var nav = document.getElementById("expand-fullpagemenu")
		var newstate =	(action == 'open')? 'visible' : (action == 'close')? 'hidden' : nav.style.visibility == 'hidden'? 'visible' : 'hidden'
		nav.style.visibility = newstate
	}

	window.attachEvent("onload", function(){
		document.getElementById("navtoggler").onclick = function(){
			expandfullscreenmenu('open')
		}
		document.getElementById("closex").onclick = function(){
			expandfullscreenmenu('close')
		}
	})
	
	</script>

<![endif]-->

Если особо не разбираетесь в 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.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки