Вы здесь: Главная > CSS > Показать / скрыть навигацию с помощью JavaScript

Показать / скрыть навигацию с помощью JavaScript

Опубликовано автором Просмотры: 24

Как показать или скрыть навигацию с помощью JavaScript?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Show / hide navigation (JavaScript)</title>
	<style>
		body {
			background: #333;
			color: #000;
			margin: 0;
			font: 300 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
	
		#container {
			width: 240px;
			position: relative;
			background: #fff;
			margin: 0 auto;
			padding: 40px;
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}
	
		#main_nav {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			width: 100%;
			
			border-radius: 0 0 5px 5px;
			box-shadow: 0 0 8px 2px #000;
		}

		.with_nav #main_nav {
			display: block;
		}

		.access_aid {
			display: none;
		}

		#access_nav {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 0;
			padding-top: 40px;
			overflow: hidden;
			border: 1px solid #ccc;
			background: white 10px 10px / 20px 20px no-repeat;

			background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
			z-index: 1;
		}

		.with_nav #access_nav {
			background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
		}
	</style>
</head>
<body id="body">
	<div id="container">
		<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
		<article>
			<h1>Show / Hide Navigation (JavaScript)</h1>
			<p>An example of a simple technique to show and hide navigation, using <em>JavaScript</em>. Particularly useful when designing for mobile.</p>
			<p>This also uses CSS gradients to produce the "show" and "hide" button icons instead of images.</p>
			<p>Delightful.</p>
			<p>See <a href="http://www.htmldog.com/techniques/showhide/">the related HTML Dog Techniques article</a> for more.</p>
		</article>

		<nav id="main_nav">
			<ul>
				<li><a href="">This</a></li>
				<li><a href="">That</a></li>
				<li><a href="">The other</a></li>
			</ul>
			<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
		</nav>
	</div>
</body>
<script>
	var nav = document.getElementById('access_nav'),
	    body = document.body;

	nav.addEventListener('click', function(e) {
		body.className = body.className? '' : 'with_nav';
		e.preventDefault();
	});
</script>
</html>

Страницы в тему:

Добавить комментарий