Eigenes Design mit waagerechter Navigationsleiste auf der Basis von NPage Script

{foreach from=$menu item=menu_item} {if $menu_item.title !='Slickboard' && $menu_item.title !='Media Player' && $menu_item.title !='LiveSwif' && $menu_item.title !='Sonstiges' && $menu_item.title !='Selteco Flash Designer' && $menu_item.title !='QR-Code erzeugen'} {if $menu_item.type == 'link_internal_textpage' || $menu_item.type == 'link_internal_extra' || $menu_item.type == 'link_external'}
• {$menu_item.title}
{elseif $menu_item.type == 'submenu'}
• {$menu_item.title}
  {foreach from=$menu_item.subitems item=submenu_item} {if $submenu_item.type == 'link_internal_textpage' || $submenu_item.type == 'link_internal_extra' || $submenu_item.type == 'link_external'}
  • {$submenu_item.title}
  {/if} {/foreach}
{/if} {/if} {/foreach}

Automatisches Menü mit Npage Script - horizontal formatiert

Erstmal mit dem Update vom Mai 2012 hat NPage eine Funktion eingefügt, die es NPage-Nutzer ermöglichte, das Menü bei einem eigenen Design automatisch erstellen zu lassen. Diese Variante, die etwa so aussah:

{protected}(foreach) 
<a href="[menu_item.href]" target="[menu_item.target]"[menu_item.add_attributes]>[menu_item.link_text]</a>[menu_item.extra]<br /> 
(/foreach){/protected}

(siehe dazu Forenbeiträge Beitrag im Forum lesen und in diesem Forenbeitrag) und ist mittlerweile überholt. Die automatische Menuerstellung ist jetzt Bestandteil von NPage Script, und auch hier wurden nach einer längeren Testphase einige Änderungen vorgenommen. Seit dem 18.09.2013 ist NPage Script nicht mehr in der Testphase sondern steht allen Nutzern automatisch zur Verfügung.

Ich habe daher zu diesem Thema zwei kleine Anleitungen geschrieben. Hier zeige ich, wie man aus den Platzhaltern eine horizontale (also waagerechte, von links nach rechts verlaufende) Navigationleiste mit Untermenüpunkten baut. In einem anderen Beitrag wird erklärt, wie man aus diesen Platzhaltern eine senkrechte, von oben nach unten verlaufende Navigationsleiste macht.

Npage Script gemäß NPage Script Hilfe

Ausführliche Informationen zur automatischen Erzeugung einer Navigationstruktur findet man in der NPage-Script-Hilfe:

https://www.hpage.com/hilfe/content/npage_script.html#num_5

Dort gibt es auch ein Beispiel:

https://www.hpage.com/hilfe/content/npage_script_menu.html

mit diesem Code:

{protected}<ul>
  {foreach from=$menu item=menu_item}
    {if $menu_item.type == 'link_internal_textpage' || $menu_item.type == 'link_internal_extra' || $menu_item.type == 'link_external'}
      <li class="menu"><a target="{$menu_item.target}" href="{$menu_item.link}"{$menu_item.additional_attributes}>{$menu_item.title}</a></li>
    {elseif $menu_item.type == 'submenu'}
      <li class="menu"><a onclick="javascript:submenu('submenu_own_{$menu_item.id}'); return false;" href="#"{$menu_item.additional_attributes}>{$menu_item.title}</a></li>

      {foreach from=$menu_item.subitems item=submenu_item}
        {if $submenu_item.type == 'link_internal_textpage' || $submenu_item.type == 'link_internal_extra' || $submenu_item.type == 'link_external'}
          <li class="menu submenu_item submenu_own_{$menu_item.id}" style="display: none;"><a target="{$submenu_item.target}" href="{$submenu_item.link}"{$submenu_item.additional_attributes}>{$submenu_item.title}</a></li>
        {elseif $submenu_item.type == 'heading'}
          <li class="menu submenu_item menu_heading submenu_own_{$menu_item.id}" style="display: none;">{$submenu_item.title}</li>
        {elseif $submenu_item.type == 'separator'}
          <li class="menu submenu_item menu_separator submenu_own_{$menu_item.id}" style="display: none;"><hr{$submenu_item.additional_attributes} /></li>
        {/if}
      {/foreach}
    {elseif $menu_item.type == 'heading'}
      <li class="menu menu_heading">{$menu_item.title}</li>
    {elseif $menu_item.type == 'separator'}
      <li class="menu menu_separator"><hr{$menu_item.additional_attributes} /></li>
    {/if}
  {/foreach}
</ul>
{/protected}

Anpassungen und Formatierungen

Anpassungen beim NPage Script

Um mit NPage Script eine horizontale Navigationsleiste zu erstellen, muss man den oben angeführten NPage Script Code aus der Npage Script Hilfe modifizieren. Das betrifft mehrere Sachverhalte:

• Überschriften und Trennlinien sind in dieser Art von Navigation überflüssig und sollen, soweit sie früher erstellt wurden, nicht berücksichtigt werden. daher können alle Menüeinträge vom Typ heading und separator unbeachtet bleiben.
• die im Script enthaltenen Bestandteile, die für das Aufklappen der Untermenüs erforderlich sind, können ebenfalls weggelassen werden. Das betrifft: additional_attributes und {protected}onclick="javascript:submenu('submenu_own_{$menu_item.id}'); return false;"{/protected}

Das Layout - alte Fassung

Modifizierter Platzhalter

Ich habe das Design bewusst einfach gehalten. Den bereits erwähnten Platzhalter für die navigation habe ich etwas angepasst, so dass er in einem eigenen DIV-Container steht und die Links auf der oberen Ebene in einer ul/li-Liste stehen:

  <div id="topnavi">
    <ul>(foreach [menu_item])
      <li>
        <a href="[menu_item.href]" target="[menu_item.target]"[menu_item.add_attributes]>[menu_item.link_text]</a>[menu_item.extra]
      </li> (/foreach)
    </ul>
  </div><!--Ende topnavi -->

Auch hier ist wieder zu beachten, dass ich die {} aus technischen Gründen durch () ersetzen musste.

Stylefestlegungen

Damit die Navigation so aussieht, wie auf dieser Beispielseite,  müssen eine Reihe von Styles festgelgt werden:

<style type="text/css" media="screen">
#topnavi {
  font-size:14px;
}  

#topnavi ul {
  margin: 0;
  padding: 0;
  border-width:0;
  float: left;
  width:100%;
  height:38px;
  }
  
#topnavi ul li {
  float:left;
  list-style: none outside none;
  /* display:inline; *//*alle li nebeneinander und ohne Bullet */
  position: relative;
  }
  
#topnavi ul li a {
  display:block;
  float:none;     
  padding-left:5px;
  padding-right:5px;
  padding-top:10px;
  padding-bottom:10px;
  font-weight:bold;
  text-decoration:none;
  color:black;
  font-variant:small-caps;
  background-color:maroon;
  }
  
#topnavi ul li a:visited {
  text-decoration: none;
  color: #111;
  }  

#topnavi ul li a:hover {
  text-decoration: none;
  color: white;
  }

#topnavi ul li div {
  font-size:0;
  position:absolute;
  top:34px;/* Abstand zur 1. Menueebene, bei anderer Schrifftart/-groesse anpssen*/
  background-color:maroon;
  opacity: .95;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95);
  }

#topnavi ul li div a {
  font-size:14px;
  padding-left:10px;
  padding-top:7px;/*beeinflusst Hoehe der Untermenuepunkte */
  padding-bottom:7px;/*beeinflusst Hoehe der Untermenuepunkte */
  display:inline-block;
  /*width:250px;*//*Breite des Untermenueblocks u.d. Untermenuepunkte */
  }
  
</style>

JavaScript-Anpassung

Bei NPage wird das Aus- und Zuklappen der Untermenüs durch ein kleines JavaScript realisiert. Das hat im Orginal jedoch den Nachteil, dass mehrer Untermenüpunkte aufgeklappt sein können. Bei der hier gewählten Form der waagerechten Navigationsleiste würde das zu einer starken Unübersichtlichkeit führen.

Es muss also ein JavaScvript mit den vom Namen her gleichen Funktionsaufrufen und anderen Inhalten am Ende eingefügt werden. Der JavaScript-Code dazu sieht so aus:

<script type="text/javascript">
function untermenu(elementname) {
    var parent = document.getElementById("topnavi");    
    var content = parent.getElementsByTagName("div");
    for (var i = 0; i < content.length; i++){
        if (content[i].id != elementname) {
            document.getElementById(content[i].id).style.display = 'none';
        }
    }
    var elementStatus = document.getElementById(elementname).style.display;
    if (elementStatus == 'block') {
        document.getElementById(elementname).style.display = 'none';
    }
    else {
        document.getElementById(elementname).style.display = 'block';
    }
}
</script>

Zusammenfassung

Aus diesen Code-Schnippseln lann man nun die Codes für den Design-Style-Header und den Design-Style-Footer des eigenen Designs zusammensetzen.

Design-StyleHeader

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<title>NPage - Einbau einer horizontalen Navigationsleiste mit Platzhaltern</title>
<meta name="description" content="Anleitung zum Einbau einer waagerechten Navigationsleiste in ein eigenens Design bei NPage auf der Basis der Platzhalter">  
<!--Definition der Styles-->
<style type="text/css" media="screen">
*, html, body{
  border-width:0;
  }
  
body{  
  font-family: 'Questrial', sans-serif;
  color:black;
}
  
#wrapper{
width:950px;
margin:auto;
  }

#topnavi {
  font-size:14px;
}  

#topnavi ul {
  margin: 0;
  padding: 0;
  border-width:0;
  float: left;
  width:100%;
  height:38px;
  }
  
#topnavi ul li {
  float:left;
  list-style: none outside none;
  /* display:inline; *//*alle li nebeneinander und ohne Bullet */
  position: relative;
  }
  
#topnavi ul li a {
  display:block;
  float:none;     
  padding-left:5px;
  padding-right:5px;
  padding-top:10px;
  padding-bottom:10px;
  font-weight:bold;
  text-decoration:none;
  color:black;
  font-variant:small-caps;
  background-color:maroon;
  }
  
#topnavi ul li a:visited {
  text-decoration: none;
  color: #111;
  }  

#topnavi ul li a:hover {
  text-decoration: none;
  color: white;
  }

#topnavi ul li div {
  font-size:0;
  position:absolute;
  top:34px;/* Abstand zur 1. Menueebene, bei anderer Schrifftart/-groesse anpssen*/
  background-color:maroon;
  opacity: .95;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95);
  }

#topnavi ul li div a {
  font-size:14px;
  padding-left:10px;
  padding-top:7px;/*beeinflusst Hoehe der Untermenuepunkte */
  padding-bottom:7px;/*beeinflusst Hoehe der Untermenuepunkte */
  display:inline-block;
  /*width:250px;*//*Breite des Untermenueblocks u.d. Untermenuepunkte */
  }
  
#content{
  font-size:110%;
  padding-left:30px;
  padding-right:30px;
}  
</style>
</head>
<body>
<div id="wrapper">  
  <div id="topnavi">
    <ul>(foreach [menu_item])
      <li>
        <a href="[menu_item.href]" target="[menu_item.target]"[menu_item.add_attributes]>[menu_item.link_text]</a>[menu_item.extra]
      </li> (/foreach)
    </ul>
  </div><!--Ende topnavi -->
  <div id="content">
<!-- Ende Design-Style-Header -->

Auch hier muss wieder beachtet werden, dass ich die {} durch () ersetzen musste. Das muss man natürlich rückgängig machen.

Design-Style-Footer

<!-- Anfang Design-Style-Footer -->
  </div><!--Ende content -->
</div><!--Ende wrapper -->
<script type="text/javascript">
function untermenu(elementname) {
    var parent = document.getElementById("topnavi");    
    var content = parent.getElementsByTagName("div");
    for (var i = 0; i < content.length; i++){
        if (content[i].id != elementname) {
            document.getElementById(content[i].id).style.display = 'none';
        }
    }
    var elementStatus = document.getElementById(elementname).style.display;
    if (elementStatus == 'block') {
        document.getElementById(elementname).style.display = 'none';
    }
    else {
        document.getElementById(elementname).style.display = 'block';
    }
}
</script>
</body>
</html>

• Design Burkhard Schlutt BPGS.DE
• Meine Droppages
• Gästebuch
• Kontakt
• Impressum