Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

Erstellen eines kaskadierenden Navigationssystems auf Grundlage von JavaScript

Wir erstellen mit den einfachen Mitteln von JavaScript ein Navigationssystem (z. B. eine Navigationsleiste auf der linken Seite), das in einer einzigen Datei definiert ist.

Bei Websites, die eine Anpassung der Größe erlauben, besteht einer der großen Vorteile verknüpfter Cascading Stylesheets (<link rel="stylesheet" type="text/css" href="mystyle.css" />) darin, dass der Stil der gesamten Site in nur einer Datei definiert wird. Wenn z. B. entschieden wird, dass die Schriftart für den gesamten Text in <p>-Elementen Calibri mit der Farbe #333 sein soll, müssen Sie nur eine Datei ändern (z. B. "mystyle.css"). Die Änderung wird dann auf die gesamte Site angewendet (kaskadiert). (Dabei wird davon ausgegangen, dass alle Seiten mit "mystyle.css" verknüpft sind.).

Auf dieselbe Weise können Sie bei Websites mit veränderbarer Größe, bei denen serverseitige Techniken wie serverseitige Includes ungeeignet oder nicht verfügbar sind, mit einfachem JavaScript kaskadierende Techniken anwenden, um ein Navigationssystem zu erstellen, das ebenfalls in einer einzelnen Datei definiert ist (z. B. "leftNav.js"). Wenn eine solche Datei mit den Seiten einer Website verknüpft wird, wird auf sämtlichen Seiten das in "leftNav.js" definierte Navigationssystem angezeigt. Wenn Sie Änderungen an der Navigation vornehmen möchten, ändern Sie nur die JS-Datei. Eingriffe in das hartcodierte Markup jeder einzelnen Seite der Site nicht nötig.

Wichtig  Auch wenn diese Technik viele Vorteile bietet, kann sie nicht angewendet werden, wenn ein Benutzer JavaScript im Browser deaktiviert. In diesem Fall würde eine Website mit einer solchen JavaScript-basierten Navigation ohne dieses Navigationssystem gerendert werden.

Zur Beschreibung dieses JavaScript-basierten Navigationssystems gehen Sie zunächst von der folgenden herkömmlichen seitenweisen Navigation aus (die auch einige semantische HTML5-Elemente enthält):

Traditionelle Navigation auf der linken Seite


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Traditional Left Nav</title>
<style>
  #leftNav {
    border-right: 1px grey dashed;
    width: 9.5em;
    margin-left: -2em;
  }
	
  #leftNav ul {
    list-style: none;
  }
	
  #leftNav ul ul li {
    margin-left: -1.5em;
  }	
</style>
</head>

<body>
  <nav id="leftNav">
    <ul id="outerUL">
      <li id="home"><a href="home.html">Home</a></li>
      <li id="portfolio"><a href="portfolio.html">Portfolio</a>
        <ul id="portfolioUL">
          <li id="thumbnails"><a href="thumbnails.html">Thumbnails</a></li>
          <li id="slideShow"><a href="slideShow.html">Slide Show</a></li>
        </ul>
      </li>
      <li id="tagCloud"><a href="tagCloud.html">Tag Cloud</a></li>
    </ul>
  </nav>
  <section>
    <!-- Page content here. -->
  </section>
</body>
  
</html>


Dieses Markup wird folgendermaßen dargestellt:

Traditionelle Navigation auf der linken Seite

Das Ziel besteht nun darin, das Markup der Navigation in einer JavaScript-Datei zu platzieren und mit den Seiten zu verknüpfen, auf denen eine Navigation auf der linken Seite benötigt wird:


<body>
  <nav id="leftNav"><!-- leftNav.js injected nav system. --></nav>
  <section>
    <!-- Page content here. -->
  </section>
  <script src="leftNav.js"></script>
</body>

Wie Sie sehen, bleibt als einziges für die Navigation erforderliches Markup das <nav id=”leftNav”>-Element selbst übrig. Der übrige Teil des Navigationsmarkup wird dem DOM über den Code in der Datei "leftNav.js" angefügt.

Glücklicherweise sind nur zwei relativ einfache JavaScript-Funktionen für das Erstellen eines geschachtelten Navigationssystems erforderlich:


function appendUl(append_to_id, ul_id) {
  var ul = document.createElement('ul');
  ul.id = ul_id;
  
  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(ul);
}

und


function appendLiA(append_to_id, li_id, a_href, a_text) {
  var a = document.createElement('a');
  a.href = a_href;
  a.textContent = a_text;
  
  var li = document.createElement('li');
  li.id = li_id;
  li.appendChild(a);
  
  var appendTo = document.getElementById(append_to_id);
  appendTo.appendChild(li);
}

Die appendUl(append_to_id, ul_id)-Funktion erstellt ein <ul>-Element, dessen ID ul_id lautet. Dieses <ul>-Element wird dann an das Element mit der ID append_to_id angefügt. appendUl('leftNav', 'outerUL') würde z. B. <ul id="outerUL"> erstellen und an das Element mit der ID leftNav anfügen. daraus ergibt sich dann folgende DOM-Struktur:


<nav id="leftNav">
  <ul id="outerUL">
  </ul>
</nav>

appendLiA(append_to_id, li_id, a_href, a_text) ist etwas komplexer und erstellt zwei Elemente: ein <a>-Element und ein <li>-Element. Das href-Attribut des <a>-Elements wird auf a_href und der enthaltene Text wird auf a_text festgelegt. Die ID des <li>-Elements wird li_id und enthält das <a>-Element. Das <li>-Element und das <a>-Element werden dann an das Element mit der ID append_to_id angefügt. Ausgehend von der gezeigten DOM-Struktur (d. h. dem <nav id="leftNav"><ul id="outerUL">-Markup) führt ein Aufruf von appendLiA('outerUL', 'home', 'home.html', 'Home') zu Folgendem:


<nav id="leftNav">
  <ul id="outerUL">
    <li id="home"><a href="home.html">Home</a></li>
  </ul>
</nav>

Nun erstellen wir das folgende Markup für die Navigation auf der linken Seite (mit Ausnahme des äußeren <nav>-Elements):


<nav id="leftNav">
  <ul id="outerUL">
    <li id="home"><a href="home.html">Home</a></li>
    <li id="portfolio"><a href="portfolio.html">Portfolio</a>
      <ul id="portfolioUL">
        <li id="thumbnails"><a href="thumbnails.html">Thumbnails</a></li>
        <li id="slideShow"><a href="slideShow.html">Slide Show</a></li>
      </ul>
    </li>
    <li id="tagCloud"><a href="tagCloud.html">Tag Cloud</a></li>
  </ul>
</nav>

Wir rufen diese beiden Funktionen in der folgenden Reihenfolge auf:


appendUl('leftNav', 'outerUL'); 
appendLiA('outerUL', 'home', 'home.html', 'Home');
appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio');
appendUl('portfolio', 'portfolioUL'); 
appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails');
appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show');
appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud');

Beachten Sie dabei, dass die 4. Zeile in diesem Codebeispiel (appendUl('portfolio', 'portfolioUL')) das Schachteln von Miniaturansichten und einer Präsentation erlaubt:

Traditionelle Navigation auf der linken Seite

Zum Einfügen eines Navigationssystems auf der linken Seite einer beliebigen Seite der Website müssen Sie nur die Zeile <script src=”leftNav.js”></script> direkt vor dem <body>-Tag einfügen. Dies wird im folgenden vollständigen Beispiel veranschaulicht:

Kaskadierende Navigation auf der linken Seite


<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Cascading Left Nav</title>
<style>
  #leftNav {
    border-right: 1px grey dashed;
    width: 9.5em;
    margin-left: -2em;
	}
	
  #leftNav ul {
    list-style: none;
	}
	
  #leftNav ul ul li {
    margin-left: -1.5em;
	}	
</style>
</head>

<body>
  <nav id="leftNav"><!-- leftNav.js injected nav system. --></nav>
  <section>
    <!-- Page content here. -->
  </section>
  <script src="leftNav.js"></script>
</body>
  
</html>

Wenn Sie appendUl und appendLiA verstanden haben, ist der übrige Inhalt der Datei "leftNav.js" leicht zu verstehen:

"leftNav.js"


window.addEventListener('load', leftNav, false);

function leftNav() {
  appendUl('leftNav', 'outerUL'); 
  appendLiA('outerUL', 'home', 'home.html', 'Home');
  appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio');
  appendUl('portfolio', 'portfolioUL'); 
  appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails');
  appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show');
  appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud'); 
  
  function appendUl(append_to_id, ul_id) {
  /* 
    Creates a <ul> element whose ID is ul_id. This <ul> element is then 
    appended to the element whose ID is append_to_id.
  */
    var ul = document.createElement('ul');
    ul.id = ul_id;
	  
    var appendTo = document.getElementById(append_to_id);
    appendTo.appendChild(ul);
  } // appendUl
	
  function appendLiA(append_to_id, li_id, a_href, a_text) {
  /* 
    Creates two elements, an <a> element and an <li> element. The <a> element's
    href attribute is set to a_href and its inner text to a_text. The <li> 
    element's ID becomes li_id and contains the <a> element. The <li><a> 
    elements are then appended to the element whose ID is append_to_id.
  */
    var a = document.createElement('a');
    a.href = a_href;
    a.textContent = a_text;
	  
    var li = document.createElement('li');
    li.id = li_id;
    li.appendChild(a);
	  
    var appendTo = document.getElementById(append_to_id);
    appendTo.appendChild(li);
  } // appendLiA 	 
} // leftNav

Wie Sie im Markup erkennen können, besteht die einzige zusätzliche Komplexität im Kapseln von appendUl und appendLiA durch die leftNav-Funktion und im Aufruf von leftNav erst nach dem vollständigen Laden der Seite über window.addEventListener('load', leftNav, false).

Wenn Sie die wichtigen Hinweise beachten, besitzen Sie nun alle erforderlichen Kenntnisse für das Erstellen beliebiger kaskadierender Navigationssysteme für Ihre Website(s), indem Sie einfach die entsprechenden Aufrufe von appendUl und appendLiA wie hier gezeigt in der richtigen Reihenfolge kombinieren.

Verwandte Themen

Contoso Images-Fotogalerie
Beispiele und Lernprogramme zu Internet Explorer 10

 

 

Anzeigen:
© 2014 Microsoft