Hallo hab folgendes Problem
Ich will das man auf meiner Webseite mehrere Untermenüs erstellen kann , hab schon folgendes ausprobiert:
<dl class="main-menu">
<dt data-ref="Name6"><a href="#">Name1</a></dt>
</dl>
funktioniert auch nur das submenu c einfach über das voherige submenü (submenu b) über geblendet wird und nicht nach unten slidet , sowie es bei den übergeordneten menüpunkten ( Submenu a zu submenu b) funktioniert .
hier mal mein ganzer code:
<head>
<!--Jquery-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
dl:not(.main-menu){display: none;}
.menu-desktop {
list-style: none;
text-align: center;
}
.menu-desktop dt {
display: inline;
}
.main-menu {
list-style: none;
text-align: center;
}
.main-menu {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<nav class="menu-desktop">
<dl class="main-menu">
<dt data-ref="Name1"><a href="#">Submenu a</a></dt>
<dt data-ref="Name2"><a href="#">Submenu a</a></dt>
</dl>
<dl class="Name1">
<dl class="main-menu">
<dt data-ref="Name6"><a href="#">Submenu b klick mich</a></dt>
</dl>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="$">Submenu b</a></dt>
</dl>
<dl class="Name2">
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
</dl>
<dl class="Name6">
<dt><a href="#">Submenu c</a></dt>
<dt><a href="#">Submenu c</a></dt>
<dt><a href="#">Submenu c</a></dt>
</dl>
</nav>
</div>
<script type="text/javascript">
//MENÚ DESKTOP
var submenu;
$('.main-menu dt').click(function(){
var elems = $('dl:not(.main-menu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('dl:not(.main-menu)').slideUp(220, function() {
if (elems == 1) {
if (!visible) $refClass.slideDown('220');
}
elems--;
});
});
</script>
</body>
</html>
würde mich sehr über Hilfe freuen :)
Ich will das man auf meiner Webseite mehrere Untermenüs erstellen kann , hab schon folgendes ausprobiert:
<dl class="main-menu">
<dt data-ref="Name6"><a href="#">Name1</a></dt>
</dl>
funktioniert auch nur das submenu c einfach über das voherige submenü (submenu b) über geblendet wird und nicht nach unten slidet , sowie es bei den übergeordneten menüpunkten ( Submenu a zu submenu b) funktioniert .
hier mal mein ganzer code:
<head>
<!--Jquery-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
dl:not(.main-menu){display: none;}
.menu-desktop {
list-style: none;
text-align: center;
}
.menu-desktop dt {
display: inline;
}
.main-menu {
list-style: none;
text-align: center;
}
.main-menu {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<nav class="menu-desktop">
<dl class="main-menu">
<dt data-ref="Name1"><a href="#">Submenu a</a></dt>
<dt data-ref="Name2"><a href="#">Submenu a</a></dt>
</dl>
<dl class="Name1">
<dl class="main-menu">
<dt data-ref="Name6"><a href="#">Submenu b klick mich</a></dt>
</dl>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="$">Submenu b</a></dt>
</dl>
<dl class="Name2">
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
<dt><a href="#">Submenu b</a></dt>
</dl>
<dl class="Name6">
<dt><a href="#">Submenu c</a></dt>
<dt><a href="#">Submenu c</a></dt>
<dt><a href="#">Submenu c</a></dt>
</dl>
</nav>
</div>
<script type="text/javascript">
//MENÚ DESKTOP
var submenu;
$('.main-menu dt').click(function(){
var elems = $('dl:not(.main-menu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('dl:not(.main-menu)').slideUp(220, function() {
if (elems == 1) {
if (!visible) $refClass.slideDown('220');
}
elems--;
});
});
</script>
</body>
</html>
würde mich sehr über Hilfe freuen :)
