Drop Down mit CSS und jQuery

Long Huoyan
Autor
Neues Mitglied

Mehr

29 Aug. 2014 01:58 - 29 Aug. 2014 10:55 #39539 von Long Huoyan

Drop Down mit CSS und jQuery wurde erstellt von Long Huoyan

Grüße euch,

habe ein DropDown Menu in Verwendung das mit einem Sub Menu derzeit arbeitet.
Ich bräuchte aber zu den einem Sub Menu ein weiteres, in etwa so

Menu 1
Menu 2
- Sub Menu 1
- Sub Menu 2
  - Sub Sub Menu 1
  - Sub Sub Menu 2
- Sub Menu 3
Menu 3
Menu 4

Kann man sich vorstellen was ich meine?
Hier mal ein Link zur HP Klick! Es handelt sich um das Menü links im Slider. Und hier der passende Code dazu:

JS

Code:

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
} )( jQuery );

CSS

Code:

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a
{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family: sans-serif;
    font-size: 1em;
    position: relative;
}

#cssmenu
{
    width: 150px;
}

#cssmenu a
{
    line-height: 1.3;
}

#cssmenu > ul > li
{
    background: #8b9f1b;
}

#cssmenu > ul > li:hover
{
    background: #677813;
}

#cssmenu > ul > li > a
{
    font-size: .9em;
    display: block;
    background: url(../images/menu/pattern.png) top left repeat;
    color: #ffffff;
    border: 1px solid #58631e;
    border-top: none;
    padding: 12px 10px;
}

#cssmenu > ul > li > a
{
    display: block;
    padding: 12px 10px;
}

#cssmenu > ul > li > a:hover
{
    text-decoration: none;
}

#cssmenu > ul > li.active
{
    border-bottom: none;
}

#cssmenu > ul > li.has-sub > a
{
    background: url(../images/menu/icon_plus.png) 96% center no-repeat;
}

#cssmenu > ul > li.has-sub.active > a
{
    background: url(../images/menu/icon_minus.png) 96% center no-repeat;
}

#cssmenu > ul > li.deeper.parent > a
{
     background: url(../images/icon_plus.png) no-repeat scroll 96% center transparent;
}

#cssmenu > ul > li.deeper.parent.active > a
{
     background: url(../images/icon_minus.png) no-repeat scroll 96% center transparent;
}

#cssmenu ul ul
{
    max-width: 148px;
    display: none;
    background: #fff;
    border-right: 1px solid #a2a194;
    border-left: 1px solid #a2a194;
}

#cssmenu ul ul li
{                   
    max-width: 148px;    
    padding: 0;
    border-bottom: 1px solid #d4d4d4;
    border-top: none;
    background: #f7f7f7;
}

#cssmenu ul ul li:last-child
{
    border-bottom: none;
}

#cssmenu ul ul a
{
    padding: 10px 10px 10px 25px;
    display: block;
    color: #676767;
    font-size: .8em;
    font-weight: normal;
}

#cssmenu ul ul a:before
{
    content: '\00BB';
    position: absolute;
    left: 10px;
    color: #000;
}

#cssmenu ul ul a:hover
{
    color: #8b9f1b;
}                                           

Danke für die Hilfe

Moderatoren: pascale, adiheutschi.ch, Tribal6, RePao, Dragonlord, Chris Hoefliger

Joomla! Forum Schweiz wird Teil der D-A-CH Community

forum.joomla.de

Drop Down mit CSS und jQuery