2017-01-16 13 views
2

私は多くのhtmlページを持っています。 HTML5とCSSのみを使用してナビゲーションメニューを1か所に保存/管理することは可能でしょうか?これは、すべてのナビゲーションコードが1つのファイルにあることを意味するので、メニューが変更されたときにすべてのページでコードを編集する必要はありません。1つだけのナビゲーションバーコードページで多くのHTML5ページを使用するにはどうすればHTMLとCSSだけを使用できますか?

おかげで、 ダグラス

+0

あなたが(i)フレームを使用していて、それはあなたがしたくないものです。他のファイルにファイルを含めることができるエディタを使用する(保存時にファイル全体が作成されるようにする)か、またはこれを動的に実行できるサーバー側の方法を使用します。 – CBroe

+1

あなたは条件付きスタイルや、要素のステータス(:focus、:checkedなど)に基づいたCSS宣言をトリックできるはずです。TabPanel要素のように複数のビューを用意して、条件付きCSSこれを解決できるかもしれません。 – Sebas

+0

あなたが必要とするものがメンテナンスの増加である場合、ナビゲーションパネルのHTMLコードをページの外に保存し、それを必要なすべてのページに含めるだけです。 – Sebas

答えて

2

はい、できます。 target="content"は、IFRAMEのリンクを変更する必要があります追加のすべてのメニュー項目より

<iframe src="menu.html"></iframe> 
<iframe src="content.html" name="content"></iframe> 

:初期の1990年に、人々はのiFrameを使用していました。

+0

私はあなたがフレームを意味すると思うiframeではなく(私は "1990年初めに" ...)しかし、人々は良い理由のためにそれをやって停止しました。 – Johannes

+0

私はまだそれらが使用中であることを覚えています、1990年代半ばまで... –

+0

残念ながら "iframe"は今日まで使用されています。 – DomeTune

0

ウェブサーバーの機能を調べます。例えば、Apache's SSI。これは、他の人が指摘しているように、回避するのが最善の方法です。サーバー側のインクルードは、ほぼそのままのHTMLです。

0

あなたは

<iframe src="Header.html"></iframe> 
<iframe src="restOfThePage.html" name="content"></iframe> 

のようにそうするように、アイフレームを使用することができますが、これはそうするための最良の方法はありませんが、これはウェブサイトが日中に戻って建設された方法です。コードの再利用について考えているので、ハンドルバーのようなテンプレートエンジンやAngularのような完全なMVCフレームワークの使用を検討する必要があります。それはあなたに多くのこれらの種類のアプリケーションを構築するのに役立ちますが、それはあなたの履歴書にもいいです。

0

HTMLとCSSだけを使ってこれには良い解決策はありません。

しかし、Jekyll,Hexo、またはHugoのような静的ページジェネレータを使用できます。それらを使用して、すべてのページに含めるナビゲーションを指定し、それに応じてHTML/CSSファイルを生成することができます。

0

iframeを使用して目標を達成できます。

index.htmlファイルにナビゲーションメニューがあり、そのページにはiframeがあります。ナビゲーションメニュー内のすべてのリンクはpages(IFRAMEの名前)の値を持つtarget属性を持っている必要があり

<iframe name="pages" src="main.html"><iframe>

例えば:

<a href="page1.html" target="pages">page 1</a> <a href="page2.html" target="pages">page 2</a>

iframe

はそうのような name属性を持つ必要があります

このように、リンクはiframeで開き、親ページでは開かないので、nアビエーションメニューはまだそこにあります。

0

ちょうど別の方法での予測は、ツールを使用せずにナビゲーションを構築します。 "HTMLのみ"です。あなたは使用することができます。 navigation.js:

document.write('<div id="navigation">') 
document.write('<div class="navItem">Enter your HTML (HREF)...</div>') 
document.write('</div>') 

は、あなたはjavascriptファイルとして保存する必要があります。その後、すべてのHTMLにそれを含めることができます:

<script type="text/javascript" src="../src/includes/navigation.js"></script> 

多分役立ちます。

関連する問題