Модальное меню в html?
0
Здравствуйте,подскажите пожалуйста по Модальное меню в html,нужно чтобы оно срабатывало по нажатию в меню по кнопке,свои наброски кода ниже
index.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS </title>
<!-- Bootstrap reboot (для сброса стилей) -->
<link rel="stylesheet" href="/test/3/practice-starter-template-main/practice-starter-template-main/libs/bootstrap-reboot.min.css">
<!-- Bootstrap сетка -->
<link rel="stylesheet" href="/test/3/practice-starter-template-main/practice-starter-template-main/libs/bootstrap-grid.min.css">
<!-- Шрифты с Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- Стили сайта -->
<link rel="stylesheet" href="/test/3/practice-starter-template-main/practice-starter-template-main/registr.html">
<link rel="stylesheet" href="/test/3/practice-starter-template-main/practice-starter-template-main/login.html">
<link rel="stylesheet" href="/test/3/practice-starter-template-main/practice-starter-template-main/css/styles.css">
</head>
<body>
<!-- СОДЕРЖИМОЕ САЙТА -->
<nav class="navbar">
<div class="container">
<a href="#"class="navbar-brand">MISA</a>
<div class="navbar-wrap">
<ul class="navbar-menu">
<li><a href="/test/3/practice-starter-template-main/practice-starter-template-main/index.html">Головна</a></li>
<li><a href="#">Товари</a></li>
</ul>
<a href="/test/3/practice-starter-template-main/practice-starter-template-main/registr.html"class="regist">Зареєструватися</a>
<a href="/test/3/practice-starter-template-main/practice-starter-template-main/login.html"class="entrance">Вхід</a>
</div>
</div>
</nav>
<script>
function e(e,t){const s=e.target.closest(`[${t.toggle}]`),o=e.target.closest(`[${t.remove}]`),l=e.target.closest(`[${t.add}]`);s&&(e.preventDefault(),((e,t)=>{const s=e.getAttribute(t.toggle);document.querySelectorAll(`[${t.toggle}]`).forEach((s=>{if(!s.hasAttribute(t.parallel)&&s!==e){document.querySelector(s.getAttribute(t.toggle)).classList.remove(s.getAttribute(t.class));const o=e.getAttribute(t.self);o&&e.classList.remove(o)}})),document.querySelector(s)?.classList.toggle(e.getAttribute(t.class));const o=e.getAttribute(t.self);o&&e.classList.toggle(o),t.onToggle(e)})(s,t)),o&&(e.preventDefault(),((e,t)=>{const s=e.getAttribute(t.remove),o=e.getAttribute(t.class);document.querySelectorAll(s).forEach((e=>{e.classList.remove(o)}));const l=e.getAttribute(t.self);l&&e.classList.remove(l),t.onRemove(e)})(o,t)),l&&(e.preventDefault(),((e,t)=>{const s=e.getAttribute(t.add),o=e.getAttribute(t.class);document.querySelectorAll(s).forEach((e=>{e.classList.add(o)}));const l=e.getAttribute(t.self);l&&e.classList.add(l),t.onAdd(e)})(l,t)),s||o||l||((e,t)=>{const s=document.querySelectorAll(`[${t.rcoe}]`);Array.from(s).forEach((s=>{let o=s.getAttribute(t.toggle),l=s.getAttribute(t.class);if(!e.target.closest(o)){document.querySelector(o)?.classList.remove(l);const e=s.getAttribute(t.self);e&&s.classList.remove(e),t.onRcoe(s)}}))})(e,t)}const t={toggle:"easy-toggle",add:"easy-add",remove:"easy-remove",class:"easy-class",rcoe:"easy-rcoe",parallel:"easy-parallel",self:"easy-self",selfRcoe:"easy-self-rcoe",onToggle(e){},onAdd(e){},onRemove(e){},onRcoe(e){}},s=s=>{const o={...t,...s};document.addEventListener("click",(t=>{e(t,o)}))};export{s as default};
//# sourceMappingURL=easy-toggler.min.js.map
</script>
</body>
</html>
css
/**
* Базовые стили для всего сайта
*/
body {
position: relative;
font-family: 'Noto Sans', sans-serif;
font-size: 16px;
line-height: 1.4;
color: #000;
min-width: 320px;
overflow-x: hidden;
height: auto;
}
.navbar{
width: 100%;
height: 70px;
box-shadow: 0 4px 10px rgb(0, 0, 0, .1);
background: blue;
}
.navbar .container{
height: inherit;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-menu{
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
.navbar-menu li{
display: inline-block;
}
.navbar-menu li a{
display: inline-block;
color: #000;
opacity: 0.6;
text-decoration: none;
padding: 10px;
transition: all .07s ease-in-out ;
}
.navbar-menu li a:hover{
opacity: 1;
}
.navbar-wrap{
display: flex;
flex-flow: row nowrap;
}
.regist{
margin-left: 70px;
padding: 10px 30px;
background-color: coral;
border-radius: 100px;
color: #fff;
text-decoration: none;
box-shadow: 0 4px 6px rgba(255, 127, 80, .2);
transition: all .1s ease-in-out;
}
.regist:hover{
transform: scale(1.04);
color: #fff;
box-shadow: 0 9px 9px rgba(255, 127, 80, .5);
}
.entrance{
margin-left: 70px;
padding: 10px 30px;
background-color: coral;
border-radius: 100px;
color: #fff;
text-decoration: none;
box-shadow: 0 4px 6px rgba(255, 127, 80, .2);
transition: all .1s ease-in-out;
top: 10px;
right: 10px;
}
.entrance:hover{
transform: scale(1.04);
color: #fff;
box-shadow: 0 9px 9px rgba(255, 127, 80, .5);
}
.navbar-brand{
font-weight: 600;
font-size: 26px;
text-decoration: none;
color: #000;
transition: all .07s ease-in-out ;
}
.navbar-brand:hover{
color: coral;
}
.modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: flex-start;
overflow-y: scroll;
padding: 60px 15px;
}
.modal__content {
width: 100%;
max-width: 500px;
padding: 50px;
background: #f9f9f9;
border-radius: 3px;
position: relative;
box-shadow: 0 5px 15px black;
}
.model.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.7;
z-index: 0;
}
.modal-window{
position: relative;
z-index: 2;
width: 550px;
border-radius: 10px;
box-shadow: 0 10px 15px rgb(0, 0, 0, .4);
background-color: #fff;
padding: 30px;
}
.btn-close{
position: absolute;
right: 20px;
top: 20px;
border: none;
background: none;
opacity: 0.7;
}
.btn-close:hover{
opacity: 1;
}
.close {
float: right;
font-family: sans-serif;
font-size: 25px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
h1{
text-align: center;
}
.cancelbtn{
margin: 50px;
}1 ответов
0
Bootstrap какой версии?
Вижу тут ошибки кстати:
<a href="#"class="navbar-brand">MISA</a> <a href="/test/3/practice-starter-template-main/practice-starter-template-main/registr.html"class="regist">Зареєструватися</a>
<a href="/test/3/practice-starter-template-main/practice-starter-template-main/login.html"class="entrance">Вхід</a>Пробел нужно поставить перед "class="