Fretux/anomaly-front-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp navigation UI with modern hamburger menu

Browse Source
This commit is contained in:
IM23a-spirgif
2025-05-17 00:00:08 +02:00
parent 30527dc27e
commit 71b9b3d41d
5 changed files with 224 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/calculator.html
+26 -40
View File
@@ -7,25 +7,6 @@
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>DPM/DPS Calculator</title>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function toggleDropdown() {
var dropdownContent = document.querySelector(".dropdown-content");
// Toggle the display property between 'block' and 'none'
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
}
// Collapsible functionality for perks, buffs, etc.
document.addEventListener('DOMContentLoaded', function () {
var coll = document.getElementsByClassName("collapsible-header");
@@ -45,29 +26,20 @@
</head>
<header>
<nav>
<p class="divider">_</p>
<div class="topnav" id="myTopnav">
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropdown()"><img
src="/static/img/menu-list-icon-app-navigation-option-page-interface-dropdown-three-lines-button-dots-sign-symbol-black-artwork-graphic-illustration-clipart-eps-vector.jpg"
height="50" width="50">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" style="display: none;">
<a href="{{ url_for('index') }}">GUN STATS</a><br>
<a href="{{ url_for('about_us') }}">ABOUT US</a><br>
<a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a><br>
<a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
<button class="hamburger" aria-label="Toggle menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<div class="nav-menu">
<a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
<a href="{{ url_for('about_us') }}">ABOUT US</a>
<a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
<a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
</div>
</nav>
</header>
<body>
<header>
</header>
<main>
<label for="weapon-search"></label>
<input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
@@ -112,9 +84,23 @@
<div id="modifiers"></div> <!-- Items and Perks go here -->
<div id="abilities"></div> <!-- Abilities go here -->
</div>
<script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
<script>
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
document.body.classList.toggle('menu-open');
});
navMenu.querySelectorAll('a').forEach(link =>
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
document.body.classList.remove('menu-open');
})
);
</script>
</main>
</body>
</html>