Results 1 to 4 of 4

Thread: Glossy Accordion Menu script (v1.3)

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

    Default unable to add in another submenu into submenu div.

    guys my edited menu. i want it to be something like the breakdown below;
    i have been trying to edit here and there but yields no results

    menu1
    >submenu1a
    >submenu1a
    >submenu1a
    >submenu1a
    >submenu1a
    >>submenu1B
    >>submenu1B
    >>submenu1B
    >submenu1a
    >submenu1a
    menu2
    menu3


    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.js"></script>
    
    <script type="text/javascript" src="menu.js">
    
    
    </script>
    
    
    <script type="text/javascript">
    
    
    ddaccordion.init({
    	headerclass: ["submenuheader", "submenuheader1"], //Shared CSS class name of headers group
    	contentclass: ["submenu", "submenu1"], //Shared CSS class name of contents group
    	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
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "", "", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["suffix", "<img src='images/arrow_.gif' class='statusicon' />", "<img src='images/arrow_.gif' class='statusicon' />", "<img src='images/arrow_4.gif' class='statusicon1' />"], //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, isclicked){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    
    </script>
    
    
    <style type="text/css">
    
    .glossymenu{
    margin: 0px 0;
    padding: 0;
    width: 200px; /*width of menu*/
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }
    
    .glossymenu a.menuitem{
    background: black url(images/gradient1.gif) repeat-x bottom left;
    font: 12px Arial;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    height: 5px;
    padding: 5px;
    padding-left: 10px;
    text-decoration: none;
    }
    
    
    .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
    color: white;
    }
    
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 11px;
    right: 5px;
    border: none;
    }
    
    .glossymenu a.menuitem:hover{
    background-image: url(glossyback2.gif);
    }
    
    .glossymenu div.submenu{ /*DIV that contains each sub menu*/
    background: #d9e5f3;
    }
    
    .glossymenu div.submenu ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    .glossymenu div.submenu ul li{
    border-bottom: 1px solid #d9e5f3;
    }
    
    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 12px Arial;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
    }
    
    .glossymenu div.submenu ul li a:hover{
    background: #eff4fa;
    colorz: white;
    }
    
    .glossymenu divider{
    display: block;
    font-size: 1px;
    border-width: 0px;
    border-style: solid;
    position: relative;
    z-index: 1;
    }
    
    
    //////////////////
    ///////////////// start of submenu1////////////////////////////
    /////////////////
    
    .glossymenu a.menuitem1{
    background: black url(images/gradient1.gif) repeat-x bottom left;
    font: 12px Arial;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    height: 18px;
    padding: 5px;
    padding-left: 10px;
    text-decoration: none;
    }
    
    .glossymenu a.menuitem1 .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 11px;
    right: 5px;
    border: none;
    }
    
    .glossymenu div.submenu1{ /*DIV that contains each sub menu*/
    background: #d9e5f3;
    }
    
    .glossymenu div.submenu1 ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    .glossymenu div.submenu1 ul li{
    border-bottom: 1px solid #d9e5f3;
    }
    
    .glossymenu div.submenu1 ul li a{
    display: block;
    font: normal 12px Arial;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
    }
    
    .glossymenu div.submenu1 ul li a:hover{
    background: #eff4fa;
    colorz: white;
    }
    
    //////////////////
    ///////////////// end of submenu1////////////////////////////
    /////////////////
    
    </style>
    
    </head>
    
    <body>
    
    <div class="glossymenu">
    <a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >CSS Examples</a>
    <div class="submenu">
    	<ul>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
    	<div class="submenu1"><a class="menuitem1 submenu" href="http://www.dynamicdrive.com/style/" >Browse All</a></div>
    	</ul>
    </div>
    <div></div>
    <a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    <a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a>
    <a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a>
    <div class="submenu">
    	<ul>
    	<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
    	<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
    	<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    	</ul>
    	<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
    </div>
    <a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a>		
    </div>
    <img src="images\solutions.jpg">
    
    </body>
    </html>

  2. #2
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need Help!

    1) Script Title: Accordion Menu script (v1.3)

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

    3) Describe problem: i can't add another submenu into the existing submenu to make it looks like this;

    DEMO 2 Glossy Accordion Menu

    test1
    >submenu1
    >submenu1
    >>>submenu1a
    >>>submenu1a
    >submenu1
    >submenu1
    test2
    test3
    Last edited by jakekoh; 04-11-2008 at 05:57 AM.

  3. #3
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wicked script and works perfectly for a single sub category, but as many of us seem to need more sub categories can anyone shed any light on what needs to be done to achieve this?

    Thanks in advance

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

    Default if your still interested

    here is how i did it, its not the prettiest thing, but it works, it can all be edited through css. it uses the blue glossy images
    glossyback2.gif
    glossyback.gif

    so you may need to google them if you dont have them, or go here

    HTML Code:
    <div id="Menu">
    <div class="glossymenu">
    		<a class="menuitem submenuheader" href="http://www.arvig.info/admin/" >Navigation</a>
    		<div class="submenu">
    			<ul>
    			<li><a href="#">About Us</a></li>
    			<li><a href="#">Services/Products</a></li>
    			<li><a href="#">Employee Corner</a></li>
    			<li><a href="#">Instructional Forum</a></li>
    			<li><a href="#">Departments</a></li>
    			</ul>
    		</div>
    		
    		<a class="menuitem submenuheader" href="http://www.cssdrive.com">Content</a>
    		<div class="submenu">
    			<ul>
    			<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    			<li class="nested">
    			<a class="subexpandable" href="http://www.cssdrive.com">SUBSUB</a>
    			<div class="subcategoryitems">
    				<ul>
    					<li><a href="http://www.cssdrive.com">subsub1</a></li>
    					<li><a href="http://www.cssdrive.com/index.php/menudesigns/">subsub2</a></li>
    					<li><a href="http://www.cssdrive.com/index.php/news/">subsub3</a></li>
    					<li><a href="http://www.cssdrive.com/index.php/examples/">subsub4</a></li>
    					<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">subsub5</a></li>
    					<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">subsub6</a></li>
    				</ul>
    				
    			</div>
    			</li>
    			<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
    			<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    			</ul>
    		</div>
    		
    		<a class="menuitem submenuheader" href="http://www.cssdrive.com">Employee Directory</a>
    		<div class="submenu">
    			<ul>
    			<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
    			<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    			</ul>
    		</div>
    		<a class="menuitem submenuheader" href="http://www.cssdrive.com">Main Page Content</a>
    		<div class="submenu">
    			<ul>
    			<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
    			<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
    			<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    			</ul>
    		</div>
    		<a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Employee Directory</a>	
    	</div>
    	
    
    </div>

    css:
    Code:
    .glossymenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }
    
    .glossymenu a.menuitem{
    background: black url(glossyback.gif) repeat-x bottom left;
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    
    
    .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
    color: white;
    }
    
    .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(glossyback2.gif);
    }
    
    .glossymenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    }
    
    .glossymenu div.submenu ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    .glossymenu div.submenu ul li{
    border-bottom: 1px solid blue;
    }
    
    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
    }
    
    .glossymenu div.submenu ul li a:hover{
    background: #DFDCCB;
    colorz: white;
    }
    .subexpandable {
    	
    	background: lightblue;
    }
    .subcategoryitems {
    	margin-left: 15px;
    	background:lightblue;
    }
    .glossymenu div.submenu .subcategoryitems ul li {
    	border: none;
    	border-top: 1px solid #555;
    	
    	}
    .nested {
    	border: none;
    }

    javascript:
    Code:
    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
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //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: "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
    	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: ["none", "", ""], //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
    	}
    })

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
  •