All pages now php. nav now can use show which page is active.
This commit is contained in:
@@ -5,8 +5,9 @@
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alchemy Ingredient Selector</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<?php include 'nav.html'; ?>
|
||||
<?php include 'nav.php'; ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,6 +8,6 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<?php include 'nav.html'; ?>
|
||||
<?php include 'nav.php'; ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<header class="site-header">
|
||||
<nav class="navbar" aria-label="Profession Navigation">
|
||||
<ul class="navbar__list">
|
||||
<li class="navbar__item">
|
||||
<a href="index.php" class="navbar__link">
|
||||
<img src="img/logo.png" alt="Company Name Home" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="alchemyIngredientPage.php" class="navbar__link">
|
||||
<img src="img/alchemy.png" alt="Alchemy" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="Blacksmithing.png" alt="Blacksmithing" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="Engineering.png" alt="Engineering" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="Jewelcrafting.png" alt="Jewelcrafting" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="Leatherworking.png" alt="Leatherworking" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="Tailoring.png" alt="Tailoring" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
$current = basename($_SERVER['PHP_SELF']);
|
||||
$menu_items = [
|
||||
'index.php' => ['Home', 'logo.png'],
|
||||
'alchemyIngredientPage.php' => ['Alchemy', 'alchemy.png'],
|
||||
'blacksmithing.php' => ['Blacksmithing', 'blacksmithing.png'],
|
||||
'engineering.php' => ['Engineering', 'engineering.png'],
|
||||
'jewelcrafting.php' => ['Jewelcrafting', 'jewelcrafting.png'],
|
||||
'leatherworking.php' => ['Leatherworking', 'leatherworking.png'],
|
||||
'tailoring.php' => ['Tailoring', 'tailoring.png'],
|
||||
];
|
||||
?>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="navbar" aria-label="Profession Navigation">
|
||||
<ul class="navbar__list">
|
||||
<?php foreach ($menu_items as $file => $info): ?>
|
||||
<?php
|
||||
$is_active = ($current === $file) ? ' navbar__link--active' : '';
|
||||
?>
|
||||
<li class="navbar__item">
|
||||
<a href="<?= $file ?>" class="navbar__link<?= $is_active ?>">
|
||||
<img src="img/<?= $info[1] ?>" alt="<?= $info[0] ?>" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<!--<li class="navbar__item">
|
||||
<a href="index.php" class="navbar__link">
|
||||
<img src="img/logo.png" alt="Company Name Home" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="alchemyIngredientPage.php" class="navbar__link">
|
||||
<img src="img/alchemy.png" alt="Alchemy" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="img/blacksmithing.png" alt="Blacksmithing" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="img/engineering.png" alt="Engineering" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="img/jewelcrafting.png" alt="Jewelcrafting" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="img/leatherworking.png" alt="Leatherworking" class="navbar__icon">
|
||||
</a>
|
||||
</li>
|
||||
<li class="navbar__item">
|
||||
<a href="" class="navbar__link">
|
||||
<img src="img/tailoring.png" alt="Tailoring" class="navbar__icon">
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
+2
-14
@@ -14,7 +14,7 @@
|
||||
|
||||
nav {
|
||||
height: 100%;
|
||||
max-width: 1200px;
|
||||
/*max-width: 1200px;*/
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@@ -45,19 +45,7 @@ nav {
|
||||
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
|
||||
}
|
||||
|
||||
.navbar__link:active .navbar__icon {
|
||||
.navbar__link--active .navbar__icon {
|
||||
background-color: #04AA6D;
|
||||
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
|
||||
}
|
||||
|
||||
ul li a {
|
||||
display: block;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
object-fit: contain;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
ul li a.active {
|
||||
background-color: #04AA6D;
|
||||
}
|
||||
Reference in New Issue
Block a user