Wie können wiederverwendbare HTML-Navigationsmenüs implementiert werden?

8

Ich bin mir sicher, dass dieses Thema die ganze Zeit auftaucht, aber ich kann keine knappe Antwort gebrauchen. Ich habe eine vertikale Menüleiste, die ich in unseren Webseiten (& gt; 20) für die Site wiederverwenden möchte.
Die Menüleiste ist in HTML (UL, LI, A) codiert, verwendet Div-Tags und CSS, um die gewünschten Effekte zu erzielen.

Wir möchten den einfachsten Weg finden, die Menüleiste in allen Webseiten wiederzuverwenden, während wir in der Lage sind, sie nach Bedarf zu verwalten und zu skalieren, sodass wir nicht jedes Mal, wenn wir eine Seite hinzufügen, alle Seiten ändern müssen. Wir würden, wenn möglich, lieber einen Codierungsansatz vermeiden, was bedeutet, dass wir mit nur einer Masterdatei leben könnten, die wir nach Bedarf bearbeiten. Sinus wir verwenden CSS und DIV's Ich bin nicht Frames sind die Antwort. Irgendwelche Gedanken?

    
marcgg 04.08.2009, 19:06
quelle

9 Antworten

8
___ answer7582079 ___

Ohne serverseitiges Skript oder Javascript können Sie Objekt- oder iframe-Tags verwenden.

Ссылка

Ссылка

Es ist nur wichtig, target="parent" in Links anzugeben.

Hoffe es hilft

    
___ answer1229352 ___

Um dies zu tun, müssen Sie einige serverseitige Technologie verwenden. Zum Beispiel könnten Sie ...

  • schließe sie in PHP ein

  • legen Sie sie auf der Masterseite in .net

  • ab
  • fügen Sie dies in eine partielle oder Layout-Seite in Rails ein

Einige lesen:

Ссылка

Ссылка

Eine andere Lösung wäre, all das mit Javascript zu erstellen, aber bitte tu es nicht so:

html:

%Vor%

hack.js:

%Vor%     
___ answer25479012 ___

Ich stand vor der gleichen Sache. Dann habe ich eine neue Datei zum Speichern der HTML der Navigationsleiste erstellt.

Ich habe eine Datei navbar.html erstellt, die den gesamten Navigationsbarcode enthält. Dann fügen Sie diese Datei in Ihrer Haupt-HTML-Datei, in der Sie die Navigationsleiste sehen möchten, einfach mit jquery ein.

%Vor%

Fügen Sie an der Stelle, an der Sie die Navigationsleiste sehen möchten, einfach folgende Zeile hinzu:

%Vor%     
___ qstntxt ___

Ich bin mir sicher, dass dieses Thema die ganze Zeit auftaucht, aber ich kann keine knappe Antwort gebrauchen. Ich habe eine vertikale Menüleiste, die ich in unseren Webseiten (& gt; 20) für die Site wiederverwenden möchte.
Die Menüleiste ist in HTML (UL, LI, A) codiert, verwendet Div-Tags und CSS, um die gewünschten Effekte zu erzielen.

Wir möchten den einfachsten Weg finden, die Menüleiste in allen Webseiten wiederzuverwenden, während wir in der Lage sind, sie nach Bedarf zu verwalten und zu skalieren, sodass wir nicht jedes Mal, wenn wir eine Seite hinzufügen, alle Seiten ändern müssen. Wir würden, wenn möglich, lieber einen Codierungsansatz vermeiden, was bedeutet, dass wir mit nur einer Masterdatei leben könnten, die wir nach Bedarf bearbeiten. Sinus wir verwenden CSS und DIV's Ich bin nicht Frames sind die Antwort. Irgendwelche Gedanken?

    
___ answer41171725 ___

Verwenden eines w3-Skripts ..

index.html

%Vor%

header.html

%Vor%

nav.html

%Vor%

Siehe auch: Ссылка

Und vergiss nicht, diesen Code auf deinem localhost zu testen.

    
___ qstnhdr ___ Wie können wiederverwendbare HTML-Navigationsmenüs implementiert werden? ___ answer1229347 ___

Wenn Sie PHP verwenden würden, müssen Sie nur den Befehl %code% verwenden, keine Codierung über diesen einen Befehl hinaus.
Sehen Sie sich auch die Serverseite

an     
___ antwort1229368 ___

Server-seitige Includes sind der Weg zu gehen, wenn Sie keine Programmiersprache verwenden möchten.

Sie nehmen diese Form an:

%Vor%

und wird in die Seite eingefügt, wo immer Sie dieses Tag in Ihren HTML-Code einfügen. Es erfordert serverseitiges Parsen, sodass auf Ihrem Webserver serverseitige Includes aktiviert sein müssen. Sie können es ausprobieren, und wenn es nicht funktioniert, kontaktieren Sie Ihren Server-Host, um zu sehen, ob Sie sie aktivieren können. Wenn es sich um Apache handelt, gibt es eine Methode, sie auch über .htaccess-Dateien zu aktivieren .

>     
___ answer32481388 ___

Als moderne Antwort auf eine sechs Jahre alte Frage: Web-Komponenten sind speziell wiederverwendbare HTML-Komponenten und Polymer ist derzeit wahrscheinlich die populärste Umsetzung. Derzeit hat praktisch kein Browser native Unterstützung für Web Components, so dass zumindest ein Javascript-Polyfill benötigt wird.

    
___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ tag123html ___ HTML (Hyper Text Markup Language) ist die Standard-Auszeichnungssprache, die zum Strukturieren von Webseiten und zum Formatieren von Inhalt verwendet wird. HTML beschreibt die Struktur einer Website semantisch zusammen mit Hinweisen für die Präsentation, wodurch sie eine Markup-Sprache statt einer Programmiersprache wird. Die neueste Revision der HTML-Spezifikation ist HTML5.2. ___ answer1229369 ___

Bisher war eine der besten Lösungen, die ich gefunden habe, die Menüs nach dem Sohn von Suckerfish zu modellieren XHTML / CSS-Lösung, die im Internet ziemlich gut dokumentiert ist, kombiniert mit einer Logik auf dem Server, um die ungeordnete Liste zu rendern. Wenn Sie ungeordnete Listen verwenden, haben Sie verschiedene Möglichkeiten, wie Sie die Ergebnisse ausgeben können. Solange das Menü jedoch eine grundlegende Hierarchie hat, können Sie es generieren. Dann müssen Sie für die aktuelle Seite nur einen Verweis auf die Menügenerierungsfunktion hinzufügen.

    
___ answer1234418 ___

Ich habe diese zwei getrennten Wege gemacht - eine mit Server-Seite (PHP) und eine mit Javascript-Includes (für Demos, die ohne Internetverbindung oder Server-Fähigkeiten laufen müssen).

Bei PHP-Includes müssen Ihre Seiten mit .php anstatt mit .htm oder .html enden, und diese sind sehr ideal, um Ihre Kopfzeile, Fußzeile, Navigation usw. zu ersetzen. Alles, was auf mehreren Seiten wiederholt wird.

>

Im Grunde würden Sie Ihren normalen Code erstellen, dann kopieren Sie den Code, den Sie ausbrechen möchten - in diesem Beispiel Ihre Navigation - und speichern Sie ihn in einer anderen Datei namens (zB) inc_navigation.htm (Diese Seite kann aufgerufen werden. htm).

Dann würden Sie in Ihren tatsächlichen Seiten den folgenden Code verwenden:

%Vor%

Das würde Ihre Navigation zu diesem Zeitpunkt einfügen, wenn Sie eine Änderung vornehmen müssten, damit Sie die Datei in die .htm-Datei aufnehmen und sie auf jede Seite mit der enthaltenen Datei übertragen würde.

Für Javascript-Includes müssen Sie die folgende Zeile am Anfang jedes Dokuments einfügen, in das Sie Ihre Navigation einfügen möchten:

%Vor%

Dann erstellen Sie ein Dokument namens includes.js.

Am Anfang dieses Dokuments deklarieren Sie Ihre Navigationsvariable:

%Vor%

Dann ein wenig nach unten in diesem Dokument müssen Sie Ihren Navigationscode tatsächlich umreißen (die Zeilennummern in den eckigen Klammern sind entscheidend - halten Sie sie in der Reihenfolge und beginnen mit 0 - Sie können keine Zeilenumbrüche in diesem Code also alle haben Codezeile muss eine neue Zeile sein):

%Vor%

Dann fügen Sie ein wenig später das Javascript ein, das diesen Code in Ihre Seite einfügt (es wird nicht wirklich dort eingefügt, sondern in der Seite zugänglich gemacht, ohne den Code der .htm zu ändern Seite - wenn Sie die Quelle anzeigen, sehen Sie den Verweis auf den Code und nicht den Code selbst.

%Vor%

Schließlich - in Ihrem .htm-Dokument, sagen Sie für Ihre index.htm-Seite, ersetzen Sie Ihren Navigationscode (den Sie in den obigen Block namens Navigation setzen) mit diesem:

%Vor%

Wo dieser Name nach SHOW und in der Klammer der Name Ihrer Variablen ist (früher erklärt).

Ich habe Websites, auf denen beide Methoden angezeigt werden. Wenn Sie sie sehen möchten, senden Sie mir einfach eine Nachricht.

    
___ tag123menu ___ Ein Menü ist ein Benutzerschnittstellenmechanismus, der dem Benutzer die Möglichkeit bietet, Anwendungsvorgänge anzuzeigen und auszuführen. (Generisch; bitte verwenden Sie stattdessen Plattform- und / oder Sprachtags, wenn möglich) ___
zombat 04.08.2009 19:13
quelle
2

Um dies zu tun, müssen Sie einige serverseitige Technologie verwenden. Zum Beispiel könnten Sie ...

  • schließe sie in PHP ein

  • legen Sie sie auf der Masterseite in .net

  • ab
  • fügen Sie dies in eine partielle oder Layout-Seite in Rails ein

Einige lesen:

Ссылка

Ссылка

Eine andere Lösung wäre, all das mit Javascript zu erstellen, aber bitte tu es nicht so:

html:

%Vor%

hack.js:

%Vor%     
marcgg 04.08.2009 19:11
quelle
2

Ohne serverseitiges Skript oder Javascript können Sie Objekt- oder iframe-Tags verwenden.

Ссылка

Ссылка

Es ist nur wichtig, target="parent" in Links anzugeben.

Hoffe es hilft

    
Filippo Mazza 28.09.2011 10:51
quelle
1

Ich stand vor der gleichen Sache. Dann habe ich eine neue Datei zum Speichern der HTML der Navigationsleiste erstellt.

Ich habe eine Datei navbar.html erstellt, die den gesamten Navigationsbarcode enthält. Dann fügen Sie diese Datei in Ihrer Haupt-HTML-Datei, in der Sie die Navigationsleiste sehen möchten, einfach mit jquery ein.

%Vor%

Fügen Sie an der Stelle, an der Sie die Navigationsleiste sehen möchten, einfach folgende Zeile hinzu:

%Vor%     
Abhinav Aggarwal 25.08.2014 04:24
quelle
1

Als moderne Antwort auf eine sechs Jahre alte Frage: Web-Komponenten sind speziell wiederverwendbare HTML-Komponenten und Polymer ist derzeit wahrscheinlich die populärste Umsetzung. Derzeit hat praktisch kein Browser native Unterstützung für Web Components, so dass zumindest ein Javascript-Polyfill benötigt wird.

    
deceze 09.09.2015 13:49
quelle
1

Verwenden eines w3-Skripts ..

index.html

%Vor%

header.html

%Vor%

nav.html

%Vor%

Siehe auch: Ссылка

Und vergiss nicht, diesen Code auf deinem localhost zu testen.

    
Martin Pfeffer 15.12.2016 19:16
quelle
0

Wenn Sie PHP verwenden würden, müssen Sie nur den Befehl include verwenden, keine Codierung über diesen einen Befehl hinaus.
Sehen Sie sich auch die Serverseite

an     
Itay Moav -Malimovka 04.08.2009 19:09
quelle
0

Bisher war eine der besten Lösungen, die ich gefunden habe, die Menüs nach dem Sohn von Suckerfish zu modellieren XHTML / CSS-Lösung, die im Internet ziemlich gut dokumentiert ist, kombiniert mit einer Logik auf dem Server, um die ungeordnete Liste zu rendern. Wenn Sie ungeordnete Listen verwenden, haben Sie verschiedene Möglichkeiten, wie Sie die Ergebnisse ausgeben können. Solange das Menü jedoch eine grundlegende Hierarchie hat, können Sie es generieren. Dann müssen Sie für die aktuelle Seite nur einen Verweis auf die Menügenerierungsfunktion hinzufügen.

    
rjzii 04.08.2009 19:13
quelle
0

Ich habe diese zwei getrennten Wege gemacht - eine mit Server-Seite (PHP) und eine mit Javascript-Includes (für Demos, die ohne Internetverbindung oder Server-Fähigkeiten laufen müssen).

Bei PHP-Includes müssen Ihre Seiten mit .php anstatt mit .htm oder .html enden, und diese sind sehr ideal, um Ihre Kopfzeile, Fußzeile, Navigation usw. zu ersetzen. Alles, was auf mehreren Seiten wiederholt wird.

>

Im Grunde würden Sie Ihren normalen Code erstellen, dann kopieren Sie den Code, den Sie ausbrechen möchten - in diesem Beispiel Ihre Navigation - und speichern Sie ihn in einer anderen Datei namens (zB) inc_navigation.htm (Diese Seite kann aufgerufen werden. htm).

Dann würden Sie in Ihren tatsächlichen Seiten den folgenden Code verwenden:

%Vor%

Das würde Ihre Navigation zu diesem Zeitpunkt einfügen, wenn Sie eine Änderung vornehmen müssten, damit Sie die Datei in die .htm-Datei aufnehmen und sie auf jede Seite mit der enthaltenen Datei übertragen würde.

Für Javascript-Includes müssen Sie die folgende Zeile am Anfang jedes Dokuments einfügen, in das Sie Ihre Navigation einfügen möchten:

%Vor%

Dann erstellen Sie ein Dokument namens includes.js.

Am Anfang dieses Dokuments deklarieren Sie Ihre Navigationsvariable:

%Vor%

Dann ein wenig nach unten in diesem Dokument müssen Sie Ihren Navigationscode tatsächlich umreißen (die Zeilennummern in den eckigen Klammern sind entscheidend - halten Sie sie in der Reihenfolge und beginnen mit 0 - Sie können keine Zeilenumbrüche in diesem Code also alle haben Codezeile muss eine neue Zeile sein):

%Vor%

Dann fügen Sie ein wenig später das Javascript ein, das diesen Code in Ihre Seite einfügt (es wird nicht wirklich dort eingefügt, sondern in der Seite zugänglich gemacht, ohne den Code der .htm zu ändern Seite - wenn Sie die Quelle anzeigen, sehen Sie den Verweis auf den Code und nicht den Code selbst.

%Vor%

Schließlich - in Ihrem .htm-Dokument, sagen Sie für Ihre index.htm-Seite, ersetzen Sie Ihren Navigationscode (den Sie in den obigen Block namens Navigation setzen) mit diesem:

%Vor%

Wo dieser Name nach SHOW und in der Klammer der Name Ihrer Variablen ist (früher erklärt).

Ich habe Websites, auf denen beide Methoden angezeigt werden. Wenn Sie sie sehen möchten, senden Sie mir einfach eine Nachricht.

    
Elle 05.08.2009 16:46
quelle

Tags und Links