Menu moderne bootstrap

Eléphant du PHP | 194 Messages

14 avr. 2024, 11:53

Bonjour à tous,

Je recherche un menu bootstrap 5 moderne facile a mettre en place.
Dans mon head j'ai mise ceci :
<link rel="stylesheet" href="/../Utiles/CSS/bootstrap.min.css">
et en bas de page :
<script src="/../Utiles/JS/bootstrap.min.js"></script>
<script src="/../Utiles/JS/bootstrap.bundle.min.js"></script>
<script src="/../Utiles/JS/jquery360min.js"></script>
je souhaiterais un menu moderne avec logo titre du site et menu avec multi niveau

Le soucis c'est quand je fais le menu, et que je change de page, le menu la couleur ne change pas j'aurai voulu que dans la page ou je me trouve le liens reste en blanc ou que je sache ou je me trouve simplement en regardant le menu.

voici mon menu :
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
<div class="container-fluid d-flex align-items-center justify-content-between">
<a class="navbar-brand" href="/Controleurs/index-ctrl.php">
<img src="/Utiles/Images/logoIcon.png" alt="Logo" class="d-inline-block align-middle logo logo-small" width="30" height="30">
<span class="d-inline-block align-middle d-lg-inline d-none styleTitreSiteMenu">Easykode</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse texteMenu" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="/Controleurs/index-ctrl.php">Accueil <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Controleurs/test-ctrl.php">test</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a id="themeLink" class="nav-link dropdown-toggle" href="#" role="button" id="themeDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Thème
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li><a class="dropdown-item" href="#" onclick="setTheme('light')"> Clair</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('dark')"> Sombre</a></li>
<li><a class="dropdown-item" href="#" onclick="setTheme('auto')"> Auto</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
Merci par avance pour votre retour.
Bon dimanche.
@+ Filou80

Avatar du membre
Mammouth du PHP | 1500 Messages

15 avr. 2024, 01:01

Il te faut utiliser des include, inclus tes thèmes pour ne pas avoir à les recopier dans toutes tes pages.

PAGE INDEX :
<?php
//inclusion de la partie head de ta page, de <!DOCTYPE html> à <body>
include 'theme/header.php';
?>
Ton contenu
<?php
//inclusion de la partie footer de ta page, tout ce que tu doit inclure comme JS et autre
include 'theme/footer.php';
?>
AUTRE PAGE :
<?php
//inclusion de la partie head de ta page, de <!DOCTYPE html> à <body>
include 'theme/header.php';
?>
Ton contenu
<?php
//inclusion de la partie footer de ta page, tout ce que tu doit inclure comme JS et autre
include 'theme/footer.php';
?>
ETC...

Mammouth du PHP | 558 Messages

27 oct. 2024, 16:34

Bonjoue, Dites-moi si je me trompe mais télécharger une bibliothèque complète juste pour un menu cela me paraît énorme. En quelques lignes de code on arrive à faire pareil ?
Quelqu'un pourrait m'expliquer l'intérêt d'alourdir autant une page Web, d'autant plus que une fois coder il suffit de faire un copier coller et de l'adapter ? Merci.

Avatar du membre
Mammouth du PHP | 1500 Messages

27 oct. 2024, 21:38

Oui, après, s'il veut du Bootstrap, c'est son choix.