PDA

View Full Version : Glossy Accordion Menu: Icons Shifting



Kali_Demidarkness
06-27-2013, 03:51 PM
1) Script Title: Glossy Accordion Menu

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

3) Describe problem: When clicking through the expandable menu items, the status icons will shift and sometimes become buried under the menu. I have changed the icons to some arrows, but this also happens with the original plus/minus icons from the site. I don't yet have a place to upload this, so you might have to try it out in N++ to see what's up. I have attached the arrow icons for this purpose.



<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>
<script src="ddaccordion.js" type="text/javascript"></script>
<style type="text/css">
.glossymenu{
width: 150px; /*width of menu*/
border-bottom-width: 0;
list-style-type:none;
text-decoration:none;
text-align:left;
padding: 0px;
margin-left:200px;
margin-top:20px;
}

.glossymenu a.subhead{
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
border-radius: 4px;
font: bold 18px "Times New Roman", Times, serif;
color: #757575;
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;
list-style-type:none;
}

.glossymenu a.head{
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
border-radius: 4px;
font: bold 18px "Times New Roman", Times, serif;
color: #757575;
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;
list-style-type:none;
}

.glossymenu a.subhead:visited, .glossymenu .subhead:active{
color: #757575;
}

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

.glossymenu a.subhead:hover{
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
color:white;
}

.glossymenu a.head:hover{
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
color:white;
}

.glossymenu div.sub{ /*DIV that contains each sub menu*/
background: #efefef;
}

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

.glossymenu div.sub ul li{
border-bottom: 1px solid #575f6a;
}

.glossymenu div.sub ul li a{
display: block;
font: normal 17px "Times New Roman", Times, serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.sub ul li a:hover{
background: #4b545f;
color:white;
}
</style>
<script type="text/javascript">
ddaccordion.init({
headerclass: "subhead", //Shared CSS class name of headers group
contentclass: "sub", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
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: ["ex", "coll"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='arrow_right.png' class='statusicon' />", "<img src='arrow_down.png' 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: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized

},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed

},
});
</script>
</head>


<body>
<div class="glossymenu">
<a class="subhead" href="#">Rulers</a>
<div class="sub">
<ul>
<li><a href="#">Fabric-Gripping</a></li>
<li><a href="#">Lap Boards, Squares, & Triangles</a></li>
<li><a href="#">Westalee Adjustable</a></li>
<li><a href="#">Metric</a></li>
<li><a href="#">Specialty</a></li>
<li><a href="#">Long</a></li>
</ul>
</div>
<a class="subhead" href="#">Mats</a>
<div class="sub">
<ul>
<li><a href="#">Turn Table</a></li>
<li><a href="#">Pinable</a></li>
</ul>
</div>
<a class="subhead" href="#">Design Tools</a>
<div class="sub">
<ul>
<li><a href="#">Graph Sheets</a></li>
<li><a href="#">Reusable Vinyl Graph Templates</a></li>
<li><a href="#">Translucent Paper</a></li>
</ul>
</div>
<a class="subhead" href="#">Templates</a>
<div class="sub">
<ul>
<li><a href="#">Machine Quilting Templates</a></li>
<li><a href="#">Inside Collection</a></li>
<li><a href="#">Westalee</a></li>
<li><a href="#">Design/Drawing Tools</a></li>
<li><a href="#">Nested Templates</a></li>
<li><a href="#">Nautilus Tool Collection</a></li>
<li><a href="#">Ronda's Rulers</a></li>
<li><a href="#">Specialty Tools</a></li>
<li><a href="#">Spine/Vine Tools</a></li>
<li><a href="#">Radical Ruler Collection</a></li>
</ul>
</div>
<a class="head" href="#">Notions</a>
<a class="head" href="#">Gift Sets</a>
</div>
</body>
</html>

ajfmrf
06-27-2013, 06:26 PM
Using firefox 22.0 it works/looks fine.

The right arrow changes to the down arrow when clicking one of the options(with the right arrow)

The down arrows are in full site and are not cut off or covered or missing.

Kali_Demidarkness
06-27-2013, 06:32 PM
Hmm must be just Chrome. I tried it just now in IE as well and it works fine. Thanks.