Totally original css and js, totally not "borrowed" from twip-network.org

This commit is contained in:
Bruno Rybársky 2024-02-06 19:49:50 +01:00
parent 4c1864d6a1
commit 5ad3c77fa3
3 changed files with 45 additions and 24 deletions

@ -1,3 +1,11 @@
const toggleButton = document.getElementById("toggle_button")
const navLinks = document.getElementById("navsite_list")
toggleButton.addEventListener('click', () => {
navLinks.classList.toggle("active")
})
let UserInfo;
function handleResponse(data, successMessage, failureMessage) {

@ -131,6 +131,16 @@ ul
ul.navpage_list
{
gap:10px;
background-color:var(--third-bg);
border:0 solid transparent;
display:none;
flex-direction:column;
margin-top:10px;
max-height:0;
overflow:hidden;
position:relative;
transition:max-height .3s ease, border .325s ease;
z-index:2;
}
.back
@ -158,27 +168,7 @@ ul.navpage_list
.feature-list-ul ul
{
margin-left:20px;
margin-top:5px;
}
.feature-list-ul
{
margin:auto;
}
.navpage_list
{
background-color:var(--third-bg);
border:0 solid transparent;
display:none;
flex-direction:column;
margin-top:10px;
max-height:0;
overflow:hidden;
position:relative;
transition:max-height .3s ease, border .325s ease;
z-index:2;
margin: 5px auto auto 20px;
}
.navsite_item
@ -202,14 +192,36 @@ ul.navpage_list
max-height:0;
transition-delay:.1s;
}
.navsite_list
#navsite_list
{
display:flex;
flex-direction:row;
gap:3.25rem;
}
@media (max-width: 500px) {
.toggle-button {
display: flex;
}
#navsite_list {
display: none;
flex-direction: column;
}
.nav-links li {
text-align: center;
}
.nav-links.active {
display: flex;
}
nav {
flex-direction: column;
align-items: flex-start;
}
}
.status-message
{
background-color:#dff0d8;

@ -1,6 +1,7 @@
<nav>
<div class="logo"><img alt="Adlerka logo" class="standard-logo" width="213" height="50" src="https://www.adlerka.sk/wp-content/uploads/2021/09/Logo_text_Adlerka_modro_cerveno_biele-e1652431356820.png" title="Adlerka"></div>
<ul class="navsite_list">
<i class="ri-menu-line" id="toggle_button"></i>
<ul id="navsite_list">
__NAV_PAGES__
</ul>
</nav>