PDA

View Full Version : Glossy Accordion Menu - Subsubitem allways open ?



scroll
12-09-2008, 07:19 PM
1) Script Title: Glossy Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-glossy.htm

3) Describe problem: i´m using a customized script in order to get something like this:

>menuitem
>menuitem
>>submenuitem
>>>prod_1
>>>prod_2
>menuitem

the problem is that, when i click on the menuitem, the submenuitem remains open.
...and also, i can´t get the menuitem and the prod_id highlighted when they´re selected.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">

ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "selected", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, 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
}
})
ddaccordion.init({ //2nd level headers initialization
headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable
contentclass: "subcategoryitems", //Shared CSS class name of sub contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, 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
}
})

</script>
<style type="text/css">
body {
background-color: #666666;
}
* {
outline: none;
}
.glossymenu{
margin: 5px 0;
padding: 0;
width: 146px; /*width of menu*/
border-bottom-width: 0;
}

.glossymenu a.menuitem{
font: normal 11px Verdana, Helvetica, sans-serif;
color: #ff9933;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 2px 0;
padding-left: 10px;
text-decoration: none;
height: 15px;
color: #333333;
}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{

}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
/*background-image: url("../../images/main/bk_menu_xl_on.jpg");*/
background-color: #333333;
color: #ff9933;
}

.glossymenu a.selected{
background-color: #333333;
color: #ff9933;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background-color: #666666;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 5px;
}

.glossymenu div.submenu ul li{

}

.glossymenu div.submenu ul li a{
display: block;
font: normal 11px Verdana, Helvetica, sans-serif;
color: #ff9933;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
height: 15px;
}

.glossymenu div.submenu ul li a:hover{
/*background-image: url("../../images/main/bk_menu_xl_on.jpg");*/
background-color: #333333;
color: #ff9933;
}
.glossymenu div.submenu a:active{
/*background-image: url("../../images/main/bk_menu_xl_on.jpg");*/
background-color: #333333;
color: #ff9933;
}
.glossymenu div.submenu a:select{
/*background-image: url("../../images/main/bk_menu_xl_on.jpg");*/
background-color: #333333;
color: #ff9933;
}

.opensubheader {
/*background-image: url("../../images/main/bk_menu_xl_on.jpg");*/
background-color: #333333;
color: #ff9933;
}
.closedsubheader {
/*background-image: url("../../images/main/bk_menu_xl_on.jpg");*/
background-color: #333333;
color: #ff9933;
}

.subexpandable {
background:#666666;
}
.subcategoryitems {
margin-left: 15px;
background:#666666;
color: #ff9933;
}
.glossymenu div.submenu .subcategoryitems ul li {
border: none;
}
.nested {
border: none;
}

</style>

</head>

<body>

<div id="Menu">
<div class="glossymenu">
<a class="menuitem" href="index.php" style="border-bottom: #333333 1px solid;">HOME</a>
<a class="menuitem" href="x.php" style="border-bottom: #333333 1px solid;">OUR CONCEPT</a>
<a class="menuitem submenuheader" style="border-bottom: #333333 1px solid;" href="#">PRODUCTS</a>
<div class="submenu">
<ul>

<li class="nested">
<a class="subexpandable" href="http://www.cssdrive.com">DOORS</a>
<div class="subcategoryitems">
<ul>
<li><a href="x.php">subsub1</a></li>
<li><a href="x.php">subsub2</a></li>
<li><a href="x.php">subsub3</a></li>
<li><a href="x.php">subsub4</a></li>
<li><a href="x.php">subsub5</a></li>
<li><a href="x.php">subsub6</a></li>
</ul>
</div>
</li>

<li class="nested">
<a class="subexpandable" href="http://www.cssdrive.com">SIGNAGE</a>
<div class="subcategoryitems">
<ul>
<li><a href="x.php">subsub1</a></li>
<li><a href="x.php">subsub2</a></li>
<li><a href="x.php">subsub3</a></li>
<li><a href="index.php">subsub4</a></li>
<li><a href="index.php">subsub5</a></li>
<li><a href="index.php">subsub6</a></li>
</ul>
</div>
</li>

<li class="nested">
<a class="subexpandable" href="http://www.cssdrive.com">BALCONIES</a>
<div class="subcategoryitems">
<ul>
<li><a href="x.php">subsub1</a></li>
<li><a href="x.php">subsub2</a></li>
<li><a href="x.php">subsub3</a></li>
<li><a href="x.php">subsub4</a></li>
<li><a href="x.php">subsub5</a></li>
<li><a href="x.php">subsub6</a></li>
</ul>
</div>
</li>
</ul>
</div>
<a class="menuitem" href="x.php" style="border-bottom: #333333 1px solid;">STORES</a>
<a class="menuitem" href="x.php" style="border-bottom: #333333 1px solid;">CONTACTS</a>
</div>
</div>
</body>
</html>


Any ideias ?

Regards,

ddadmin
12-10-2008, 08:08 AM
Are you asking how to ensure the sub menus within a main menu header are closed when the user clicks on the later to view the former again? Try turning off persistence in your sub menu's configuration code:


defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?


and also, i can´t get the menuitem and the prod_id highlighted when they´re selected.

This has been asked quite a few times. Please do a search. There's no one way to do it...