web-dev-qa-db-fra.com

Barre de navigation HTML/CSS sur plusieurs pages

Je viens de terminer la création de ma page home/index.html. Pour conserver la barre de navigation là où elle se trouve et la garder pendant que les utilisateurs cliquent sur toutes mes pages. Dois-je copier et coller le code de navigation en haut de chaque page? Ou y a-t-il une autre façon de faire qui aurait l'air 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>
htmlnavbar
45
blackRob4953

C'est ce qui m'a aidé. Ma barre de navigation est dans la balise body. Le code complet de la barre de navigation est dans le fichier nav.html (sans balise html ou body, seul le code de la barre de navigation). Dans la page cible, cela va dans la balise head:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Ensuite, dans la balise body, un conteneur est créé avec un identifiant 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-->
40
Ramtin

Je sais que la question est assez ancienne, mais lorsque JavaScript est disponible, vous pouvez utiliser jQuery et ses méthodes AJAX.

Commencez par créer une page avec tout le contenu HTML de la barre de navigation.

Ensuite, utilisez la méthode $.get de jQuery pour récupérer le contenu de la page. Par exemple, supposons que vous ayez mis tout le code HTML de la barre de navigation dans un fichier appelé navigation.html et ajouté une balise fictive (Like <div id="nav-placeholder">) dans votre index.html, puis vous utiliseriez le code suivant:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>
21
Jacques Marais

Vous pouvez utiliser php pour créer un site web de plusieurs pages.

  • Créez un fichier header.php dans lequel vous devriez mettre tout votre code HTML pour les menus, les réseaux sociaux, etc.
  • Insérez header.php dans votre index.php en utilisant le code suivant 

<? php include 'header.php'; ?> 

(Le code ci-dessus videra tout le code html avant cela) Le contenu du corps de votre site.

  • De même, vous pouvez facilement créer un pied de page et d’autres éléments. PHP intégré prend en charge le code HTML dans leurs extensions. Alors, mieux vaut apprendre cette solution facile.
2
Sachin Kanungo

Je ne sais pas si cela fonctionnera pour vous mais cela fonctionne pour moi. Essayez de placer les codes de navigation sans en-tête ni balise body (uniquement le code où la barre de navigation a commencé et s'est terminée). Ce qui va arriver, c'est que vous allez placer séparément les codes de la barre de navigation. Supposons que vous ayez déjà les codes de navigation sur navigation.html et que vous les incluiez dans une autre page, par exemple index.php. Pour l'inclure, placez-le dans la balise body et la barre de navigation y serait chargée.

0
qw12

Une technique très ancienne mais assez simple consiste à utiliser "Inclut Server-Side" , pour inclure des pages HTML dans une page de niveau supérieur portant l'extension .shtml. Par exemple, ce serait votre fichier index.shtml:

<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 nul, mais ça marche. N'oubliez pas d'activer le support SSI dans votre configuration de serveur HTTP ( voici comment procéder pour Apache ).

0
Laryx Decidua