Barre de Navigation HTML/CSS sur plusieurs pages
je viens de finir de faire mon home/index.la page html. Pour garder la barre de navigation où elle est, et la garder pendant que les utilisateurs cliquent à travers toutes mes pages. Dois-je copier et coller le code nav en haut de chaque page? Ou est-il une autre façon de faire qui serait plus propre?
HMTL nav:
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
6 réponses
C'est ce qui m'a aidé. Ma barre de navigation est dans l'étiquette corporelle. Le code entier de la barre de navigation est en nav.html fichier (sans balise html ou body, seulement le code pour la barre de navigation). Dans la page cible, cela va dans le head balise:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
puis dans l'étiquette de corps, un conteneur est fait avec un id unique et un bloc javascript pour charger le nav.html dans le conteneur, comme suit:
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
je sais que c'est une question assez ancienne, mais quand vous avez JavaScript disponible, vous pouvez utiliser jQuery et C'est des méthodes AJAX.
tout d'abord, créez une page avec tout le contenu HTML de la barre de navigation.
Suivant, utilisez jQuery $.get méthode pour récupérer le contenu de la page. Par exemple, disons que vous avez mis tout le HTML de la barre de navigation dans un fichier appelé navigation.html et ajouté une balise placeholder (comme <div id="nav-placeholder"> dans votre index.html, alors vous utiliserez le suivant code:
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
avec HTML5 vous pouvez utiliser l'étiquette d'importation ( en gardant à l'esprit son support limité de navigateur:plus de détails ici)
<head>
<link rel="import" href="/path/to/nav.html">
</head>
alors mettez votre nav dans le nav.html et importation d'elle partout où vous voulez l'utiliser. Il ya un bon article à ce sujet à L'équipe Treehouse si vous êtes intéressé.
Vous pouvez utiliser php pour faire le site Web multi-page.
- Créer un en-tête.php dans lequel vous devriez mettre tout votre code html pour les menus et les médias sociaux etc
- insérer l'en-tête.php dans votre index.php utilisant le code suivant
<?
php include 'header.php';
?>
(le code ci-dessus videra tout le code html avant ceci)le contenu du corps de votre site.
- de la même façon, vous pouvez créer le pied de page et d'autres éléments avec facilité. PHP supporte le code html intégré dans leurs extensions. Donc, mieux vaut apprendre cette solution facile.
Je ne sais pas si ça va marcher pour toi mais ça marche pour moi. Essayez de placer les codes de navigation sans en-tête ou étiquette de corps(juste le code où la barre de navigation a commencé et s'est terminée). Ce qui se passera, c'est que vous placerez séparément les codes pour la barre de navigation. Disons que vous avez déjà les codes de navigation sur la navigation.html et vous l'inclurez à une autre page, disons que ce serait index.php. Pour l'inclure place à l'intérieur de l'étiquette de corps et la barre de navigation serait chargé sur il.
une technique très ancienne mais assez simple est d'utiliser "Server-Side Includes", pour inclure des pages HTML dans une page de haut niveau qui a le .shtml extension. Par exemple, ce serait votre index.shtml fichier:
<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>
Oui, c'est boiteux, mais ça marche. N'oubliez pas d'activer le support SSI dans votre configuration de serveur HTTP (c'est comment faire pour Apache).