2017-07-02 333 views
-1

我有一個網站,我想用我的下拉菜單作爲網站中任何鏈接的單獨代碼。 http://www.stelianpopa.ro/photo/ancar.html 我在menu.html中使用我的菜單代碼,並基於此示例在網站上進行了集成:http://api.jquery.com/load/ 代碼已加載,但大多數時間下拉菜單不起作用,即使似乎已加載,它只顯示第一行,而不是「照片」和「視頻」的子菜單在HTML頁面中包含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

Yap,我不想使用iframe,因爲我的菜單使用一些css進行樣式設置,還有一些用於加載的java。 – 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'); 
}); 

這只是許多可用解決方案之一,它很容易,但絕對不是最好的。