Advanced Search

Results 1 to 3 of 3

Thread: Glossy Accordion Menu: Icons Shifting

  1. #1
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Glossy Accordion Menu: Icons Shifting

    1) Script Title: Glossy Accordion Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-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.

    Code:
    <!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>
    Attached Images Attached Images   

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

    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.
    Thanks,

    Bud

  3. The Following User Says Thank You to ajfmrf For This Useful Post:

    Kali_Demidarkness (06-27-2013)

  4. #3
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hmm must be just Chrome. I tried it just now in IE as well and it works fine. Thanks.

Similar Threads

  1. Status icons don't appear on Accordion menu - help!
    By taygraphics in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-15-2011, 04:55 PM
  2. Glossy Accordion Menu: blank images icons in IE9
    By orenlebbo in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-15-2011, 08:41 PM
  3. Accordion menu issue: Cannot center align icons to left of submenu items...
    By AshleyQuick in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-23-2009, 11:08 AM
  4. Accordion Menu: Bottom of Menu Shifting During Animation
    By bschnitkey in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-12-2008, 06:32 PM
  5. Adding icons to Accordion Menu: menuitem and submenuheader
    By tuva trader in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-02-2008, 03:30 AM

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
  •