Làm cách nào để triển khai các menu Điều hướng HTML có thể sử dụng lại?

Question

Tôi chắc chắn rằng chủ đề này luôn luôn xuất hiện, nhưng dường như tôi không thể trả lời ngắn gọn. Tôi có một thanh menu dọc mà tôi muốn sử dụng lại trong các trang web của chúng tôi (> 20) cho trang web.
Thanh Menu được mã hóa bằng html (UL, LI, A), sử dụng thẻ Div và CSS để đạt được hiệu ứng mong muốn.

Chúng tôi muốn tìm cách tiếp cận đơn giản nhất để sử dụng lại thanh trình đơn trong tất cả các trang web trong khi vẫn có thể duy trì và mở rộng khi cần thiết, vì vậy chúng tôi không phải sửa đổi tất cả các trang mỗi lần chúng tôi thêm trang. Chúng tôi muốn tránh một cách tiếp cận mã hóa nếu có thể, có nghĩa là chúng ta có thể sống chỉ với một tệp chính mà chúng tôi chỉnh sửa khi cần thiết. Sine chúng tôi đang sử dụng CSS và DIV của tôi không hink khung là câu trả lời. Có suy nghĩ gì không?

Answer 1

Nếu bạn sử dụng PHP, tất cả những gì bạn phải làm là sử dụng lệnh include, không cần mã hóa ngoài lệnh này.
Ngoài ra, hãy xem server side includes

Answer 2

Để thực hiện việc này, bạn sẽ phải sử dụng một số công nghệ phụ của máy chủ. Ví dụ bạn có thể ...

• bao gồm chúng trong php

• đặt chúng trong trang chủ trong .net

• đặt điều này trong một phần hoặc một trang bố trí trong đường ray

Một số đọc:

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

Một giải pháp khác là tạo ra tất cả điều này sử dụng Javascript, nhưng xin đừng làm điều đó như thế :)

html:

<script type="text/javascript" src="hack.js"></script> 
<div id="mymenu"> 
</div> 

hack.js:

function createMenu(){ 
    $("#mymenu").html("all the html of your menu"); 
} 

Answer 3

Serv er bên bao gồm là cách để đi nếu bạn không muốn sử dụng một ngôn ngữ lập trình.

Họ lấy mẫu đơn này:

<!--#include virtual="menu.html" --> 

và sẽ được chèn vào trong trang bất cứ nơi nào bạn đặt thẻ trong HTML của bạn. Nó yêu cầu phân tích cú pháp phía máy chủ, do đó máy chủ web của bạn phải có phía máy chủ được bật. Bạn có thể dùng thử và nếu nó không hoạt động, hãy liên hệ với máy chủ lưu trữ của bạn để xem liệu bạn có thể kích hoạt chúng hay không. Nếu đó là Apache, cũng có method of enabling them thông qua các tệp .htaccess.

Answer 4

Cho đến nay, một trong những giải pháp tốt nhất mà tôi đã tìm thấy là mô hình hóa các menu sau khi giải pháp XHTML/CSS Son of Suckerfish được tài liệu khá tốt trên internet giờ đây kết hợp với một số logic trên máy chủ để hiển thị danh sách không theo thứ tự. Bằng cách sử dụng danh sách không theo thứ tự, bạn có một vài tùy chọn khác nhau về cách xuất kết quả, nhưng miễn là menu có một số cấu trúc phân cấp cơ bản, bạn có thể tạo ra nó. Sau đó, đối với trang thực tế, tất cả những gì bạn cần làm là bao gồm một tham chiếu đến chức năng tạo menu.

Answer 5

Tôi đã thực hiện hai cách riêng biệt này - một cách sử dụng phía máy chủ (PHP) và một sử dụng Javascript bao gồm (đối với các trình diễn cần có khả năng chạy mà không có kết nối internet hoặc khả năng máy chủ).

Đối với PHP, các trang của bạn sẽ phải kết thúc bằng .php chứ không phải là .htm hoặc .html và chúng rất lý tưởng để thay thế đầu trang, chân trang, điều hướng, v.v ... Mọi thứ được lặp lại trên nhiều trang. Về cơ bản bạn sẽ tạo mã bình thường của bạn sau đó sao chép và dán mã bạn muốn thoát ra - trong ví dụ này, điều hướng của bạn - và lưu nó trong một tệp khác gọi là (ví dụ) inc_navigation.htm (trang này có thể được gọi là .htm).

Sau đó, trong trang thực tế của bạn, bạn muốn sử dụng đoạn mã sau:

<?php include('inc_navigation.htm') ?> 

Điều đó sẽ chèn điều hướng của bạn tại thời điểm đó, nếu bạn đã có một sự thay đổi để làm cho bạn muốn làm cho nó đến tập tin .htm và nó sẽ lan truyền đến bất kỳ trang nào được bao gồm.

Đối với javascript bao gồm bạn sẽ phải bao gồm các dòng sau ở phía trên cùng của mỗi tài liệu mà bạn muốn bao gồm điều hướng của bạn:

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

Sau đó, bạn sẽ tạo ra một tài liệu gọi là includes.js.

Ở phía trên cùng của tài liệu này bạn sẽ khai báo biến điều hướng của bạn:

var navigation = new Array(); // This is for the navigation. 

Sau đó, một cách ít xuống ở chỗ cùng một tài liệu bạn cần phải thực sự phác thảo đang điều hướng của bạn (số dòng trong dấu ngoặc vuông rất quan trọng - giữ chúng theo thứ tự và bắt đầu bằng 0 - bạn không thể có ngắt dòng trong mã này để mỗi dòng mã phải là một dòng mới):

// ==================== Navigation ==================== // 
navigation[0] = '<div id="tab_navigation">'; 
navigation[1] = '<ul id="dropline">'; 
navigation[2] = '<li><a href="index.htm"><b>Home</b></a></li>'; 
navigation[3] = '<li><a href="about_us.htm"><b>About Us</b></a></li>'; 
navigation[4] = '</ul>'; 
navigation[5] = '</div><!-- Close TAB NAVIGATION -->'; 

Sau đó, một số cách sau đó bạn sẽ thực sự chèn javascript sẽ đưa mã đó vào trang của bạn e (nó không thực sự đặt nó ở đó nhưng thay vì làm cho nó có thể truy cập trong trang mà không thực sự thay đổi mã của trang .htm - vì vậy nếu bạn xem nguồn bạn sẽ thấy tham chiếu đến mã không phải là mã chính nó).

function show(i) 
{ 
    for (x in i) 
    { 
    document.write(i[x]+'\n') 
    } 
} 

Cuối cùng - trong tài liệu .htm của bạn, hãy nói cho trang index.htm của bạn, bạn sẽ thay thế mã điều hướng của bạn (mà bạn đặt trong khối ở trên gọi là chuyển hướng) với điều này:

<script type="text/javascript">show(navigation);</script> 

Trường hợp tên đó sau SHOW và trong dấu ngoặc đơn là tên của biến của bạn (được khai báo trước đó).

Tôi có các trang web hiển thị cả hai phương pháp được sử dụng nếu bạn muốn thấy chúng chỉ gửi cho tôi một tin nhắn.

Answer 6

Nếu không có bất kỳ tập lệnh hoặc đoạn mã phía máy chủ nào, bạn có thể sử dụng thẻ đối tượng hoặc iframe.

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

Điều duy nhất cần quan tâm là để chỉ target = "cha mẹ" trong các liên kết.

Hy vọng điều này sẽ giúp

Answer 7

Tôi đang đối mặt với cùng một điều. Sau đó, tôi đã tạo một tệp mới để lưu trữ html của thanh điều hướng.

Tôi đã tạo một tệp navbar.html có tất cả mã vạch điều hướng của tôi. Sau đó, trong tệp html chính của bạn nơi bạn muốn thanh điều hướng, chỉ cần bao gồm tệp này bằng cách sử dụng jquery.

$(document).ready(function() { 
    $('#navigation').load('navbar.html'); 
}); 

Sau đó, tại nơi bạn muốn thanh điều hướng, chỉ cần thêm dòng này:

<div id="navigation"></div> 

Answer 8

Như một câu trả lời hiện đại cho một câu hỏi cũ sáu năm: Web Components là những thành phần HTML đặc biệt tái sử dụng, và Polymer là có thể là triển khai phổ biến nhất của nó vào lúc này. Hiện tại hầu như không có trình duyệt nào có hỗ trợ gốc cho Cấu phần Web, do đó ít nhất phải có một vùng chèn Javascript.

Answer 9

Sử dụng một kịch bản w3 ..

index.html

<!DOCTYPE html> 
<html> 
<script src="http://www.w3schools.com/lib/w3data.js"></script> 

<body> 

<div w3-include-html="header.html"></div> 
<div w3-include-html="nav.html"></div> 

<script> 
w3IncludeHTML(); 
</script> 

</body> 
</html> 

header.html

<h1>Title</h1> 

nav.html

<h2>Your nav</h2> 

Xem thêm: http://www.w3schools.com/howto/howto_html_include.asp

Và đừng quên kiểm tra mã này trên máy chủ cục bộ của bạn.