#javascript #html #css #anchor #overlay
Вопрос:
Я плохо разбираюсь в Javascript, и я знаю, что для некоторых из вас это очень просто. Я перенял полноэкранное меню наложения из Codepen. Я пытаюсь понять, как я могу закрыть полноэкранное меню наложения, когда я нажал на ссылку привязки.
фрагмент здесь
@import "http://webfonts.ru/import/notcourier.css"; body { background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg'); } .lower { width: 340px; margin: 10% auto; padding: 50px; background: white; opacity: 0.8; color: black; box-shadow: inset 0 0 0 1px black; border: 30px solid white; } .lower:hover { background: black; color: white; box-shadow: inset 0 0 0 1px white; border: 30px solid black; } input { display: none; } .lower label { font-family: 'NotCourierSans'; text-transform: uppercase; font-size: 40px; text-align: center; } .lower label:hover { cursor: pointer; } .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.9); } .overlay label { width: 58px; height: 58px; position: absolute; right: 20px; top: 20px; background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png'); z-index: 100; cursor: pointer; } .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; } .overlay ul li a { font-weight: 300; display: block; color: white; text-decoration: none; -webkit-transition: color 0.2s; transition: color 0.2s; font-family: 'NotCourierSans'; text-transform: uppercase; } .overlay ul li a:hover, .overlay ul li a:focus { color: #849368; } .lower~.overlay-hugeinc { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } #op:checked~.overlay-hugeinc { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .overlay-hugeinc nav { -moz-perspective: 300px; } .overlay-hugeinc nav ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; } #op:checked~.overlay-hugeinc nav ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } #op:not(:checked)~.overlay-hugeinc nav ul { -webkit-transform: translateY(25%) rotateX(-35deg); transform: translateY(25%) rotateX(-35deg); } lt;input type="checkbox" id="op"gt;lt;/inputgt; lt;div class="lower"gt; lt;label for="op"gt;click the textlt;/labelgt; lt;/divgt; lt;div class="overlay overlay-hugeinc"gt; lt;label for="op"gt;lt;/labelgt; lt;navgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Worklt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Clientslt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Contactlt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt; кто-нибудь может помочь мне закрыть полноэкранное меню наложения, добавив javascript в код?
Комментарии:
1. добавьте событие щелчка для меню тег, который снимает флажок
#op
Ответ №1:
$( ".target" ).click(function() { $("#op").prop('checked', false); }); body { background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg'); } .lower { width: 340px; margin: 10% auto; padding: 50px; background: white; opacity: 0.8; color: black; box-shadow: inset 0 0 0 1px black; border: 30px solid white; } .lower:hover { background: black; color: white; box-shadow: inset 0 0 0 1px white; border: 30px solid black; } input { display: none; } .lower label { font-family: 'NotCourierSans'; text-transform: uppercase; font-size: 40px; text-align: center; } .lower label:hover { cursor: pointer; } .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.9); } .overlay label { width: 58px; height: 58px; position: absolute; right: 20px; top: 20px; background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png'); z-index: 100; cursor: pointer; } .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; } .overlay ul li a { font-weight: 300; display: block; color: white; text-decoration: none; -webkit-transition: color 0.2s; transition: color 0.2s; font-family: 'NotCourierSans'; text-transform: uppercase; } .overlay ul li a:hover, .overlay ul li a:focus { color: #849368; } .lower~.overlay-hugeinc { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } #op:checked~.overlay-hugeinc { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .overlay-hugeinc nav { -moz-perspective: 300px; } .overlay-hugeinc nav ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; } #op:checked~.overlay-hugeinc nav ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } #op:not(:checked)~.overlay-hugeinc nav ul { -webkit-transform: translateY(25%) rotateX(-35deg); transform: translateY(25%) rotateX(-35deg); } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;input type="checkbox" id="op"gt;lt;/inputgt; lt;div class="lower"gt; lt;label for="op"gt;click the textlt;/labelgt; lt;/divgt; lt;div class="overlay overlay-hugeinc"gt; lt;label for="op"gt;lt;/labelgt; lt;navgt; lt;ulgt; lt;ligt;lt;a class="target" href="#"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a class="target" href="#"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a class="target" href="#"gt;Worklt;/agt;lt;/ligt; lt;ligt;lt;a class="target" href="#"gt;Clientslt;/agt;lt;/ligt; lt;ligt;lt;a class="target" href="#"gt;Contactlt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt;