Hallo Liebe Freunde des jquery-codings,
wäre super wenn mir jemand helfen könnte:
Habe alles soweit probiert, komme aber leider nicht weiter:
Das auf- und zuklappen des vertikalen Menues mittels accordion-effekt funktioniert soweit, jedoch passiert es immer wieder, dass beim ersten mal mir die Listenelemente dazwischenfunken und so ein
unschöner "hover"-Effekt entsteht, den ich einfach nicht wegbekomme.
Anzusehen ist das ganze unter http://www.eleganz.maklerhomepage24.de/vergleiche.html
Hier mein javascript-Code (im Template unter "eigener Javascript-Code" eingebunden):
Code:
<script type="text/javascript">
( function( $ ) {
$( document ).ready(function() {
$('#submenu > ul > li > a ').mouseenter(function() {
var checkElement = $(this).next();
$('#submenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('slow');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#submenu ul ul:visible').slideUp('slow');
checkElement.slideDown('slow');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
} )( jQuery );
</script>
hier mein HTML - Code:
HTML-Code:
nav id="submenu" class="mod_navigation block">
<ul class="vlist level_1">
<li class="submenu noborder_left first">
<a class="submenu noborder_left first" title="Haus und Wohnung" href="haus-und-wohnung.html">Haus und Wohnung</a>
<ul class="vlist level_2" style="display: block;">
</li>
<li class="submenu noborder_left">
<a class="submenu noborder_left" title="Gesundheit und Risiko" href="gesundheit-und-risiko.html">Gesundheit und Risiko</a>
<ul class="vlist level_2" style="">
</li>
<li class="submenu noborder_left">
<li class="submenu noborder_left">
<li class="submenu noborder_left">
<li class="submenu noborder_left">
<li class="submenu noborder_left last">
</ul>
</nav>
die entsprechenden CSS-Anweisungen:
Code:
#submenu {/*margin-bottom: 25px; margin-top: 180px; position: fixed; margin-bottom: 25px; */
margin-top: 25px;
max-width: 80%;
position: relative;
min-height: 800px;
height: 100%
}
/*#submenu a {display: block; padding: 4px 10px; margin-bottom: 0; -webkit-transition: All 0.1s ease; -moz-transition: All 0.1s ease; -o-transition: All 0.1s ease; -ms-transition: All 0.1s ease; transition: All 0.1s ease;} */
#submenu a {
display: table;
padding: 4px 10px;
margin-bottom: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
/*background: #072540; */
color: #fff;
text-decoration: none;
}
/* neu */
#submenu ul li a {
display: table;
margin-top: 1px;
/*padding: 14px 10px;*/
width: 100%;
/*background: #337D88;*/
text-decoration: none;
text-align: left;
vertical-align: middle;
color: #fff;
overflow: hidden;
-webkit-transition-property: background;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
#submenu li ul li {border: 0;}
#submenu ul ul {margin-left: /*12px;*/0;}
/*#submenu a:hover, #submenu a.active {color: #0093B5; background: #f8f8f8; margin-left: 4px;}*/
/*#submenu a:hover {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
#submenu > li:hover li a {
display: table;
margin-top: 1px;
padding: 10px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
#submenu > li:hover li a:hover {
background: #A4CAC8;
-webkit-transition-property: background;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
}
/* neu - 30-07-2015 - accordion menue
#submenu li.submenu.first{
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#submenu ul ul li:target > .submenu.first{ height: 120px;}
---------------------- http://designmodo.com/css3-accordion-menu/ */
#submenu a.active {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
}
#submenu a.active.trail {background: inherit; color: inherit;}
/* 1. Ebene */
#submenu ul.vlist.level_1 { visibility:visible; opacity:1; transition-delay:5s; }
#submenu li.submenu.first { padding: 0; background: #072540;
}
#submenu li.trail.first { background-color: #072540; /*font-size: 12px; */
/* Minimale Höhe - entsprechend ändern
min-height: 300px;
height: 100%; */
}
/* 1. Ebene - weitere Punkte */
#submenu li.noborder_left { background-color: #072540;
/*font-size: 12px; */
}
#subemnu li .noborder_left a {
display: table;
/*margin-top: 0;
padding: 0 10px;
height: 0;*/
background: #C6DDD9;
color: #1F3D39;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in;
}
/* 1. Ebene - Ende */
/* 2. Ebene */
#submenu ul ul li {padding: 0; background: #5C768E; font-size: 12px;
display: table;
margin-top: 1px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in;
/*position: absolute;
z-index: -1;*/
}
#submenu li.submenu.noborder_left_2.last { padding: 0; background: #072540;
display: table;
margin-top: 1px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
/* 2. Ebene - Ende */
/*#submenu ul li:hover > ul { display: block; /*height: auto;*/
/*
} */
#submenu ul li.active > ul, #submenu ul li.trail > ul {display: block; /*height: auto;*/ width: 250px; max-width: 100%;}
#submenu ul ul {display: none;
/* neu
position: absolute;
height: auto;
overflow: hidden; */
/*display: table;
margin-top: 1px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out; */
}
#submenu ul ul ul {display: none;}
#submenu ul ul ul ul {display: none;}
/* hover */
#submenu a:hover {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
display: table;
margin-top: 1px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
#submenu a.active {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
}
Vielen Dank für Eure Hilfe.
jquery - vertikales accordion menue ul li ohne dropdown
Zitieren