Links inside an accordion menu

Hello, im almost done with my site, but i have encounterd a problem, I did an accordion menu for the main design, works perfectly, but inside one of the menus i have a gallery, ive tried diferent options, but my main problem is that every time i click any of the different button options ive created all my page scrolls to the top. Its like everything inside the accordion menu is making the page scroll back to the top! how can i disable that for the buttons inside the main accordion menu. Thank you.

Hello, the problem im having is in the mobile site. here are the two versions, english and spanish. You will ser the problem in the portfolio section under recent projects. The two versions have a diferente type of galery bit both have the same issue. Once you click any buttons under projects the page automatically scrolls up.
http://www.katapix.com/phone/
http://www.katapix.com/phone/inicio.html
im sorry for my bad english. I hope i made my point clear. Thank you for the help!

Similar Messages

Static/Standard links within Muse Accordion menu widget

Hi,
I'm a newcomer to Adobe Muse and so may have missed a menu or option somewhere along the line,
I'm trying to make a simple alteration to the standard Muse 'accordion' menu widget.
I'm re-creating a website I've already half built in Dreamweaver, it being a simple design I thought
this would be a good site to try to build with Muse. As you'll see here: http://www.thisisneil.com/rg-e/
the accordion on the left hand side has two static links sitting at the bottom of the menu linking to
a 'Contacts' page and 'Blog' hosted on Tumblr.
Within Muse, I can't embed these two standard links without the accordion function in the same field?!
Muse automatically applies the on-click, drop down sub-menu. Is there anyway of disabling the function
on selected menu items?
I'd like the two static links to drop down, and pop back up with two two functioning accordion menu's
sitting above as they do within my dreamweaver example, but can't seem to amend the Muse menu
to behave in this way. A shame to fall at the first hurdle with such a simple menu amend!
Any help or thoughts much appreciated.
Thanks.

Anybody?!

Accordion menu spry link not working

I built an accordion menu spry using Dreamweaver CS5. I noticed that the navigation labels on the accordion menu cannot be linked to pages. Please see the Overview link on the accordion menu and notice that it does not not go to 'overview.html' as I added in the code. What am I doing wrong?
Thanks. Any help is greatly appreciated.

I see this in your spry css file - you might try removing the two user-select entries
* 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: #FFF;
     border-bottom: dotted .5pt gray;
     margin: 0px;
     padding: 6px;
     cursor: pointer;
     -moz-user-select: none;
     -khtml-user-select: none;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 9pt;
     background-image: url(../images/mykcurve_expand.gif);
     background-position: right;
     background-repeat: no-repeat;

Spry accordion menu

Hello,
I have a Spry Accordion menu with links inside the Accordion
Panel Content. I’m trying to style them using CSS, but
can’t figure out how. I tried this(below) but doesn’t
work.
#AccordionPanelContent a {
font-size:9px;
color:#FF6600;
font-weight:bold;
text-decoration:none;
padding-left: 2px;
padding-right:15px;
Here's the HTML code:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Places</div>
<div class="AccordionPanelContent">
<ul>
<li><a
href="jordan.html">Jordan</a></li>
<li><a
href="bhutan.html">Bhutan</a></li>
<li><a
href="london.html">London</a></li>
<li><a
href="spain.html">Spain</a></li>
<li><a href="rocky.html">Rocky Nat'l Park,
USA</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">WildLife</div>
<div class="AccordionPanelContent">Content
3</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Close-ups</div>
<div class="AccordionPanelContent">
<ul>
<li><a
href="flowers.html">Flowers</a></li>
<li><a
href="insects.html">Insects</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">People</div>
<div class="AccordionPanelContent">Content
4</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Thanks for any help on how to style these link,
Dave

Links are not coded into the CSS for the Accordian panel. You
could add the lines in yourself.
Here is what I would recommend. If you want the same link
color regardless of where it is on the document, make another css
document on your own, attach it to the document, and put the
following in it:
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
That would just change the color of the links. Active and
Link can be the same if you want even though this example does not
show it. If you need something else, like underlining or bold, you
could use the Reference Panel of DW or post here, and you could
also check out this example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2
This comes from a very good tutorial located at:
http://www.w3schools.com/css/default.asp
(the Hyperlink stuff is under "psuedo-class" under advanced on the
left menu)
Or if you just need this code to work on the panel only you
would need to do this:
#AccordianPanelContent a:active,
#AccordianPanelContent a:link { CSS CODE HERE }
#AccordianPanelContent a:visited { CSS CODE HERE }
#AccordianPanelContent a:hover { CSS CODE HERE }
Hope this helps some.

Dashed rule between menu items nested inside an accordion panel widget in Muse?

I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container.
I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel. The menu expands and collapses in the Preview mode but the dashed rules don't show up.
Muse CC 2014, iMac OS10.9

The link again is I forgot to add http to the link before, but it should have worked.
http://www.lipowiec.org/test/index.php
a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
b) used spry to add horizontal menu to header
c) followed instructions from Spry Help
http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.
Under IE it's broken, under the other browsers it works.
There need to be more IE HACKS added.

Spry Accordion Menu Tab Link css - totally confused

Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Photo Gallery</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="PhotoGallery.html">Gallery 1</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Unit Newsletters</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="Newsletter.html">February 2010</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Forms</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="">Joining Instructions</a></li>
    <li><a href="">Enrolment</a></li>
    <li><a href="">Next of Kin</a></li>
    <li><a href="">Volunteer Blue Card</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="WhatsOn.html">Whats On</a></li>
    <li><a href="PSG.html">Parent Support Group</a></li>
    </ul>
    </div>
    </div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;

Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;

I created a new folder in my bookmarks menu and it disappeared with all the links inside the next time I turned on my notebook.how could that happen?can I find those links again somewhere in the memory?

actually I lost the whole sub-folder,not only the links inside...

See:
http://kb.mozillazine.org/Bookmarks_not_saved
http://kb.mozillazine.org/Locked_or_damaged_places.sqlite

Accordion menu HELP - sorry, very urgent

Good afternoon, first I would like to say that I'm a completely newbie in this things, sorry for that. I'm trying to expose my question in the most simple way:
I want to make a Accordion menu, where in the content boxes appears no only one space to work and put a link and images, but more, how many as I want. Is correct putting a table inside the content box and make rows? Is there any other way to build this correctly? I tried the Vertical Menu Spy, but I don't like it because I want this to work like the accordion... don't know if I make myselfe clear, sorry the bad english. Hope some one can help! Thanks
PS: there goes an image to explain better

DW Sprys and Accordions are difficult for experts to use. If you don't have a good knowledge of HTML, CSS and JavaScripts yet, you may be better off using a commercial product.
Project Seven Accordion Panel Magic 2
http://www.projectseven.com/products/tools/accordion2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Accordion menu widget behavior and contents

I'm working on an accordion menu that is then used in a DPS folio created in InDesign.
The accordion menu resides on the Master Pages of the articles/documents, 6 articles total.
When the label is tapped, the accordion menu expands open >
The label is also a link that takes the reader to a page within the folio while expanding (using the navto://documentname#page formatting) >
Inside the content area of each label are subtopics that also navigate to different pages within the folio (also using the navto://documentname#page formatting).
My desire is that when a label is tapped and expands, the reader can then click on each subtopic and go to that page without the accordion menu collapsing as it goes to the page.
I'm finding that 99.9% of the time, the menu is collapsing. Other times I get the exact performance I desire.
I'm Ok with the menu collapsing as each label is tapped, but not the subtopics.
I've played around with setting the accordion properties by unchecking "Collapse All" and unchecking "Edit Together", but can't seem to edit these sections or the text boxes individually. It either sets ALL items in the accordion menu to Collapse All or not. No mixing of the two settings.
Is there a way to get the desired functionality, outlined above, with the accordion menu widget?
TIA,
Hunter

You can either use separate accordions for sub topic or you would need to go with unchecked collapse all and then manually edit all contents.
Thanks,
Sanjit

Adding links in dreamweaver accordion

Hey Guys,
I'm having trouble adding links inside my dreamweaver
accordion menu. Basically they don't display at all? Does anyone
know why?
Thanks
Shell

Let's see your code, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"shelleyfish" <[email protected]> wrote in
message
news:g6cf49$3v1$[email protected]..
> Hey Guys,
>
> I'm having trouble adding links inside my dreamweaver
accordion menu.
> Basically they don't display at all? Does anyone know
why?
> Thanks
>
> Shell

Muse accordion menu within folio article(s)

I’m working on an accordion menu created in Adobe Muse that is then used in a DPS folio created in InDesign.
The accordion menu resides on the Master Pages of the articles/documents, 6 articles total.
When the label is tapped, the accordion menu expands open >
The label is also a link that takes the reader to a page within the folio while expanding (using the navto://documentname#page formatting) >
Inside the content area of each label are subtopics that also navigate to different pages within the folio (also using the navto://documentname#page formatting).
My desire is that when a label is tapped and expands, the reader can then click on each subtopic and go to that page without the accordion menu collapsing as it goes to the page.
I’m finding that 99.9% of the time, the menu is collapsing. Other times I get the exact performance I desire.
I’m Ok with the menu collapsing as each label is tapped, but not the subtopics.
I’ve played around with setting the accordion properties by unchecking “Collapse All” and unchecking “Edit Together”, but can’t seem to edit these sections or the text boxes individually. It either sets ALL items in the accordion menu to Collapse All or not. No mixing of the two settings.
Within InDesign, it actually seems as though this menu, although on the Master Page, is functioning individually on each document page.
Is there a way to get the desired functionality, outlined above, with the accordion menu widget?
TIA,
Hunter

The only way you'd be able to keep the menu from being collapsed when you come back to the page is to write code in JavaScript to remember the state in localStorage and then read it back when the menu is re-opened. When your reader navigates to another article (and sometimes even page in the same article) in the folio via the menu we will clear the previous article from memory, and the state will be lost.
Neil

Can you force a link inside a .pdf to open the "linked to" document in a new window?

When I have a link inside my .pdf document - linking to another .pdf document or to a Word document - how can I force the linked-to document to open in a new window?
I have a web site (business internal, so unfortunately I cannot point to it). My HTML menu has links to .pdf documents - no problem. However, once I open those .pdfs, they contain links to other .pdfs and to Word documents. Clicking on these links, which reside inside my .pdfs, opens the "linked-to" docs in the same page. How can I force them to open in a brand new frame?
All of my .pdfs were originally created in Word, and in the Word versions, the links DO open into new frames. I am not sure why, when I convert them to .pdfs, they lose this feature.
Can anyone help?

Hi Magenta,
Would you mind reposting this question over on the Acrobat boards? You've posted in the AIR forum and you'll have better luck with this over there.
Thanks,
Chris

Using an image as label in Spry Accordion Menu

I was wondering if it was possible to use an image instead of
text in the spry accordion menu. I have replaced the text that is
there with a roll-over image link however I'm unable to label it
since it uses the text as the label and therefore can't set the
default panel I want opened. Is there a way to do this? Thanks for
your help.

Stefaan Lesage wrote:
Is this possible with Pages 09 ? And can I achieve this ?
Is it possible to look at the Help or at the Pages User Guide
In the English one, page 17, we may read:
• Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32)

How to change the color of the links inside a portlet ?

Hi,
I have to apply a css into one of the portlets of my page. Since I thought it would not be easy I figured out that the only thing the client cares is the color of the links inside the portlet. The portlet has a bunch of links and these link should be blue and 12pt. Does somebody know how to do that ?
Thanks,
Rafael.

Change hyperlink color:
There are about 50 predefined styles with each template. They are modifiable. Hyperlink is one of the styles.
Follow this process:
• In your document select a word of text, any word will do.
• Style it the way you want your hyperlinks to look.
• Show Styles Drawer from the View menu.
• Find the Hyperlink style in the drawer and right-click on it.
• Select - Redefine Style from Selection - in the pop-up menu.
That's it. You've changed the hyperlink style for this book.

Link to specific accordion tab from other page

Hi all, were working on a site that has recipes page.
there are few recipes and they are all within an accordion widget.
when you click on the title ie: Apple pie the tab opens and shows the info.
My question is : Is it possible to link to that specific accordion tab on the recipes page?
For example: on the apple page there is a link to the apple pie recipe (which is inside an accordion)
is that possible?
yd.

i meant.
if you have a page. and on that page there is an accordion with multiple tab (or panel or whatever they are called)
i would need to make link on another page that link straight to a specific opened tab in the accordion. like an anchor link on another page, but
have the accordion panel open instead.
understand
sorry for the lousy english.
yd.

Links inside an accordion menu

Similar Messages

Maybe you are looking for