Suckerfish Dropdowns

Armin Bartsch, Mittwoch, 11. März 2009

Ein CSS Aufklappmenue, mit JavaScript Unterstützung für den InternetExplorer <7

Leider benötigt der InternetExplorer zur Unterstützung JavaScript. Das The ULTIMATE CSS only drop-down menu ist ein reines CSS Menü.

Das Suckerfish Dropdowns ist ein einfaches CSS Aufklappmenü das einfach und schnell in eine Seite integriert werden kann. Das TypoScript ist einfach gehalten, kann aber dafür auch sehr einfach erweitert werden und den eigenen wünschen angepasst werden.

Hier erhalten Sie weitere Information zum Suckerfish Dropdowns, dort finden Sie Informationen zum CSS und zum JavaScript.

Demo

Das TypoScript un das hier zur Verfügung gestellte CSS orientiert sich an diesem Beispiel des suckerfish Menüs.

TypoScript, CSS und JavaScript

Bitte fügen Sie das folgende TypoScript, das JavaScript und das CSS in Ihre Website ein.

TypoScript

lib.suckerfish > lib.suckerfish = HMENU lib.suckerfish { special = directory special.value = 5 1 = TMENU 1 { expAll = 1 wrap = <ul id="nav">|</ul> NO = 1 NO { linkWrap = <li>|</li> } IFSUB = 1 IFSUB { wrapItemAndSub = <li>|</li> } } 2 < .1 2 { wrap = <ul> | </ul> IFSUB { ATagParams = class="daddy" } } 3 < .2 }
  1. lib.suckerfish >
  2. lib.suckerfish = HMENU
  3. lib.suckerfish {
  4.   special = directory
  5.   special.value = 5
  6.   1 = TMENU
  7.   1 {
  8.     expAll = 1
  9.     wrap = <ul id="nav">|</ul>
  10.       NO = 1
  11.       NO {
  12.         linkWrap = <li>|</li>
  13.       }
  14.     IFSUB = 1
  15.     IFSUB {
  16.       wrapItemAndSub = <li>|</li>
  17.     }
  18.   }
  19.   2 < .1
  20.   2 { 
  21.     wrap = <ul> | </ul>
  22.     IFSUB {
  23.       ATagParams = class="daddy"
  24.     }
  25.   }
  26.   3 < .2
  27. }
  28.  

CSS

#nav, #nav ul { float: left; width: 100%; list-style: none; line-height: 1; background: white; font-weight: bold; padding: 0; border: solid #eda; border-width: 1px 0; margin: 0 0 1em 0; } #nav a { display: block; width: 10em; w\idth: 6em; color: #7C6240; text-decoration: none; padding: 0.25em 2em; } #nav a.daddy { background: url(rightarrow2.gif) center right no-repeat; background:green } #nav li { float: left; padding: 0; width: 10em; } #nav li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; font-weight: normal; border-width: 0.25em; margin: 0; } #nav li li { padding-right: 1em; width: 13em } #nav li ul a { width: 13em; w\idth: 9em; } #nav li ul ul { margin: -1.75em 0 0 14em; } #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; } #nav li:hover, #nav li.sfhover { background: #eda; }
  1. #nav, #nav ul {
  2.   float: left;
  3.   width: 100%;
  4.   list-style: none;
  5.   line-height: 1;
  6.   background: white;
  7.   font-weight: bold;
  8.   padding: 0;
  9.   border: solid #eda;
  10.   border-width: 1px 0;
  11.   margin: 0 0 1em 0;
  12. }
  13.  
  14. #nav a {
  15.   display: block;
  16.   width: 10em;
  17.   w\idth: 6em;
  18.   color: #7C6240;
  19.   text-decoration: none;
  20.   padding: 0.25em 2em;
  21. }
  22.  
  23. #nav a.daddy {
  24.   background: url(rightarrow2.gif) center right no-repeat;
  25.   background:green
  26. }
  27.  
  28. #nav li {
  29.   float: left;
  30.   padding: 0;
  31.   width: 10em;
  32. }
  33.  
  34. #nav li ul {
  35.   position: absolute;
  36.   left: -999em;
  37.   height: auto;
  38.   width: 14.4em;
  39.   w\idth: 13.9em;
  40.   font-weight: normal;
  41.   border-width: 0.25em;
  42.   margin: 0;
  43. }
  44.  
  45. #nav li li {
  46.   padding-right: 1em;
  47.   width: 13em
  48. }
  49.  
  50. #nav li ul a {
  51.   width: 13em;
  52.   w\idth: 9em;
  53. }
  54.  
  55. #nav li ul ul {
  56.   margin: -1.75em 0 0 14em;
  57. }
  58.  
  59. #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  60.   left: -999em;
  61. }
  62.  
  63. #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 {
  64.   left: auto;
  65. }
  66.  
  67. #nav li:hover, #nav li.sfhover {
  68.   background: #eda;
  69. }

JavaScript

Das JavaScript benötigen Sie, damit das Menü auch im InternetExplorer <7 funktionsfähig ist.

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);
  1. sfHover = function() {
  2.   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  3.   for (var i=0; i<sfEls.length; i++) {
  4.     sfEls[i].onmouseover=function() {
  5.       this.className+=" sfhover";
  6.     }
  7.     sfEls[i].onmouseout=function() {
  8.       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  9.     }
  10.   }
  11. }
  12. if (window.attachEvent) window.attachEvent("onload", sfHover);
TypoScript object not found (lib.suckerfish)

Snippets

Sponsored by:

ideenwerft webhosting
ideenwerft caretaker