#html #css #navbar
#HTML #css #панель навигации
Вопрос:
Итак, у меня проблема с моей панелью навигации на мобильном устройстве. Он скрыт и отображается только тогда, когда я нажимаю на панель (переключатель). Проблема в том, что если я нажимаю на экран, когда панель навигации не отображается, она все равно переходит к ссылкам, даже если я не вижу li.
Я хочу сохранить ту же панель навигации, но я не хочу получать доступ к ссылкам, когда она закрыта.
Если это возможно, пожалуйста, скажите мне, как это решить, и проблемы моей панели навигации
Это мой код:
.banner {
margin: 0px;
position: relative;
width: 100%;
height: 100vh;
background-size: cover;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url(../img/pozabackground-home2.jpg);
background-position: center;
box-shadow: 1px 2px 4px 0px #00000075 !important;
background-attachment: fixed;
}
.navigatie {
background-color: transparent;
width: 100%;
position: fixed;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.1px;
font-weight: 600;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #104f47 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color: #104f47;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked .nav-btn {
transform: rotate(45deg);
background-color: #104f47;
}
#nav:checked .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked~.nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked~.nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN PTR TLF */
@media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 48px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
/* SCRIS DE LA BANNER */
.title {
position: absolute;
top: 47%;
left: 35%;
text-align: left;
transform: translate(-50%, -50%);
}
.title h1 {
color: #fff;
font-family: poppins;
font-size: 50px;
color: #f5f6f8;
padding-bottom: 20px;
}
.button button {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
text-align: center;
padding: 13px 20px;
border: none;
color: white;
font-family: montserrat;
text-decoration: none;
transition: 0.6s ease;
background-color: #104f47;
box-shadow: 1px 2px 4px 0px #00000075;
outline: none;
}
.button button:hover {
background-color: #104f47;
color: white;
}
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a class="navbar-brand" href="index.php"><img src="./img/logoinainte.png"></a>
</div>
<div class="nav-wrapper">
<ul>
<li><a href="">Acasa</a></li>
<li><a href="/pages/despre.php">Despre</a></li>
<li><a href="/pages/servicii.php">Servicii</a></li>
<li><a href="#">Tarife</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<section class="banner">
<div class="container">
<div class="title">
<h1>Aspect curat <br>și îmbunătățit al <br>locuinței tale</h1>
<div class="button">
<a href="tel:2222222222"><button type="button">Sună acum!</button></a>
</div>
</div>
</div>
</section>
Не могли бы вы сказать мне, в чем проблема?
Ответ №1:
Вы используете opacity
. С непрозрачностью элемент становится невидимым, но он все еще там. Вы должны установить для его отображения значение none. И когда кнопка нажата, вы должны установить ее отображение на блокировку.
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}