Weitere Schritte und Überlegungen

Sie sollten an dieser Stelle nur weitermachen, wenn das Layer-Menü an sich bereits funktioniert. Alles im Folgenden beschriebene setzt das voraus. Es hat keinen Sinn, die Schritte auf dieser Seite durchzuführen, wenn das Menü nicht in allen Aspekten Ihren Anforderungen genügt.

Grundsätzliches:

Menüs dieser Art haben den entscheidenden Nachteil, daß sie nur mit JavaScript funktionieren. Hat ein Besucher Ihrer Website JavaScript abgeschaltet (darauf haben Sie ja keinen Einfluß) kann das Menü nicht funktionieren. Was also tun? Es ist keine gute Idee, darauf zu vertrauen oder vom Benutzer gar zu fordern, JavaScript sei eingeschaltet. Sie sind auf Ihre Besucher angewiesen und nicht umgekehrt. Einem Besucher, der JavaScript abgeschaltet hat, muß also ebenfalls eine funktionierende Navigation präsentiert werden.

Im Verzeichnis fileadmin/udm/ finden Sie eine HTML-Datei mit dem Namen css-generator.html die die Einstellungen, die Sie in der Skript-Datei udm-custom.js gemacht haben in CSS-Anweisungen konvertiert.

JavaScript in CSS konvertieren

Rufen Sie css-generator.html im Webbrowser auf und nehmen Sie die Einstellungen vor, wie unten abgebildet.. Es spielt keine Rolle, ob Sie dies auf Ihrer lokalen Festplatte tun, oder auf Ihrem Webserver. Wichtig ist nur, daß die Datei udm-custom.js, die im selben Verzeichnis liegen muß, diejenige ist, die Sie angepasst haben. Diese wird gelesen und in CSS-Anweisungen konvertiert. Klicken Sie hierzu auf Generate CSS und kopieren Sie die Ausgabe im Bereich Main Output mit Strg C in die Zwischenablage.

Die Datei css-generator.html

udm-style.css (UDM Layer-Menü)

Öffnen Sie nun die Datei udm-style.css und kopieren Sie die CSS-Anweisungen mit Strg V ans Ende der Datei. Es sollte anschließend aussehen wie unten abgebildet. Die Zeilen 167 bis 169 (rot markiert) schreiben Sie bitte manuell dazu. Sie sorgen dafür, daß bei abgeschaltetem JavaScript nur die oberste Ebene des Menüs und nicht die Layer dargestellt werden.

udm-style.css

  1. /* UDMv4.5 */
  2. /***************************************************************\
  4.   ULTIMATE DROP DOWN MENU Version 4.5 by Brothercake
  5.   http://www.udm4.com/
  6.  
  7.   This script may not be used or distributed without license
  9. \***************************************************************/
  10.  
  11. /***************************************************************/
  12. /* Generated CSS - DO NOT EDIT THIS DIRECTLY                   */
  13. /***************************************************************/
  14. .udm,.udm li,.udm ul {
  15.   margin:0;
  16.   padding:0;
  17.   list-style-type:none;
  18.   }
  19. .udm {
  20.   position:relative;
  21.   left:0;
  22.   top:0;
  23.   z-index:20000;
  24.   width:auto;
  25.   cursor:default !important;
  26.   border:none;
  27.   text-align:left;
  28.   }
  29. .udm {
  30.   float:none;
  31.   width:100%;
  32.   }
  33. @media screen,projection {
  34.   .udm {
  35.   float:left;
  36.   }}
  37. .udm {
  38.   padding-top:0;
  39.   }
  40. .udm>li:first-child {
  41.   margin-left:50px;
  42.   }
  43. @media Screen,Projection {
  44.   .udm>li:first-child {
  45.   margin-left:0;
  46.   margin-right:0;
  47.   }}
  48. .udm li {
  49.   left:50px;
  50.   }
  51. @media screen,projection {
  52.   .udm li {
  53.   position:relative;
  54.   }}
  55. .udm li {
  56.   display:block;
  57.   width:auto;
  58.   float:left;
  59.   }
  60. .udm li a {
  61.   position:static;
  62.   display:block;
  63.   float:left;
  64.   white-space:nowrap;
  65.   }
  66. @media screen,projection {
  67.   .udm l\i a {
  68.   position:relative;
  69.   float:none;
  70.   }}
  71. ul[class^="udm"] li a {
  72.   position:relative;
  73.   float:none;
  74.   }
  75. @media screen,projection {
  76.   * html .udm li a {
  77.   position:relative;
  78.   float:none;
  79.   }}
  80. .udm li,.udm li:first-child {
  81.   margin-right:0px;
  82.   }
  83. .udm li a {
  84.   margin-bottom:0px;
  85.   }
  86. ul[class^="udm"]:not([class="xxx"]) li a {
  87.   margin-bottom:0;
  88.   }
  89. ul[class^="udm"]:not([class="xxx"]) li {
  90.   margin-bottom:0px;
  91.   }
  92. .udm a,.udm a:link,.udm a.nohref {
  93.   background-image:none;
  94.   background-color:#5482d4;
  95.   cursor:pointer !important;
  96.   z-index:1000;
  97.   text-align:left;
  98.   border-style:solid;
  99.   border-color:#5d91f1 #325081 #325081 #5d91f1;
  100.   padding-left:8px;
  101.   padding-right:8px;
  102.   padding-top:3px !important;
  103.   padding-bottom:3px !important;
  104.   text-decoration:none;
  105.   color:#fff;
  106.   border-width:2px;
  107.   font-style:normal;
  108.   font-family:'Trebuchet MS',Verdana,Helvetica,Arial, sans-serif;
  109.   ;
  110.   font-weight:bold !important;
  111.   }
  112. .udm a,.udm a.nohref {
  113.   font-size:100%;
  114.   }
  115. .udm li a:visited {
  116.   background-image:none;
  117.   background-color:#5482d4;
  118.   border-width:2px;
  119.   color:#fff;
  120.   font-style:normal;
  121.   border-style:solid;
  122.   border-color:#5d91f1 #325081 #325081 #5d91f1;
  123.   }
  124. .udm li a.udmR,.udm li a.udmY,.udm li a.udmR:visited,.udm li a.udmY:visited,.udm li a:hover,.udm li a:focus,.udm li a.nohref:hover,.udm li a.nohref:focus {
  125.   font-style:normal;
  126.   background-image:none;
  127.   background-color:#fff;
  128.   text-decoration:none;
  129.   color:#325081;
  130.   border-color:#5d91f1 #325081 #325081 #5d91f1;
  131.   border-style:solid;
  132.   border-width:2px;
  133.   }
  134. * html .udm li a:active {
  135.   font-style:normal;
  136.   background-image:none;
  137.   background-color:#fff;
  138.   text-decoration:none;
  139.   color:#325081;
  140.   border-color:#5d91f1 #325081 #325081 #5d91f1;
  141.   border-style:solid;
  142.   border-width:2px;
  143.   }
  144. .udm a.nohref,.udm ul a.nohref {
  145.   cursor:default !important;
  146.   }
  147. @media screen,projection {
  148.   * html .udm li {
  149.   display:inline;
  150.   }}
  151. @media screen,projection {
  152.   * html .udm li,* html .udm ul li {
  153.   display/**/:block;
  154.   float/**/:left;
  155.   }}
  156. ul[class$="udm"].udm li,ul[class$="udm"].udm ul li {
  157.   display:block;
  158.   float:left;
  159.   }
  160. ul[class$="udm"].udm:not([class="xxx"]) li {
  161.   float:left;
  162.   }
  163. @media all and (min-width:0px) {
  164.   ul[class$="udm"].udm li {
  165.   float:left;
  166.   }}
  167. .udm ul {
  168.   display:none;
  169. }
  170.  
Datei herunterladen:uploads/tx_jphcodesnippets/udm-style.txt

Sie können es jetzt ausprobieren: Schalten Sie probeweise JavaScript in Ihrem Browser ab und Sie werden feststellen, daß nur die oberste Ebene des Menüs dargestellt wird.