Wie man eine Website mit Untermenü Software bauen

November 17

Wie man eine Website mit Untermenü Software bauen

Aufbau einer Webmenü ist einfach und erfordert nur minimale Programmierkenntnisse. Dies ist möglich dank der Bemühungen von Menschen, die ihre Lösungen in Artikeln und freie Softwarepakete geteilt haben. Es gibt viele Optionen zur Verfügung, in der Regel unter Berufung auf standardmäßigen Text-basierten Web HTML (Hypertext Markup Language), CSS (cascading Stylesheets), Markup und Styling.

Anweisungen

Bauen Sie Ihr Menüs und Untermenüs

1 Erstellen Sie eine HTML-Seite für Ihre Inhalte. Zu diesem Zweck erstellen eine einfache Textseite mit der Erweiterung .html bietet die Grundstruktur für ein Dokument mit HTML-Markup:

< html >

&lt;head>

&lt;/head>

&lt;body>

&lt;body>

< html >

2 Schreiben Sie eine Gliederung für Ihre Website-Inhalte. Starten Sie durch die Auflistung der Hauptabschnitte, die auf der ersten Ebene der Site-Navigations-Menü angezeigt wird. Dann für jedes der Elemente in der Hauptliste, erstellen Sie ein Untermenü mit den Schwerpunkten, die unter ihm erscheinen. Sie können diesen Prozess für so viele Ebenen nach Belieben weiter.

3 Erstellen Sie ein Listenelement, für jeden Begriff, der in der Gliederung angezeigt wird. Zu diesem Zweck setzen HTML List-Element-Tags (< li >) um die Worte, die der Benutzer auswählen kann. Beispielsweise "< li > über uns </li >" erstellt ein Menüelement.

4 Fügen Sie Ihr Hauptmenü in den Hauptteil Ihres html-Dokuments mithilfe einer ungeordneten Liste (< Ul >) mit einem Id-Attribut, das angibt, dass der eingeschlossene Inhalt ist als Menü dargestellt werden.

< html >

&lt;head>

&lt;/head>

&lt;body>

&lt;ul id="nav">

&lt;/ul>

&lt;body>

< html >

5 Platzieren Sie die Listenelemente für Ihr Hauptmenü zwischen seinen Ul-Tags:

< Ul Id = "Nav" >

&lt;li>Home&lt;/li>

&lt;li>Articles&lt;/li>

&lt;li>Blog&lt;/li>

&lt;li>Photos&lt;/li>

&lt;li>About Us&lt;/li>

</ul >

6 Erstellen Sie Listen für jedes Untermenü als HTML ungeordnete Listen (< Ul >) und platzieren Sie die entsprechende Listenelemente innerhalb jeder. Beispielsweise ist das Untermenü für einen typischen "Über uns"-Abschnitt:

< Ul >

&lt;li>Our People&lt;/li>

&lt;li>Our History&lt;/li>

&lt;li>Contact Us&lt;/li>

</ul >

7 Fügen Sie die Links zu Ihrem Menüsystem indem man HTML-Anker-Tags (< a >) um die Wörter in der Liste Element-Tags. Sie angeben "#" (aktuelle Seite) als die URL zu besuchen, klickt der Benutzer. So wird z. B. das Markup für Ihren Artikel "Über uns": "< li >< a Href ="#"> über uns </a >< / li >." Der Link zu der aktuellen Seite werden keine sichtbare Aktion ohne weitere Codierungsaufwand produzieren.

8 Erstellen Sie die Menüs und Untermenüs Beziehungen, indem man die Untermenü-Listen innerhalb des Anker-Tags für die entsprechenden übergeordneten Begriffe. Dies gibt die Untermenü-Auswahlmöglichkeiten angezeigt, wenn der Link angeklickt wird. Folgendes gibt z. B. die Seiten, die Informationen "über uns:"

&lt;li>&lt;a href="#">About Us

&lt;ul>

&lt;li>&lt;a href="#">Our People&lt;/a>&lt;/li>

&lt;li>&lt;a href="#">Our History&lt;/a>&lt;/li>

&lt;li>&lt;a href="#">Contact Us&lt;/a>&lt;/li>

&lt;/ul>

&lt;/a>&lt;/li>

Style im Dropdown-Menü

9 Erstellen Sie eine kaskadierende Stil Stylesheet (CSS) Seite, um die Darstellung des Menüs angeben. Zu diesem Zweck erstellen eine einfache Textseite mit Erweiterung "CSS", zum Beispiel "menu.css". Schließen Sie das Stylesheet in Ihrem HTML-Dokument durch Einfügen einer Link-Tag im Head des Dokuments ein:

&lt;head>

&lt;link href="menu.css" rel="stylesheet" type="text/css">

&lt;/head>10

Geben Sie die Formatvorlagen für das Hauptmenü (#nav) und alle Untermenüs (Ul) in es eingeschlossen. Folgenden Einstellungen werden die Listenelemente innerhalb des Menüs verwendet Standard-Polsterung, Ränder und Styling entziehen. Dadurch entsteht ein Neuanfang für Ihre gewählten Menüstil anwenden.

NAV, #nav Ul {} padding: 0;

margin: 0;

list-style: none;

}

11 Geben Sie die Formatvorlagen für (a) alle Hyperlinks innerhalb des Menüs (#nav) eingeschlossen.

Der folgende Code weist den Browser an die Verknüpfung als Block in eine angegebene Breite anzuzeigen.

In diesem Fall wird die Breite angegeben, in "Em"-Einheiten, die Maßeinheiten im Vergleich zu den aktuellen Standard-Schriftgrad (1em) angibt. Die Einstellung der 10em ist zehn Mal so groß wie die Standard-Schriftart.

NAV ein {} display: block;

width: 10em;

}

12 Geben Sie die Formatvorlagen für alle Menüs und Untermenüs Elemente innerhalb des Menüs eingeschlossen. Der folgende Code legt die Breite des Blocks mit den Menü-Link und weist den Browser an das Menü so weit links wie möglich anzuzeigen, bis es in zuvor angezeigten Inhalte Grenzen stößt.

NAV li {} float: left;

width: 10em;

}

13 Geben Sie die Formatvorlagen, die spezifisch für (Ul) Untermenüs des Hauptmenüs (#nav). Der folgende Code ist was die Untermenüs versteckt, bis der Benutzer auf seiner übergeordneten Sicht schwebt. Oben links auf den sichtbaren Bereich eines HTML-Elements hat Koordinaten "0,0." Eine große negative Koordinate für den linken Rand der Untermenüs effektiv nutzen verbirgt sie bei Nichtgebrauch.

NAV li Ul {} position: absolute;

width: 10em;

left: -999em;

}

14 Legen Sie das zugehörige Untermenü erneut auf die Standardposition, wenn der Benutzer über ein Menüelement bewegt wird. Dadurch wird das Untermenü "magisch" in einer sichtbaren Stelle wieder erscheinen und verschwinden, wenn der Benutzer bewegt sich auf.

NAV Li:hover Ul {} left: auto;

}

Verfeinern Sie Ihr Menü

15 Fügen Sie zusätzliche styling die Logik der verschachtelten Untermenüs zu unterstützen. Sie müssen Regeln erstellen, die jeweils bestimmten HTML-Element Verschachtelungstiefe speziell widerspiegeln. Der folgende Code behandelt drei Ebenen verschachteln. Jede Ebene wird zunehmend komplexer:

NAV-Li:hover-Ul-Ul, #nav Li:hover Ul Ul Ul, #nav li.sfhover Ul Ul #nav li.sfhover Ul Ul Ul {} left: -999em;

}

NAV Li:hover Ul, #nav li Li:hover Ul, #nav li li Li:hover Ul, #nav li.sfhover Ul, #nav li li.sfhover Ul, #nav li li li.sfhover Ul {} left: auto;

}

16 Wählen Sie eine Menü-Lösung, die einfach an Ihre Anwendung mit minimalen Änderungen angepasst werden kann. Eine Lösung wird CSS-Stylesheets enthalten, die ästhetische Qualitäten, wie Farbe und Schriftart aussehen ansprechen. Noch wichtiger ist, sollte es Javascript-Code enthalten, die implementiert anspruchsvolle Verhaltensweisen und passt für bestimmte Browser Funktionsbeschränkungen und Bugs.

17 Folgen Sie die Anweisungen für das Paket, dass Sie für die Angabe von URLs für die niedrigste Ebene Menüpunkte ausgewählt haben. Eine Javascript-basierte Lösung erfordert Hook Handlerfunktionen, um Ihre Anker. Wenn Sie Javascript nicht verwenden, müssen Sie die # in Ihrem Anker Href-Attribute mit der URL der Zielseite zu ersetzen.

Tipps & Warnungen

  • Animierte Menüs, dass Folie öffnen sind ein Beispiel für Effekte, die mit einem Javascript-Paket erreicht werden können.
  • Angabe von Bemaßungen mit konstanter Pixelgrößen (px)--statt Em Einheiten – dürfte zu erniedrigen Menüaussehen und Verhalten für Benutzer, die ihre Browser größere Schriftarten anzeigen festgelegt haben.