Witam. Mam mały problem dotyczący rozwijania menu. Korzystam z gotowego szablonu html + css + js. Chciałbym osiągnąć ustawienie tego tak, żeby całe zachowanie mechanizmu było takie same, jednak np Menu 2 było rozwinięte podczas wczytania strony i dało się go zwinąć.

Próbowałem w <li class="sublink"> zmienić na <li class="sublink opened">, bez zmian.

Jak coś do dośle jeszcze ddaccordion.js.

HTML
  1. <li class="sublink">
  2. <div><a href="#"><span>Menu</span></a></div>
  3. <li class="dropmenu" style="display: block;">
  4. <ul class="submenu">
  5. <li><a href="">Test</a></li>
  6. <li><a href="">Test2</a></li>
  7. <li><a href="">Test3</a></li>
  8. </ul>
  9. </li>
  10. </li>
  11. <li class="sublink">
  12. <div><a href="#"><span>Menu2</span></a></div>
  13. <li class="dropmenu" style="display: block;">
  14. <ul class="submenu">
  15. <li><a href="">Test4</a></li>
  16. <li><a href="">Test5</a></li>
  17. <li><a href="">Test6</a></li>
  18. </ul>
  19. </li>
  20. </li>


JS
ddaccordion.init({
headerclass: "sublink",
contentclass: "submenu",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: false,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["closed", "opened"],
togglehtml: ["none", "", ""],
animatespeed: "fast",
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
});

CSS
.navi ul > li:hover > div {
text-decoration: none;
background: #1b1b1b;
-webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.43);
-moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.43);
box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.43);
}
.navi ul > li {
background: url("../images/sep_9.png") repeat-x center bottom;
padding: 0 0 3px 0;
}
.navi ul > li:last-child {
background: none;
}
.navi ul > li:hover > div a, .navi ul > li.opened > div a {
color: #5b79a4;
background: url(../images/arrow_13.png) no-repeat 8px 9px;
}
.navi ul > li.opened:hover div {
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navi ul > li.sublink > div span {
background: url(../images/arrow_16.png) no-repeat 97% 8px;
}
.navi ul > li.opened > div span, .navi ul > li.sublink:hover > div span {
background: url(../images/arrow_17.png) no-repeat 97% 8px;
}
.navi ul > li > div a, .navi ul > li.opened > div > a:hover {
font-size: 14px;
text-decoration: none;
color: #c6c6c6;
text-shadow: 0 1px 0 rgba(0,0,0,0.64);
height: 30px;
color: #a1a1a1;
line-height: 27px;
padding: 0 0 0 31px;
background: url(../images/arrow_12.png) no-repeat 8px 9px;
}
.navi ul li ul {
margin: 0 9px 7px 9px;
background: #2b2b2b;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(54, 54, 54, 0.75), 0px 1px 3px 0px rgba(0, 0, 0, 0.23);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(54, 54, 54, 0.75), 0px 1px 3px 0px rgba(0, 0, 0, 0.23);
box-shadow: inset 0px 1px 0px 0px rgba(54, 54, 54, 0.75), 0px 1px 3px 0px rgba(0, 0, 0, 0.23);
}
.navi ul li ul.submenu li {
height: 27px;
line-height: 27px;
background: url(../images/sep_10.png) repeat-x center bottom;
padding: 0 0 2px 0;
}
.navi ul li ul.submenu li:last-child {
background: none;
}
.navi ul li ul.submenu li:first-child a {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.navi ul li ul.submenu li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.navi ul li ul li a {
padding: 0 0 0 27px;
background: url(../images/arrow_15.png) no-repeat 8px 8px;
color: #b3b3b3;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
}
.navi ul li ul li a:hover {
color: #ad3535;
background: #272727 url(../images/arrow_14.png) no-repeat 8px 8px;
text-decoration: none;
}