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="color-scheme" content="light dark">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Alchemy Ingredient Selector</title>
|
<title>Alchemy Ingredient Selector</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<?php include 'nav.html'; ?>
|
<?php include 'nav.php'; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -8,6 +8,6 @@
|
|||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<?php include 'nav.html'; ?>
|
<?php include 'nav.php'; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 {
|
nav {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 1200px;
|
/*max-width: 1200px;*/
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 1rem;
|
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 */
|
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;
|
background-color: #04AA6D;
|
||||||
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
|
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