Zum Inhalt springen

Simple JQuery Accordion Menu - Wrap und CSS Problem

Erstellt am 30. Januar 2011 · Noch keine Antworten

Tags: Frage

dave7100 ·

Hi!

Ich versuche nun schon seit Ewigkeiten ein Vertikales Accordion Menu mit Sublevels zum Laufen zu bekommen und habe nun mit dem Simple JQuery Accordion Menu (http://www.i-marco.nl/weblog/jquery-accordion-menu/) erste Erfolge aber auch Probleme.
Das Menü wird mir angezeigt, jedoch ist das Submenü ausgeklappt und nichts bewegt sich.
Jetzt verzweifle ich allmählich, weil ich den Fehler nicht finde..

Das menu-collapsed.js und jquery-1.4.4.min.js, sowie den entsprechenden code habe ich ins html integriert. Im CSS die Klassen eingebunden und wohl leider falsch gewrappt..

Vielen Dank für eure Hilfe!!

Hier mein HTML

 <script type="text/javascript" href="fileadmin/ext/jquery-1.2.1.min.js"></script>
<script type="text/javascript" href="fileadmin/ext/menu-collapsed.js"></script>

<!-- SCRIPT -->
 <script type='text/javascript'>
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>

CSS:

#menu {
	background-color: #ffffff;
width:155px;
padding:5px;
float:left;
border: 1px dotted #000000;
margin-top: 5px; 
margin-left: 2px; 
margin-right: 5px;
	color: #7b6b65;
}

p {
  line-height: 1.5em;
}

ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 15em;
}

ul#menu a {
  display: block;
  text-decoration: none;	
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {
  background: #333;
  color: #fff;	
  padding: 0.5em;
}

ul#menu li a:hover {
  background: #000;
}

ul#menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul#menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }

und mein TS

MENU1 = HMENU
MENU1 {
  special = directory
  special.value = 120

  1 = TMENU
  1 {
     expAll =1
    wrap = <ul id="menu">|</ul>
    noBlur = 1
    NO = 1
    NO {
      wrapItemAndSub = <li class= "menu li">|</li>
      stdWrap.htmlSpecialChars = 1
      ATagTitle.field = title
    }
    ACT <.NO
    ACT {
      wrapItemAndSub = <li class = "menu a:hover">|</li>
    }
  }

  2 < .1
  2 {
    wrap = <ul>|</ul>
    ACT.wrapItemAndSub = <li class = "menu li ul li a">|</li>
  }


}

Danke!