Help !! Glossy Accordion Menu with responsive headers
1) Script Title: Accordion Menu script (v1.3)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm
3) Describe problem: Menu Links not opening within the iFrame
Hi,
Im pretty new to HTML coding and would like some help on trying to get the menu links to open within the iFrame also.
At the moment all what is happening is when you click on the Submenu heading the URL is brought up in the iFrame but I want this to happen to all the links. So when you click on any link it appears in the iFrame.
I am currently working on Windows Sharepoint Services and using the Portal which only supports content editor webparts for using HTML code. So its pretty basic in terms of editing.
As you can see on the below image I have both scripts in working order however it just needs the final touches...... i.e. all linkages working within the iFrame, also I would like the homepage URL to be set as the defualt page that is shown in the iFrame when the page is opened.
The script itself is below:
I have tried to the best of my knowledge in changing the script but have failed misserably. Can someone please provide support into my query.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="http://hrportal.intranet.point/sites/MyHR/Tree%20Script/jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="http://hrportal.intranet.point/sites/MyHR/Tree%20Script/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 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='http://hrportal.intranet.point/sites/MyHR/Tree%20Script/plus.gif' class='statusicon' />", "<img src='http://hrportal.intranet.point/sites/MyHR/Tree%20Script/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 myiframe=window.frames["myiframe"] if (expandedindices.length>0) //if there are 1 or more expanded headers myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it myiframe.location.replace(header.getAttribute('href')) } } }) </script> <style type="text/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(http://hrportal.intranet.point/sites...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(http://hrportal.intranet.point/sites...ssyback2.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; } </style> </head> <body> <div class="glossymenu"> <a class="menuitem" href="http://www.dynamicdrive.com/">Homepage</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Absence & Attendance</a> <div class="submenu"> <ul> <li><a href="http://www.google.co.uk">Sick Absence</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Unauthorised Absence</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Family Friendly</a></li> </ul> </div> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Managing Employees</a> <div class="submenu"> <ul> <li><a href="http://www.javascriptkit.com/jsref/">Bullying and Harassment</a></li> <li><a href="http://www.javascriptkit.com/domref/">Conduct</a></li> <li><a href="http://www.cssdrive.com">Grievance</a></li> </ul> </div> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Document Library</a> <div class="submenu"> <ul> <li><a href="http://www.javascriptkit.com/jsref/">Absence & Attendance</a></li> <li><a href="http://www.javascriptkit.com/domref/">Managing Employees</a></li> </ul> </div> <a class="menuitem" href="http://www.dynamicdrive.com/">Ask MyHR</a> <a class="menuitem" href="http://www.dynamicdrive.com/">MyHR Advice Line</a> <a class="menuitem" href="http://www.dynamicdrive.com/">User Guide</a> <a class="menuitem" href="http://www.dynamicdrive.com/">MyHR Case Viewer</a> <a class="menuitem" href="http://www.dynamicdrive.com/">Management Information</a> </div> </body> </html>
Kind Regards
Thomas
CSS Codes
Reply With Quote
Bookmarks