Uni Template 2009
 
 
Hintergrundbild
Hintergrundbild
Uni von A-Z
Universität Bielefeld
  

Ausklappmenüs anlegen

Wenn Sie für die Seiten Ihrer Einrichtung ein Ausklappmenü anlegen wollen (wie sie auf der Abbildung in der rechten Seitenbox zu sehen ist), geht das in drei recht einfachen Schritten:

  1. Zuerst wird eine Navigations-Datei erstellt.

  2. Diese Navigations-Datei können Sie an ihre eigene Navigationsstruktur und die Farbe Ihrer Einrichtung anpassen.

  3. Und schließlich wird die Datei durch einen INSERT-Befehl in Ihr Template aufgenommen.



1. Die Navigations-Datei erstellen

Erstellen Sie mit Roxen eine neue Datei, die Sie beispielsweise "navigation.html" nennen.
Diese Datei soll dann folgenden Inhalt haben:

<!--
Informationen zu diesem Menü finden Sie unter
http://www.uni-bielefeld.de/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Templates/ausklappmenue.html
-->

<link rel="stylesheet" href="/css/jquery.treeview.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="/javascript/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="/javascript/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript" src="/javascript/treeviewdemo.js"></script>


<ul id="navigation">
  <li><a href="/start.html">     <div class="menu_point"></div>
      <div class="menu-eintrag1"><span>Start</span></div></a>
  </li>
  <li style="border: none;">&nbsp;</li>
  <li><a href="/null.html">     <div class="menu_point"></div>
      <div class="menu-eintrag1"><span>Eintrag ohne Unterpunkte</span></div></a>
  </li>
  <li><a href="/eins.html">
      <div class="menu-eintrag1"><span>Mit einem Unterpunkt</span></div></a>
      <ul class="sub">
        <li class="erster letzter"><a href="/eins_unterpunkt.html"><div class="menu_point"></div><div class="menu-eintrag2"><span>Unterseite</span></div></a></li>
      </ul>
  </li>
  <li><a href="/zwei.html" class="menu1">
      <div class="menu-eintrag1"><span>Mit zwei oder mehr Unterpunkten</span></div></a>
      <ul class="sub">
        <li class="erster"><a href="/zwei1.html"><div class="menu_point"></div><div class="menu-eintrag2"><span>Unterseite 1</span></div></a></li>
        <li><a href="/zwei2.html"><div class="menu_point"></div><div class="menu-eintrag2"><span>Unterseite 2</span></div></a></li>
        <li><a href="/zwei3.html"><div class="menu_point"></div><div class="menu-eintrag2"><span>Unterseite 3</span></div></a></li>
        <li class="letzter"><a href="/zwei4.html"><div class="menu_point"></div><div class="menu-eintrag2"><span>Unterseite 4</span></div></a></li>
      </ul>
  </li>
  <li style="border: none;"></li>
</ul>


2. Anpassen der Navigations-Datei

Zur Anpassung an die Einrichtungsfarbe müssen Sie die Pfadangabe zur CSS-Datei (ganz oben im Dokument) entsprechend abändern. Es stehen zur Zeit folgende Farben zur Auswahl:

  •  
    Unigrün (#B6C828):      /css/jquery.treeview.css
  •  
    Grün-Blau (#8CBCA7): /css/jquery.treeview_8CBCA7.css
  •  
    Blau (#2A9DDF):          /css/jquery.treeview_2A9DDF.css
  •  
    Orange (#EE7401):      /css/jquery.treeview_EE7401.css
  •  
    Rot (#E73E0C):            /css/jquery.treeview_E73E0C.css

Sollte die Farbe, die Sie benötigen (oder eine dazu ähnliche), nicht vorhanden sein, melden Sie sich bei Manuela Ewers (manuela.ewers@uni-bielefeld.de).

Auf Folgendes müssen Sie beim anpassen der Menüpunkte achten:

  • Die Quellenangaben in den <script> -Tags, sowie die ID- und CLASS-Angaben dürfen nicht verändert werden!
  • Hauptmenüpunkte, welche keine Unterpunkte besitzen, brauchen den Zusatz  
    <div class="menu_point"></div> wie es bei den ersten beiden Punkten des Beispielmenüs zu sehen ist.
  • Der erste (bzw.letzte) Eintrag eines Untermenüs braucht den Style-Zusatz:
    class="erster" (bzw. class="letzter")
  • Bei nur einem Untermenü-Eintrag werden beide Klassen ohne Komma kombiniert:
    class="erster letzter"


3. Die Navigation ins Template einfügen

Pfeil Sollten Sie noch nicht über ein eigenes Template verfügen, so können Sie sich nach diesem Beispiel eines erstellen.

Löschen Sie zunächst die Angaben zum Sub-Menü und zu den Left-Menüs (sofern Sie diese nicht mehr verwenden wollen) und fügen Sie dann die Navigations-Datei per INSERT-Befehl an Stelle des Sub-Menüs in Ihr Template ein:
(Vergessen Sie nicht den Pfad zur Navigations-Datei entsprechend anzupassen)

<div id="menulinks">

  <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
  <gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'>
    Navigation </gtext></h1>

  <insert file="/navigation.html"/> <br/><br/>

 </div>



Nun sollte die Ausklappnavigation funktionieren.

Bei Problemen oder Fragen wenden Sie sich an Manuela Ewers (manuela.ewers@uni-bielefeld.de) oder Markus Paulußen (markus.paulussen@uni-bielefeld.de)

Beispiel-Menü

beispiel-menü