web-dev-qa-db-ja.com

複数ページのHTML / CSSナビゲーションバー

Home/index.htmlページの作成が完了しました。ナビゲーションバーを現在の場所に保持し、ユーザーがすべてのページをクリックする間、ナビゲーションバーを維持します。 navコードをコピーして各ページの上部に貼り付ける必要がありますか？それとも、よりきれいに見える別の方法がありますか？

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
50
blackRob4953

これは私を助けたものです。ナビゲーションバーはbodyタグにあります。ナビゲーションバーのコード全体はnav.htmlファイルにあります（htmlまたはbodyタグなし、ナビゲーションバーのコードのみ）。ターゲットページでは、これはheadタグに含まれます。

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

次に、bodyタグで、次のようにnav.htmlをコンテナにロードするための一意のIDとjavascriptブロックでコンテナが作成されます。

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
46
Ramtin

これは非常に古い質問ですが、JavaScriptを使用できる場合はjQueryを使用でき、AJAXメソッドです。

最初に、ナビゲーションバーのすべてのHTMLコンテンツを含むページを作成します。

次に、jQueryの$.getメソッドを使用して、ページのコンテンツを取得します。たとえば、ナビゲーションバーのすべてのHTMLをnavigation.htmlというファイルに配置し、<div id="nav-placeholder">にプレースホルダータグ（index.htmlのように）を追加した場合、次のコードを使用します。

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

Phpを使用して、複数ページのWebサイトを作成できます。

  • メニューやソーシャルメディアなどのすべてのhtmlコードを配置するheader.phpを作成します
  • 次のコードを使用して、index.phpにheader.phpを挿入します

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

（上記のコードは、これより前にすべてのhtmlコードをダンプします）サイトの本文コンテンツ。

  • 同様に、フッターなどの要素を簡単に作成できます。 PHP組み込みの拡張機能でhtmlコードをサポートします。そのため、この簡単な修正方法をよく学んでください。
2
Sachin Kanungo

それがあなたのために働くかどうかはわかりませんが、私にとってはうまくいきます。ヘッダーや本文タグなしでナビゲーションコードを配置してみてください（ナビゲーションバーが開始および終了したコードのみ）。ナビゲーションバーのコードを個別に配置することになります。すでにnavigation.htmlにナビゲーションコードがあり、それを他のページに含めるとしましょう。これはindex.phpになります。それを含めるには、bodyタグ内に配置し、ナビゲーションバーをその上にロードします。

0
qw12

非常に古くても簡単なテクニックは、 "Server-Side Includes" を使用して、HTMLページを.shtml拡張子を持つトップレベルページに含めることです。たとえば、これは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>

はい、それはラメですが、動作します。 HTTPサーバー構成でSSIサポートを有効にすることを忘れないでください（ これはApacheでの方法です ）。

0
Laryx Decidua