menu
This commit is contained in:
Kerim
parent
c3dccaa0f1
commit
8277c3b022
|
|
@ -225,3 +225,78 @@ const burgerAffichePair = new AssignEvent(
|
|||
"active",
|
||||
".burger-affiche-items"
|
||||
).listen();
|
||||
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
// LATEST CHANGES =====================================================
|
||||
|
||||
class SelectAll extends Select {
|
||||
super(className) {
|
||||
this.classname = className;
|
||||
}
|
||||
|
||||
select(all) {
|
||||
if (all) {
|
||||
return document.querySelectorAll(this.classname);
|
||||
} else {
|
||||
return document.querySelectors(this.classname);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Numerator {
|
||||
className;
|
||||
givenClassName;
|
||||
|
||||
constructor(className, givenClassName) {
|
||||
this.className = className;
|
||||
this.givenClassName = givenClassName;
|
||||
}
|
||||
|
||||
numerate() {
|
||||
// try {
|
||||
const elementNodeList = new SelectAll(this.className).select(true);
|
||||
elementNodeList.forEach((element, index) => {
|
||||
element.classList.add(`${this.givenClassName}-${index + 1}`);
|
||||
});
|
||||
return elementNodeList;
|
||||
// } catch (_err) {
|
||||
// throw new Error("Bad classname!");
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
const numeratedNavSectionList = new Numerator(
|
||||
".nav-section-span",
|
||||
"nav-section-span"
|
||||
).numerate();
|
||||
|
||||
const numeratedNavDropdownList = new Numerator(
|
||||
".nav-section-dropdown",
|
||||
"nav-section-dropdown"
|
||||
).numerate();
|
||||
|
||||
const nav = new Select(".nav").select();
|
||||
|
||||
numeratedNavSectionList.forEach((element) => {
|
||||
element.addEventListener("click", () => {
|
||||
if (!element.classList.contains("active")) {
|
||||
number = element.classList.toString().split("-").pop();
|
||||
numeratedNavSectionList.forEach((element) =>
|
||||
element.classList.remove("active")
|
||||
);
|
||||
numeratedNavDropdownList.forEach((element) =>
|
||||
element.classList.remove("active")
|
||||
);
|
||||
element.classList.add("active");
|
||||
numeratedNavDropdownList[number - 1].classList.add("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.nav {
|
||||
background: $base-black;
|
||||
box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
|
||||
// background: $base-black;
|
||||
// box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
|
|
@ -9,7 +9,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-top {
|
||||
background: $base-black;
|
||||
box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
position: relative;
|
||||
padding: 0.2rem 0;
|
||||
// @include flex;
|
||||
// justify-content: space-between;
|
||||
|
|
@ -20,11 +26,14 @@
|
|||
}
|
||||
|
||||
.nav-ul {
|
||||
z-index: 3;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 3.2rem;
|
||||
a {
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
padding: 1rem 0;
|
||||
|
|
@ -51,6 +60,54 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-section-dropdown {
|
||||
padding: 0 3rem;
|
||||
@include flex;
|
||||
gap: 3.3rem;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
max-height: 0;
|
||||
left: 0;
|
||||
top: 4.3rem;
|
||||
width: 100%;
|
||||
background: $base-green;
|
||||
z-index: 2;
|
||||
@include transition-std;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
|
||||
&.active {
|
||||
max-height: 4rem;
|
||||
@include transition-std;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1rem 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: $base-white;
|
||||
|
||||
&::after {
|
||||
left: 0;
|
||||
bottom: 0.5rem;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 0.1rem solid $base-white;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
&.active {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -142,8 +142,6 @@ a {
|
|||
}
|
||||
}
|
||||
.nav {
|
||||
background: rgb(36, 36, 36);
|
||||
box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
|
@ -151,7 +149,13 @@ a {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-top {
|
||||
background: rgb(36, 36, 36);
|
||||
box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
position: relative;
|
||||
padding: 0.2rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: 68% auto;
|
||||
|
|
@ -160,13 +164,15 @@ a {
|
|||
}
|
||||
|
||||
.nav-ul {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 3.2rem;
|
||||
}
|
||||
.nav-ul a {
|
||||
.nav-ul span {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
padding: 1rem 0;
|
||||
|
|
@ -174,7 +180,7 @@ a {
|
|||
color: rgb(255, 255, 255);
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.nav-ul a::after {
|
||||
.nav-ul span::after {
|
||||
left: 0;
|
||||
bottom: 0.5rem;
|
||||
position: absolute;
|
||||
|
|
@ -185,7 +191,51 @@ a {
|
|||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-ul a.active::after {
|
||||
.nav-ul span.active::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-section-dropdown {
|
||||
padding: 0 3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3.3rem;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
max-height: 0;
|
||||
left: 0;
|
||||
top: 4.3rem;
|
||||
width: 100%;
|
||||
background: rgb(3, 159, 55);
|
||||
z-index: 2;
|
||||
transition: 0.3s all ease;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.nav-section-dropdown.active {
|
||||
max-height: 4rem;
|
||||
transition: 0.3s all ease;
|
||||
}
|
||||
.nav-section-dropdown a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1rem 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.nav-section-dropdown a::after {
|
||||
left: 0;
|
||||
bottom: 0.5rem;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 0.1rem solid rgb(255, 255, 255);
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-section-dropdown a.active::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -103,13 +103,13 @@ random = 0
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="nav">
|
||||
|
||||
|
||||
{% partial 'new/menu' %}
|
||||
|
||||
{% partial 'new/morque' %}
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- HEAD end ======== -->
|
||||
|
||||
{% page %}
|
||||
|
|
|
|||
|
|
@ -3,47 +3,51 @@
|
|||
[staticMenu]
|
||||
code = "new-top-menui"
|
||||
==
|
||||
<div class="container">
|
||||
<div class="nav-inner">
|
||||
<div class="nav-left">
|
||||
<ul class="nav-ul">
|
||||
|
||||
{% for item in staticMenu.menuItems %}
|
||||
{% if not item.isHidden %}
|
||||
|
||||
<li><a href="{{ item.url }}">{{ item.title }}</a></li>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="https://ogt-turkmenistan.com" target="_blank" class="nav-right-link">OGT</a>
|
||||
<ul class="nav-lang">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="lang-country">
|
||||
<img src="{{ 'assets/new/icons/ukflag.svg'|theme}}" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="lang-country">
|
||||
<img src="{{ 'assets/new/icons/tmflag.svg'|theme}}" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="lang-country">
|
||||
<img src="{{ 'assets/new/icons/ruflag.svg'|theme}}" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav" style="margin-bottom: 0px;">
|
||||
<section class="nav-top">
|
||||
<div class="container">
|
||||
<div class="nav-inner">
|
||||
<div class="nav-left">
|
||||
<ul class="nav-ul">
|
||||
{% for item in staticMenu.menuItems %}
|
||||
{% if not item.isHidden %}
|
||||
|
||||
<li>
|
||||
<span class="nav-section-span {% if (item.isActive) %} active {% endif %} "> <a href="{{ item.url }}" style="color:white;">{{ item.title }}</a></span>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a class="nav-right-link">OGT</a>
|
||||
<ul class="nav-lang">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="lang-country">
|
||||
<img src="{{'assets/new/icons/ukflag.svg'|theme}}" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="lang-country">
|
||||
<img src="{{'assets/new/icons/tmflag.svg'|theme}}" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="lang-country">
|
||||
<img src="{{'assets/new/icons/ruflag.svg'|theme}}" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
|
|
@ -29,7 +29,7 @@ random = 0
|
|||
|
||||
|
||||
<!-- MAIN ======== -->
|
||||
<main class="main">
|
||||
<main class="main" style="margin-top: 40px;">
|
||||
<div class="main-inner">
|
||||
<section class="main-inner-content">
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ code = "new-top-menui"
|
|||
|
||||
|
||||
<li>
|
||||
<span class="nav-section-span {% if (item.isActive) %} active {% endif %} "> <a href="{{ item.url }}">{{ item.title }}</a></span>
|
||||
<span class="nav-section-span {% if (item.isActive) %} active {% endif %} "> <a href="{{ item.url }}" style="color: white;">{{ item.title }}</a></span>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue