Log in

View Full Version : Glossy Accordion Menu script (v1.3)


jakekoh
04-11-2008, 02:18 AM
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



<!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>
jakekoh
04-11-2008, 02:34 AM
1) Script Title: Accordion Menu script (v1.3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.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
desk2web
04-14-2008, 08:29 PM
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
robisaks
06-17-2008, 05:33 PM
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 (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm)


<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:


.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:


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
}
})