Spry Menu submenu items jump when clicked

Here is the test site:
http://jboyerdesign.com/keepsake/
When you click on the submenu items, the menu jumps as if there is a different size defined for the text of the menu item as you click.
Any ideas?
I haven't edited the submenu CSS settings. I did change some things in the menu section:
ul.MenuBarHorizontal ul
          border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #EEE;
          padding: 0.5em 0.50em;
          color: #333;
          text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          background-color: #EEE;
          color: #A74343;
          padding: 0.5em 0.50em;
          text-decoration: none;
          font-weight: normal;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #EEE;
          color: #A74343;

Lines 96-102 of nl3.css reads
a:active {
    color: #996600;
    font-size: 0.95em;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bolder;
This interferes with the menu item list. If you change or delete the font-size, all should be well.
Gramps

Similar Messages

Spacing of Spry Menu submenu items, and inserting background images

Hiya, need a bit of help, could someone possibly guide me with this?
I've created a Spry Menu in DW CS5 - so far, so good.. However I'm pretty new to CSS Styles so need pointers at what to change to get the result I need. I've created the spry menu, however the submenu dropdown items are not flush to the ones above, theres a 1px horz gap between each item and while it looks okay, its particularly visible in Firefox and Chrome and would prefer no spacing at all..
The live site is at http://www.ebm.co.uk/2011site/indexnavbar2.html
if you take a look at the drop down menu bar you'll see what i mean - what do I need to do to remove the spacing?
I also want to replace the solid colour with images, where do I specify the images for 1) top menu item 2) submenu item and 3) 'hover' item, and do I need to make any areas transparent?
Any advice would be much appreciated.. thanks!
Chris

This is a good place to start http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php.
Also this might help http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
Gramps

Different widths for Spry Menu Submenu items

On the Customize this widget page for menus, a new style was
suggested for submenu items, to make some of them less wide. This
code below was suggested. How do we attach the new style to the
submenu items? Clicking on each submenu text that's open, and
applying the smaller style doesn't do it.
Here is the code:
ul.MySmallerSubMenu {
width: 4em;
ul.MySmallerSubMenu li
width: 100%;
ul.MySmallerSubMenu li a
width: 100%;
Diana

Lines 96-102 of nl3.css reads
a:active {
    color: #996600;
    font-size: 0.95em;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bolder;
This interferes with the menu item list. If you change or delete the font-size, all should be well.
Gramps

My spry horizontal menu drops then returns when clicked?

Hello,
I recently updated my website to include a Facebook "Like" button with counter, and now my spry horizontal menu jumps up and down when you click a menu item?
http://www.kansascitycrates.com/index.html
I played around with the like button position in my template, before just adding it to the existing "Recommend" position at the top. It is simply a 2 column 1 row table.
What setting is causing the Spry horizontal menu to jump like that?
Thanks in advance.
John

Thank you SnakEyez02,
I made the changes you suggested. The spry horizontal menu should be below the header background image. Also, I put the Facebook plugins into a table, for lack of better understanding of controlling it's placement. I would like both Facebook buttons to be even along the top.
When I opened the template this morning, the last spry menu option (Testimonials) suddenly word wrapped (?) and began a second line under the first menu item (Contact). So I played with adjusting it's width and font size. I haven't made any other template changes in 6 months and don't know why it "word wrapped"?
Thank you again for your help.
JM

Is it possible to change the height of Spry Menu Bar items?

I'm new to websites and have been trying to understand the CSS of the Spry menu bar. I've managed to put a horizontal menu bar in place and with the help of some previous discussions in this forum, have changed the colours of the menu items and have even managed to centre the text - Thanks!
However, I really would like to have a smaller menu bar - height wise.
I've tried reducing the default height of the menu bar items by adding a height and by reducing the font size and padding. The results have been varied. In Firefox and in Dreamweaver's 'live view' there is still a thin line showing underneath my horizontal menu which is the background colour of the div my menu sits in. In IE there is a similar 'chunk missing' from the bottom of the items.
Is this something that can be done? I've seen lots of help on how to change the width of the items, but have not found any which suggest that the height can be changed.
Gill

Sure. You just need to be thorough. Keep in mind that in a Spry Menu Bar you are making the link-text in the list-items block elements, so you will want to change the line-height of the a element. Pick style selectors in the css stylesheet that end in a, with or without an additional class (a.classhere), and play with the line-height.
Another attribute you can consider is the difference in height between Cap and lower case and All caps. You can usually get away with a smaller line-height and a smaller font-size with all caps, because there are no descenders on the text to require more line-height. Keep in mind also that when you state a line-height, your text will center vertically in the line-height, as far as I know, so you might even get away without top and bottom padding.
Beth

Customizing Spry Menu - Drop items different from tabs at the top

How can I remove the background image from the dropped down items on a Horizontal Spry Menu while keeping the image for the tabs at the top? It seems every time I change something for the top tabs, the change is carried to the drop down menus as well.
Here is a link:
http://www.monicagraphicdesign.com/Bill/spiritual.html
You can see what is happening if you hover over "About Bill"

Open your SpryMenu.css file. Scroll down a ways to this:
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    background-color: #000;
    background-image: none;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    background:none;
    width: 8.2em;
Nancy O.

Part of my menu doesnt do anything when clicked.

Im updating my menus in Dreamweaver and all of the links in my menu show a hover action when hovering over them. But some do not do anything when clicking them. My code looks like this
<div id="banner2" ></div>
<div id="homebutton"><a onfocus="blur()"   href="http://www.wiremirage.com"
title="home"></a></div>
<div id="portfoliobutton"><a onfocus="blur()"
href="http://www.wiremirage.com/portfolio.html" class="nm"
title="portfolio"></a></div>
<div id="shopbutton"><a onfocus="blur()"
href="https://www.etsy.com/shop/WireMirage" title="shop"></a></div>
<div id="learnbutton"><a onfocus="blur()"
href="http://www.wiremirage.com/learn.html" title="learn"></a></div>
<div id="aboutbutton"><a onfocus="blur()"
href="http://www.wiremirage.com/about.html" title="about"></a></div>
<div id="contactbutton"><a onfocus="blur()"
href="http://www.wiremirage.com/contact.html" title="contact"></a></div>
<div id="travellingonaspectrumbeyo" ></div>
<div id="viewourspring2014button"><a onfocus="blur()"
href="https://www.etsy.com/shop/WireMirage" title="View Our Spring
2014"></a></div>
<div id="i32bottomleftbg" ></div>
Theres more than that, but that is the menu when I select it in DW. My portfolio button doesnt go anywhere when I click on it. Can anyone help?

Hmm, without seeing the css, it's hard to say, but as it stands right now, your <a> tags have no content.
If your css is creating hover states for each <div> the hover state for those would work just fine. It may be that the empty <a> tags are collapsing to zero height, giving you nothing to technically click on though.
Also, rather than using the onfocus state in all of your individual links (a bit tedious) I'm guessing to get rid of the outline in IE, you can use a little snippet of css instead...
a {
outline:none;
Though neither are very nice things to do to your visitors that rely on the outline to show which link they are on as they tab through your site without using a mouse (either by choice or disability).

Spry horizontal menu - submenu items are displaying laterally instead of vertically in IE

I am currently building a website in Dreamweaver CS5 (on a mac) that includes a horizontal Spry menubar. The drop down items appear vertically, as I want them to in Firefox, Safari, and Chrome, but not in Internet Explorer for Windows. Instead, the items are listed laterally in IE. How can I fix this?
Here's a link to the page:
http://dcsyc.org/
Thanks!

I'm not certain which attribute I changed, ive done a lot more coding since then, but if you open the CSS file linked above its in there somewhere. I'm pretty sure I set the submenus width to automatic to fix it, but I'm not 100%.
ul.MenuBarHorizontal ul
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 12pt;
     z-index: 1020;
     cursor: default;
     width: auto;
     position: absolute;
     left: -1000em;
I think its the width: auto; in that tag.
On the plus side, the link to the CSS works, and the answer is in there somewhere.
If you really cant figure it out, post again here and we'll put our heads togethe .

How can I stop redirect and jumping when clicking on a link in Google search or on a web page?

When I click on a link in Google (or other) search, or a button within a page, too often, at least half the time my request is REDIRECTED and JUMPS to another unwanted page!
== This happened ==
Every time Firefox opened
== after attempting to clean the computer a few times

Thank you, Weather15.
I have cleaned my computer a few times since first noticing it, both with Spybot - Search & Destroy and CCleaner. Also have
the latest version of AVG 9.0 Free checking for problems as I search.
I am about to clean again though to see if it makes a difference.
Had to do some updating a few days ago and haven't cleaned since then. Thanks again. Will let you know if this handles it!

Finder menu not accessible. When clicking finder menu all icons blink. Clock gone. Safari quits "help data plug in" Etc.

When I attempt to click anywhere on my top menu bar all of my desktop icons blink and I am not able to access anything such as my apple icon, shut down or restart or file, etc. My clock is gone, my search bar is gone, etc. Safari also keeps quitting unexpectedly while using the "help data" plug in. I can attempt to add video of the action if necessary if you need it. Any help would be really appreciated. First time using the community. Thank you!

Update: If I click somewhere in the menu bar everything flashes as previously posted. But if I click the menu bar again after the flash I can then access the options in the bar, but everthing still missing as reported and safari crashing.

Spry - load tab content only when clicked / selected

I'm considering spry to create a multi-tab page layout.. tabs
such as 'account', 'balance', 'bin', 'history', etc.
Each tab's content is dynamic and based on moderately
demanding DB calls. Is there a way to set Spry such that
- only the default selected tab's content (on page load) is
'filled', while the content of other tabs is generated only upon
user's click?
- once a tab's content is loaded, not regenerate its dynamic
content? I think I have an idea how to do this, but doesn't hurt to
ask.
thanks.

quote:
Originally posted by:
shanbyrt
Brandan98,
I have a little script that sets the default panel whenever I
click on a tab.
I know it sounds redundant, but if/when the page reloads
onclick it reloads the default tab's contents. Just so you know I'm
not talking about persistent state stuff that V1 addressed in other
posts. :)
here's the script that I have that sets default tabs
<script type="text/javascript">
function setPanel(pan){
if (pan == 1){
var tp2 = new Spry.Widget.TabbedPanels("tp2", {defaultTab:
0});
if (pan == 2){
var tp2 = new Spry.Widget.TabbedPanels("tp2",{defaultTab:
1}); }
var tp2 = new Spry.Widget.TabbedPanels("tp2");
</script>
It seems to work for me, but may not be the best approach.
Byron
Hi Byron,
If i understand you right, this script sets the current tab
as default so if the page refreshes it reloads the current tab not
the first tab? If so this is exactly what i'm after! I'm not hot on
javascript so could you possibly expand a little on how i would
implement this in a php page??
Thanks, Mike :)

Top menu bar icons disappearing when clicking on Spotlight (wi-fi, date, user, spotlight) on Mountain Lion?

Hi!
Something very strange started happening. When I click the spotlight icon on the top bar, all system apps icons disappear and then reapear.
I've also seen this happen without me clicking the spotlight icon.
I'm using a iMac 2.8 GHz Intel Core i7 with 8 GB of RAM using Mountain Lion (10.8).
Any idea of what this is?
I've attached a screenshot:
Thanks!
Patricia

Well, I self-answer.
Following advices found on very old threads here (like this), I understood one possible cause could be some incompatibility of the extras in menu bar. I tried removing Bluetooth extra and also the volume controller (that I never use), and it seems, after a few days, the problem is no more present.

Addresses in Address bar drop down menu do not load when clicked on, do not load when arrow presssed or when enter is hit. nothing typed in bar works

nothing I type into the address bar work, no choice picked from the address bar drop down menu works.... this is very annoying for my wife and hence it makes it annoying for me
tried to restart, does not help.

Do you have that problem when running in the Firefox SafeMode? <br />
[http://support.mozilla.com/en-US/kb/Safe+Mode] <br />
''Don't select anything right now, just use "Continue in SafeMode."''
When in Safe Mode... <br />
* The status of plug-ins is not affected.
* Custom preferences are not affected.
* All extensions are disabled.
* The default theme is used, without a persona.
* userChrome.css and userContent.css are ignored.
* The default toolbar layout is used.
* The JIT Javascript compiler is disabled.
* Hardware acceleration is disabled.
If not, see this: <br />
[https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems]

Tree node jumps when click

I am doing a webdynpro application using tree component.
When the tree expanded and show the scroll bar, if I click one node, the whole view flushed, and seems it is trying to show the first line. If the node clicked is near the bottom of the tree, it will became the bottom one.
why this happened? and how to fix this?
thx

I used windows 8 only for about 5 minutes when I bought it. Then I installed my original copy of windows 8.1.
I didn't notice the problem, probably because I didn't pay attention.
I notice the problem when using my laptop a lot in the days following (windows 8.1 installed).
I installed windows 8.1 tree times, the last one I used an USB with UEFI so I was able to install windows 8.1 with UEFI support.
The problem was there also without UEFI windows (legacy startup)...
I could try to install windows 8 in a new partition, but I get the impression that the problem will be the same.
edit: I forgot to say that I always used the last driver downloaded from lenovo site.
Thanks

Spry menu submenu only settings

I am having trouble with these issues;
-where in the SpryMenuHorizontal.CSS to give the menu and submenu different fonts, font sizes
- i want to move the submenu up slightly
thanks
you can see the menus at www.mojogar.com

Try this tutorial for styling the menu:
http://foundationphp.com/tutorials/sprymenu/customize2.php
Martin
PS
I think you might be able to adjust the position of your menu If you tinker with the padding in this rule:
ul.MenuBarHorizontal a {
background-color:#E8E8E8;
background-image:url("../images/menuButtonBackground.jpg");
background-position:left bottom;
color:#1A1A1A;
cursor:pointer;
display:block;
font-family:"Arial Black",Gadget,sans-serif;
padding:12px 12px 8px;
text-decoration:none;

Spry Menu submenu items jump when clicked

Similar Messages

Maybe you are looking for