2017-07-02 10 views
-1

私はウェブサイトを持っており、ウェブサイト内のリンクとは別のコードとしてドロップダウンメニューを使用したいと考えています。 http://www.stelianpopa.ro/photo/ancar.html 私はmenu.htmlで私のメニューのコードを使用し、この例に基づいてウェブサイトに統合しました:http://api.jquery.com/load/ コードはロードされていますが、ロードされているように見えても、最初の行だけを表示し、「写真」と「ビデオ」のサブメニューは表示しません。HTMLページをHTMLページに含める

何か助けてください。 基本的に私が望むのは、私のメニューを独立したファイルとして持ち、私のウェブサイト上のHTML上に参照としてロードすることです。なぜなら、メニューに何かを追加したいときは、私はスタンドアロンになりたい、すべてのhtmlのために一度修正する。 私の悪い英語のために申し訳ありません。

+0

最初にドロップダウンメニューがうまくいきません。 Chromeのステータスラインはサブメニューと重複します – mplungjan

答えて

0

まだメニューが表示されていない場合は、メニュー(ドロップダウン)を含むHTMLファイルを作成します。

次に、メニューを使用するすべてのページに、メニュー用に作成したhtmlファイルを指すiframeを含めます。例えば

Menu.html

<html> 
<head></head> 
<body> 

<!-- code for menu --> 

</body> 
</html> 

あなたはこれがあなたのために働く

<html> 
<head>...</head> 
<body> 

<!-- content --> 
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe> 

</body> 
</html> 

希望のメニューを使用したいすべてのページ。

+0

iframeを使用するよりも優れたオプションがあります。小さなスクリプトは簡単にページにメニューを挿入することができます – Clint

+0

私のメニューはスタイリングのためにいくつかのJavaを使用し、ロードするためにいくつかのJavaを使用するので、私はiframeを使いたくありません。 – user3236448

+0

iframeを使用したくない場合は、スクリプトを使用してメニューに(htmlとして)メニューを動的に追加することができます。 @Clintのように言った。 –

0

テンプレートなしでは、JavaScriptを使用してページにテンプレートを読み込むことができます。これは、コピー&ペーストを避けるためにのために私はミニプロジェクトを設定しますが、基本は、あなたがメニューをしたい体で

以下である:

<div id="my-nav-menu"></div> 

スクリプト:

document.addEventListener('DOMContentLoaded', function() { 
    var menu = document.getElementById('my-nav-menu'); 
    menu.innerHTML = 'menu html here'; 
}); 

私はjqueryのタグに気づい

更新し、あなたが代わりに次のスクリプトを使用することができます。

$(document).ready(function() { 
    $('#my-nav-menu').html('menu html here'); 
}); 

これは利用可能な多くのソリューションの1つで、簡単ですが間違いなく最適です。

関連する問題