Dynamic Accordian Menu - Stay Open?
Hi,
I've developed an accordian menu seen on left hand side here:
http://quarsh.worldsecuresystems.com/
Managed to get it all working so that when the top item is clicked it opens the submenus and other items without submenus remain as standard links.
I would now like to be able to force the submenu items to stay open if possible. It's acceptable to have to put some special code in relative areas in the dynamic menu editor or in templates.
Anyone got any pointers?
Many thanks,
Tom
Hello Tom,
If you want to keep the submenu open when you are on those pages you should just need some css.
For the hidden ul, when we are within the "What We Do" section would just be:
#nav ul li.selected ul{
display: block;
You will still be able to click the "what we do" link to make the ul hide, but it will show on page load.
Hope this helps,
Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7
Similar Messages
-
Why doesnt my paint brush selection menu stay open longer then a few seconds?
Inside elements 12... I am trying to select a different brush option in the drop down menu in the tools tab... it will only stay open for a short 1 second period and then closes the menu quickly... not even long enough to change the brush? Cant fix, did a restart. Not sure why its happening.
Try to reset the tool. On the tool's option bar, look for this:
-
Using Spry Menu 1.6.1 and Safari 3.2.1, if the user's mouse
leaves the browser window while the menu is still open (there's a
half second closing delay by default), the menu will never close
until the user returns to hover on that menu item and then leaves
normally (ie. with the mouse staying within the page boundaries).
For example, on the sample page (
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
)... if a user hovers to open a menu then quickly moves the mouse
off the side of the page (left side in this case), the menu will
never close.
I filed a bug report but I was hoping there is a work-around
for the time being."jodansmif" <[email protected]> wrote in
message
news:gmi2f6$jr3$[email protected]..
> Ah, I got him back on the phone and figured out that I
can duplicate this
> on
> Windows Safari 3.1 as well.
>
> Basically, if you scroll that sample page
> (
http://www.projectseven.com/testing/customers/spry46/)
so that one of the
> menus is flush with the top of the window, then
mouseover a menu item to
> open
> it, then move the mouse out of the html window into the
Safari chrome, the
> menu
> item will stay open, even if you return the mouse to the
html window.
>
> For me, this only happens when I leave a menu by the
top, into the browser
> chrome. The Mac tester claims he can go out of the
window in any
> direction,
> causing this same behavior.
>
> I appreciate your help... sadly the boss is a Mac user
and this is driving
> him
> bananas!
I see. The menu has to be perfectly flush (or under) the
window edge. I
would think it is a spry script issue as I cannot duplicate
this with our
menu at all:
http://www.projectseven.com/products/menusystems/pmm2/carbon.htm
If I load the above page and scroll the window down so that
the top menu bar
is abutting the top edge of the window, our closer function
seems to be
firing perfectly.
Good luck with your boss and if Adobe can't give you a fix,
there are always
alternatives :-)
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System -
How to get active tab in Accordian to stay open
Hi
I am using accordian as menu system. However, any time I click on one of the menu items, the tab that I'm in closes and the first one opens. This is the page: http://gmtacticians.co.za/aircharter/aircraft.html
Any help would be most appreciated
Thanks!Hello!
I think what you are trying to achieve may be easier done with a different effect. How about collapsible panels :::
<script src="file:///SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="file:///SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel" tabindex="0" style="background-color:e5f5fd">
<div class="CollapsiblePanelTab" tabindex="0"><img src="images/images/aircraft_menu_on_02.jpg" width="168" border="0"></div>
<div class="CollapsiblePanelContent"><a href="aircraftil76.html" onMouseOver= "image19.src=loadImage19.src;" onMouseOut="image19.src=staticImage19.src;"><img src="images/images/aircraft_menu_off_12.jpg" width="168" border="0" name="image19">
</a><br>
<a href="aircraftdc8.html" onMouseOver= "image21.src=loadImage21.src;" onMouseOut="image21.src=staticImage21.src;"><img src="images/images/aircraft_menu_off_14.jpg" width="168" border="0" name="image21">
</a><br>
<a href="aircraftb767300.html" onMouseOver= "image23.src=loadImage23.src;" onMouseOut="image23.src=staticImage23.src;"><img src="images/images/aircraft_menu_off_16.jpg" width="168" border="0" name="image23">
</a><br>
<a href="aircraftb767200.html" onMouseOver= "image24.src=loadImage24.src;" onMouseOut="image24.src=staticImage24.src;"><img src="images/images/aircraft_menu_off_17.jpg" width="168" border="0" name="image24">
</a><br>
<a href="aircraftb757200f.html" onMouseOver= "image25.src=loadImage25.src;" onMouseOut="image25.src=staticImage25.src;"><img src="images/images/aircraft_menu_off_18.jpg" width="168" border="0" name="image25">
</a><br>
<a href="aircraftb727200.html" onMouseOver= "image27.src=loadImage27.src;" onMouseOut="image27.src=staticImage27.src;"><img src="images/images/aircraft_menu_off_20.jpg" width="168" border="0" name="image27">
</a><br>
<a href="aircraftan22.html" onMouseOver= "image28.src=loadImage28.src;" onMouseOut="image28.src=staticImage28.src;"><img src="images/images/aircraft_menu_off_21.jpg" width="168" border="0" name="image28">
</a><br>
<a href="aircrafta310300f.html" onMouseOver= "image30.src=loadImage30.src;" onMouseOut="image30.src=staticImage30.src;"><img src="images/images/aircraft_menu_off_23.jpg" width="168" border="0" name="image30">
</a><br>
<a href="aircrafta300.html" onMouseOver= "image31.src=loadImage31.src;" onMouseOut="image31.src=staticImage31.src;"><img src="images/images/aircraft_menu_off_24.jpg" width="168" border="0" name="image31">
</a><br>
<img src="images/images/aircraft_menu_off_25.jpg" width="168" border="0">
</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="images/images/aircraft_menu_on_03.jpg" width="168" border="0"></div>
<div class="CollapsiblePanelContent"> <a href="aircraftdc10.html" onMouseOver= "image20.src=loadImage20.src;" onMouseOut="image20.src=staticImage20.src;"><img src="images/images/aircraft_menu_off_13.jpg" width="168" border="0" name="image20">
</a><br>
<a href="aircraftil96.html" onMouseOver= "image18.src=loadImage18.src;" onMouseOut="image18.src=staticImage18.src;"><img src="images/images/aircraft_menu_off_11.jpg" width="168" border="0" name="image18">
</a><br>
<a href="aircraftmd11.html" onMouseOver= "image17.src=loadImage17.src;" onMouseOut="image17.src=staticImage17.src;"><img src="images/images/aircraft_menu_off_10.jpg" width="168" border="0" name="image17">
</a><br>
<a href="aircraftb777300.html" onMouseOver= "image22.src=loadImage22.src;" onMouseOut="image22.src=staticImage22.src;"><img src="images/images/aircraft_menu_off_15.jpg" width="168" border="0" name="image22">
</a><br>
<a href="aircraftbb747800.html" onMouseOver= "image26.src=loadImage26.src;" onMouseOut="image26.src=staticImage26.src;"><img src="images/images/aircraft_menu_off_19.jpg" width="168" border="0" name="image26">
</a><br>
<a href="aircrafta330200.html" onMouseOver= "image29.src=loadImage29.src;" onMouseOut="image29.src=staticImage29.src;"><img src="images/images/aircraft_menu_off_22.jpg" width="168" border="0" name="image29">
</a><br>
<img src="images/images/aircraft_menu_off_25.jpg" width="168" border="0">
</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="images/images/aircraft_menu_on_04.jpg" width="168" border="0"></div>
<div class="CollapsiblePanelContent"><a href="aircraftb747200.html" onMouseOver="image13.src=loadImage13.src;" onMouseOut="image13.src=staticImage13.src;"><img src="images/images/aircraft_menu_off_05.jpg" width="168" border="0" name="image13"></a><br>
<a href="aircraftb747400.html" onMouseOver="image14.src=loadImage14.src;" onMouseOut="image14.src=staticImage14.src;"><img src="images/images/aircraft_menu_off_06.jpg" width="168" border="0" name="image14"></a><br>
<a href="aircraftan124.html" onMouseOver="image15.src=loadImage15.src;" onMouseOut="image15.src=staticImage15.src;"><img src="images/images/aircraft_menu_off_07.jpg" width="168" border="0" name="image15"></a><br>
<a href="aircraftan225.html" onMouseOver="image16.src=loadImage16.src;" onMouseOut="image16.src=staticImage16.src;"><img src="images/images/aircraft_menu_off_08.jpg" width="168" border="0" name="image16"></a><br />
<img src="images/images/aircraft_menu_off_25.jpg" width="168" border="0">
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
</script>
This will give the desired effect - drops down like accordian but each panel remains open until you tell it to close - ie each is independant of the other. Just copy and paste the above in and include the relevant css & js to see what you think
Andy -
Force vertical menu bar to stay open on loaded pages
I am creating a new site using Dreamweaver CS3, temporarily uploaded at:
http://www.sharpeacademy.co.uk/nick-jackson.co.uk/sharpeacademy/theatrearts/
I have a navigation bar with the usual main tabs and sub tabs. Is it possible to configure this so that each section of the nav menu stays open when any of the pages linked to the sub-menus are selected?
Hope that makes sense!OK just managed to resolve the ftp issue. Bit tricky as our
old (average) website is still on the same server.
Anyway please check this link.
http://www.klanntools.co.uk/Contact%20Us%20pagehtm.htm
As you can see it works fine in FF but not in IE7. The child
sub menus keep appearing at the top of the vertical menu
bar. -
Stop bookmark menus from staying open after I move my mouse
I just updated to FF 6.0. My bookmarks menu has multiple folders containing additional bookmarks. When I open one of the bookmarks folders (sub-menus) the sub-menu stays open after I move my mouse. In the old version the menu closed when I moved my mouse. This is a problem because when it is open it obscures the menu below. This means that I have to close everything each time I want to move to a different folder. It also means that I MUST make a direct hit on the folder I want to open - pain in the 'you-know-what'.
I can't find anyway to turn this feature off - and if I can't I will have to uninstall this version.Currently 664 [exported from FFox Bookmarks to URL Manager for the count] abut never more than 4000: beyond 4000 bookmarks and FFoxs' Bookmarks respond slowly even without Sync active. I currently have 5 computer with FFox set up to use Sync. While I don't expect FFox to manage a huge collection of URLs, I would be nice to be able to access a Bookmark collection of 6000 to 8000 without noticeable delay. It's a simple text file after all, and as I'm only effecting one URL, why so long to update?
fyi: URL Manager tells me that I've amassed about 300,000 bookmarks, some from the late 90's which I still use for research. -
Font drop down menu won't stay open in Photoshop Elements 8
I have Photoshop Elements 8. Up until today it worked just fine. I have been trying to change the font type using the drop down menu of course. Every time I click on the drop down menu it tries to open, but will not stay open to make the change. The menu just flickers in the attempt to open it up.
I have reset the tool, deleted any preferences at start up using the Ctrl+Alt+sSiht keys and no help.
I am using a Windows 7 64bit system. Like I said, this hasn’t happen before. Now that I think about it, sometimes when a menu box is open it will disappear behind the main window and I need to find it again by toggling the window, this will make the change menu to reappear. But still no font drop down menu.
Anybody have any help?If photodrawken's suggestion doesn't make any difference, which was my first thought on the problem, here are a couple of other suggestions.
You might have a bad font. Have you installed any fonts or programs that might have put in new fonts recently?
In pse 8 under Edit>Preferences>Type uncheck Font Preview Size and see if that makes a difference.
Also this lists a fix for missing scroll bars in pse 8 and even though that's not your exact problem it would be worth a try:
http://kb2.adobe.com/cps/865/cpsid_86508.html
Added:
Do you have any third party plugins installed for pse8?
MTSTUNER
Message was edited by: MTSTUNER -
How to make a menu (opened by an on click event) stay open on the following pages
Hi,
I have a side menu that shows the main headings only, when clicked it displays the rest of the menu using and slide effect, with an option to close the menu, on reversing the slide. This all works perfectly but what i want to be able to do is, when a users opens a menu and then uses that menu to navigate to another page, on that new page i want that menu that was opened to stay open on this next page.
The code i have so far is below:
// the function for the effect
function MM_effectBlind(targetElement, duration, from, to, toggle)
Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
// the function to ensure the menu is unopened on page load
function myFuncDisplay (){
document.getElementById ('menu1').style.display='none';
document.getElementById ('menu2').style.display='none';
document.getElementById ('menu3').style.display='none';
document.getElementById ('menu4').style.display='none';
document.getElementById ('menu5').style.display='none';
<body onload="myFuncDisplay ();">
// the first menus code in the side menu that creates the on click and close menu actions
<p onclick="MM_effectBlind('menu1', 1000, '0%', '100%', false)" onMouseOver="this.style.color='#FFFFFF';" onMouseOut="this.style.color='#333333';">Menu One </p>
<div id="menu1">
<p class="close" onclick="MM_effectBlind('menu1', 1000, '100%', '0%', false); " onMouseOver=" this.style.color='#333333';" onMouseOut="this.style.color='#FFFFFF';"> close menu </p>
<p><a href="firstLink.php">First Link</a></p>
<p><a href="secondLink.php">Second Link</a></p>
<p><a href="thirdLink.php">Third Link</a></p>
I have tried setting a variable in the on click event then in the function myFuncDisplay() doing if else clauses to check if the variable was set and if so displaying the div as block in that function, expecting just that menu to display opened in sunsequent pages, it didn't work, itstead it displayed all menus open?
Please can someone help me with a suggestion of how I can make this work, thank you in advance, i look forward to any replies.Hi,
thanks for your reply, i am not actually using the spry menu, i am using the 'blind' effectthat I have adapted as per the code given, I wanted to make a menu that would open on click and the effect i have used works well, now however I want the effect to remain open on different pages, as explained. i am looking for a way of adapting the function that makes the rest of the menu hidden on page load. So on page load the menu is hidden as per adapted code, apart from the menu heading, if the menu heading is clicked the menu opens, with an option to close it, if the user clicks on a link in the menu the new pages loads and the menu is closed as per the onload instruction , I want a way to distinguish if the menu was clicked in one page it will recognise that and in the next page will not hide that particular menu until the user closes it themselves.
Hope that makes it a bit clearer? look forward to any further help. -
Using Dynamic Visibility with Accordian Menu
Hiya. I am trying to use dynamic visibility with an accordian menu. My menu categories are years, 2005 - 2010. My categories items are key performance indicators such as abandon percentage, first call resolution, customer satisfaction percentage, call volume and average speed of answer.
Of my 6 KPIs, 4 display as percentages and 2 display as whole numbers. When the percentage graphs are displayed the axis labels needs to be percentages. When the whole number graphs are displayed the axis label needs to show whole numbers.
I thought to achieve this I should use dynamic visibility with two different line charts where one line chart shows percentages and the other line chart shows whole numbers. However I am strugging trying to make that happen.
Is my concept correct, or is there an easier way to accomplish this? If my concept is correct,can someone give me some advice on how to make dynamic visibility display the correct chart depending on which KPI I select from my accordian menu?
Thanks!Hi
You can achieveby doing following steps..
Insert your categories into D3 and label bind to E3.
take two charts and bind to the destination data of Accordion menu
then write a formula in F3 like this =IF(OR(E3="abandon percentage",E3="customer satisfaction percentage"),1,0)
and bind your two charts to the F3 and set DV for % charts as 1 and # charts as 0.
I hope this will helps you
Thanks,
Srinivas Dandamudi. -
When clicking on a menu in the format bark (ex: color) the sub menu pops open then disappears when releasing the mouse key. In the past the menu would stay open until select a color or clicking off the menu. Any thoughts on what's wrong?
If photodrawken's suggestion doesn't make any difference, which was my first thought on the problem, here are a couple of other suggestions.
You might have a bad font. Have you installed any fonts or programs that might have put in new fonts recently?
In pse 8 under Edit>Preferences>Type uncheck Font Preview Size and see if that makes a difference.
Also this lists a fix for missing scroll bars in pse 8 and even though that's not your exact problem it would be worth a try:
http://kb2.adobe.com/cps/865/cpsid_86508.html
Added:
Do you have any third party plugins installed for pse8?
MTSTUNER
Message was edited by: MTSTUNER -
How do I extend the time the menu box stays open?
When I click on the menu button, the box flashes open and then immediately closes. This just started today. The box used to stay open for me to click on what I need.
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe Mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes -
Links not working in Spry Accordian Menu
When clicked the links in the left side accordian menu do not work. However, the child-links work great. Example: http://www.richartbuilders.com/remodel.php
HEAD TAGS:
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="content.css" rel="stylesheet" type="text/css" />
HTML:
<div id="navSide">
<div id="sideWrapper">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="../remodel.php">Remodel</a></div>
<div class="AccordionPanelContent"></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="../windowsdoors.php">Windows & Doors</a></div>
<div class="AccordionPanelContent"></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="../weatherization.php">Weatherization</a></div>
<div class="AccordionPanelContent"></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Electrical...</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="residential.php">Residential</a></li>
<li><a href="commercial.php">Commercial</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1" ,{ useFixedPanelHeights:false, defaultPanel:0});
</script>
external CSS:
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
border: 1px solid #CCC;
width: 145px;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
background-color: #F2F2F2;
margin: 0px;
padding: 12px;
cursor: pointer;
font-family: "Myriad Pro", Verdana, Geneva, sans-serif;
font-size: 14px;
color: #0071BC;
border-bottom: 1px solid #CCC;
/* [disabled]text-transform: uppercase; */
.AccordionPanelTab a {
text-decoration:none;
color: #0071BC;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
.AccordionPanelContent ul {
list-style-type:none;
margin:0;
line-height: 22px;
font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
.AccordionPanelContent ul li {
color:#666;
.AccordionPanelContent ul li a {
display:block;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
.AccordionPanelContent ul li a:link, .AccordionPanelContent ul li a:visited {
text-decoration:none;
color:#0071BC;
.AccordionPanelContent ul li a:hover, .AccordionPanelContent ul li a:active {
color:#FF9900;
.AccordionPanelTab a:link, .AccordionPanelTab a:visited {
color:#0071BC;
.AccordionPanelTabHover a:hover, .AccordionPanelTabHover a:active {
color:#FF9900;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #FFFFFF;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
/* [disabled]background-color: #3399FF; */
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
/* [disabled]background-color: #33CCFF; */
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;When clicked the links in the left side accordian menu do not work. However, the child-links work great. Example: http://www.richartbuilders.com/remodel.php
HEAD TAGS:
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="content.css" rel="stylesheet" type="text/css" />
HTML:
<div id="navSide">
<div id="sideWrapper">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="../remodel.php">Remodel</a></div>
<div class="AccordionPanelContent"></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="../windowsdoors.php">Windows & Doors</a></div>
<div class="AccordionPanelContent"></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="../weatherization.php">Weatherization</a></div>
<div class="AccordionPanelContent"></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="#">Electrical...</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="residential.php">Residential</a></li>
<li><a href="commercial.php">Commercial</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1" ,{ useFixedPanelHeights:false, defaultPanel:0});
</script>
external CSS:
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
overflow: hidden;
border: 1px solid #CCC;
width: 145px;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
background-color: #F2F2F2;
margin: 0px;
padding: 12px;
cursor: pointer;
font-family: "Myriad Pro", Verdana, Geneva, sans-serif;
font-size: 14px;
color: #0071BC;
border-bottom: 1px solid #CCC;
/* [disabled]text-transform: uppercase; */
.AccordionPanelTab a {
text-decoration:none;
color: #0071BC;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
.AccordionPanelContent ul {
list-style-type:none;
margin:0;
line-height: 22px;
font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
.AccordionPanelContent ul li {
color:#666;
.AccordionPanelContent ul li a {
display:block;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
.AccordionPanelContent ul li a:link, .AccordionPanelContent ul li a:visited {
text-decoration:none;
color:#0071BC;
.AccordionPanelContent ul li a:hover, .AccordionPanelContent ul li a:active {
color:#FF9900;
.AccordionPanelTab a:link, .AccordionPanelTab a:visited {
color:#0071BC;
.AccordionPanelTabHover a:hover, .AccordionPanelTabHover a:active {
color:#FF9900;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #FFFFFF;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
/* [disabled]background-color: #3399FF; */
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
/* [disabled]background-color: #33CCFF; */
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important; -
Since upgrading to Firefox 3.6.6 my bookmarks will not stay open, when I click on the bookmarks icon on the toolbar my list opens up but then disapears again with in about 10 seconds.... i.e, not enough time for me to chose which site I want to open. I've tried deleting cookies, temp. files and I even tried a complete re-install of Firefox but I'm still getting the same problem.... Any ideas please?
Thanks.... Jon T.I'm having difficulty visualizing what is wrong but try some basic steps first:
Launch Safari while holding a Shift key - this will start Safari with just your Home page
If you can see Reset Safari from the Safari menu, try that.
In addition to downloading and installing Safari again, try reapplying just the Snow Leopard Combo Update: http://support.apple.com/kb/DL1399 There is no need to uninstall Safari first.
Lastly try deleting Safari's Preferences file: ~/Library/Preferences/com.apple.Safari.plist -
I'm having the same problem, but can't execute any Safari menu options because it doesn't stay open long enough. Can't even Reset Safari.
Installed 5.0 and it won't open. Continually get the "Reopen" window that sends a a report to Apple. The usual Safari window never gets beyond the URL line before it destructs. I backed up to ver 4.0.5 and get essentially the same result. It does however, try to populate the page, but stays in "Loading" mode for up to a minute or more and then disappears under the "Reopen" error window. I've done the Repair Permissions step with no improvement. Whatever ver 5.0 brought with it has poisoned all previous versions also.HI,
As I suggested to Blake, better to start your own topic. Follow the instructions here...
http://discussions.apple.com/help.jspa#postquestion
Carolyn
null -
my ipod app no longer works. Everytime I go to open the ipod app it stays open for a second and then shuts down. I am not able to get anything to play either through the standard ipod controls or the multitasking control panel. I'm sure there will be an update soon to correct this, i just wanted to see if anyone else was having the same problem.
wen i open ipod in my iphone ,, it gets stuck ,, and get backs to the menu ,,, and doesnot play anything ,, not video nor songIf your phone is not officially unlocked by the carrier in the UK, you can not use the phone using another SIM, unless you modify the software or the SIM, which can lead to unexpected results, such as non functioning apps.
Unauthorized modification of iPhone OS has been a major source of instability, disruption of services, and other issues
Problems resulting from those modifications can't be discussed in these forums, due to the Terms of Use
Maybe you are looking for
-
Pci slot x1 not detecting card
Hi I have An msi gaming 3 mobo. I've recently purchaced a pci e x1 sata controller (jmicron) to solve a incopatbity with my ssd if I install it to the first pcie x1 slot it won't show in the device manager in win7. So I installed it to the pcie x8 sl
-
How to use JFrame's setLayeredPane() method?
I want to custom JFrame's LayeredPane by setLayeredPane() method,but it does't work. Anyone who can help me? The code as follows: import javax.swing.*; import java.awt.*; public class LayeredTest{ public static void main(String[] args){ S
-
OK so i have a rather sizeable library, all being stored on an external HD. iTunes reads it and displays 288.76 GB, and that is all that is stored to my external HD is music thats in my iTunes library. My question or problem is this.... The External
-
Hi Experts, How can i capture multiple vendors for a particular purchase order in transaction MIRO through BADI Invoice_update.There can be a situatin where a particular purchase order can be linked to multiple vendors ( due to change in address), i
-
Was this database migrated from dev or prod?
We have several environments (e.g., development, staging, test, training, production). When migrating a production database to a new version of SQL, we also migrate the related environments. Sometimes the developers want a refresh from production in