Results 1 to 2 of 2

Thread: Glossy Accordion Menu - Subsubitem allways open ?

  1. #1
    Join Date
    Dec 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Glossy Accordion Menu - Subsubitem allways open ?

    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.

    Code:
    <!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,
    Last edited by scroll; 12-09-2008 at 07:26 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    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...
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •