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

Similar Messages

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

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

BUG: Toggling interface on/off causes missing menu toolbar items and icons in Photoshop CS4!

When I toggle the interface on/off it causes missing menu toolbar items and icons until I exit and restart Photoshop CS4. I know this can happen if problem filters are installed. So I have the latest Alien Skin filters installed and have already followed their AutoLayer2.8li file updates to resolve Windows Photoshop CS4 issues. I also have Luxology imageSynth 2.0 filter installed. So since all my filters are updated to CS4 compatible versions, I shouldn't have this problem but yet it occurs. Any way to fix this?
I'm using WinXP SP2, 4 GB RAM, GeForce GTX 260 Core 216 with newest 185.85 driver. I have 3D canvas rotation turned on.

ghost zero wrote:
toggle the interface on/off it
What do you mean by this? Are you using standard methods (i.e. the buttons on the top-right of the screen) in Windows Explorer to minimize and then restore? or what?
Are you on XP 64-bit? or 32-bit?
Did you install driver version 185.85 before or after the problem started?
Do you just one GTX 260, or are you doing SLI at all?
Do you have more one monitor? If so, and you limit yourself to just one, do you still have the problem?
Also, just to make sure that this problem wasn't somehow caused by your plug-ins (because I have seen onOne plug-ins, at least, that install several DLL files and you can't disable DLLs by renaming with ~ like with plug-in files), or caused by a messed up install of PS, go ahead and repair the PS install. Follow the "Restore the default set of Photoshop CS4 plug-ins" section in this document, except that after Step 3 (or Step 5, if you're on 64-bit Windows) get rid of the entire "Adobe Photoshop CS4" folder from Program Files (and the one in Program Files (x86) if you're on 64-bit Windows):
http://go.adobe.com/kb/ts_kb409112_en-us

HT2531 Spotlight lists items and shows preview images. BUT what about showing the location address of an item in my computer. Especially important if I've put the item in the wrong folder and what to locate it without multi-steps. iMac OS 10.5 was more u

Spotlight lists items and shows preview images. BUT what about showing the path/location address of an item in my computer.
Especially important if I've put the item in the wrong folder and what to locate it without multi-steps. iMac OS X 10.5 was more useful.
Old OSX Spotlight function automatically displayed path/location within the machine: e.g. desktop/folder/sub-folder/item.
Can I make Spotlight show the path?

Press option-command and the path is displayed at the bottom of the little preview window. Press command-return and the enclosing folder opens.

How can I put a vertical menu ON TOP OF the background image?

I've taken a screenshot to describe my problem.
http://i48.tinypic.com/10ndeg4.jpg
I want to put the menu on top of the background image. Compare it to placing another image on top of the background image. HOW on earth can I do this?

Did you try putting the image in a <div> and setting the background image for the <div> with CSS. Then within the <div> place your menu.
Just a thought.
LJD

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

Spry menu how to different hover background for submenu options??

Hi
CS4 dreamweaver, Spry menu.
I am trying to design a spry horizontal menu such that the main menu bar boxes accross the top all share a background image and a hover image.
I would like all the boxes in the dropdown area to share a diferent background and hover image.
My problem is in the hover styles. In particular, when the main menu bar accross the top has an option that is not a submenu.
The target css rule is "ul.MenuBarHorizontal a:hover" and is used for any link that resides on the menu bar as well as for links that reside in the dropdown area. I wish to distinguish (via background image, and background hover image) the two types of buttons.
The other challenge is that my menu is dynamic and is using a spry dataset to drive it.
I guess i need a "ul.MenuBarHorizontal ul li a:hover" or something like that.
I hope that i am explaining myself.
Anyone run into this?
Thanks
Jerry C

Hi - I just read
The other challenge is that my menu is dynamic and is using a spry dataset to drive it.
Some time back I did the same for a number of websites - and then realised that search engines dont read the data. ie - the links and they could not be followed since they needed to be generated on the fly in the browser.. So as a result, Google was not going thru my nav menu links.
I then changed to another method (PHP / MySql) for my dynamic menus.
My menu system has some extra CSS to style the subnavs and the currently selected page.
Just my 2bobs worth. Hope it is of some use..

Spry Menu 2.0 and mobile devices... (Ughhh....)

Let me start by saying that I am such a NEWBIE!
I developed some sites for work which work great online/live. The problem is that the spry menu bar 2.0 does not function on iPad or iPhone. The main menu works fine but the submenus do not fly-out.
Can anyone help me with this? It's probably so simple, but not for me at this stage of creating sites.
THANKS in advance!

Whoah.... So, if I understand you correctly, the spry menu works just fine -- at least in terms of its capability. I am able to navigate to main/top level pages. So, medical send me to medical, dental to dental and so on. What I can't do is access the medical (for example) submenu to pull up documents or other pages.
Am I correct?
I need to rethink a more mobile-friendly design.
Thanks so much for responding.
And, the code is as follows:
<ul class="MenuBarVertical" id="MenuBar1" onfocus="MM_openBrWindow('../termsofuse.html','TermsofUse','scrollbars=yes,width=4", height=4"')">
        <li><a href="../TORindex.html">Overview</a></li>
        <li><a href="../termsofuse.html" target="_new">Terms of Use</a></li>
        <li><a href="../TORmedical.html" class="MenuBarItemSubmenu">Medical</a>
          <ul>
            <li><a href="../TORmedical.html">Overview</a></li>
            <li><a href="../Medical/SEIU_Copay_May2011.pdf" target="-new">Benefit Summary</a></li>
            <li><a href="../Medical/Enrollment Form.pdf" target="_new">Enrollment Form</a></li>
            <li><a href="../Medical/forms_medical_claim_form.pdf" target="_new">Claim Form</a></li>
            <li><a href="http://cigna.benefitnation.net/cigna/docdir.aspx" target="_new">Provider Directory</a></li>
            <li><a href="https://my.cigna.com/web/public/guest" target="_new">Member Website</a></li>
            <li><a href="http://www.webmd.com/ " target="_new">WebMD</a></li>
          </ul>
        </li>
        <li><a href="../TORrx.html" class="MenuBarItemSubmenu">Prescription</a>
          <ul>
            <li><a href="../TORrx.html">Overview</a></li>
            <li><a href="../RX/SEIU_Copay_May2011.pdf" target="_new">Benefit Summary</a></li>
            <li><a href="http://cigna.benefitnation.net/cigna/docdir.aspx" target="_new">Find a Pharmacy</a></li>
          </ul>
        </li>
        <li><a href="../TORdental.html" class="MenuBarItemSubmenu">Dental</a>
          <ul>
            <li><a href="../TORdental.html">Overview</a></li>
            <li><a href="../Dental/Non-Union Dental Benefit Summary (1).pdf" target="_new">Benefit Summary</a></li>
            <li><a href="../Dental/Dental Claim.pdf" target="_new">Claim Form</a></li>
            <li><a href="http://cigna.benefitnation.net/cigna/docdir.aspx" target="_new">Provider Website</a></li>
</ul>
        </li>
        <li><a href="../TORvision.html" class="MenuBarItemSubmenu">Vision</a>
          <ul>
            <li><a href="../TORvision.html">Overview</a></li>
            <li><a href="../Vision/visn-others.pdf" target="_new">Benefit Summary</a></li>
            <li><a href="https://www.cigna.vsp.com/member/htmls/find_dr.jsp?grp=nulll" target="_new">Find a Doctor</a></li>
          </ul>
        </li>
        <li><a href="../TORlife.html">Life & AD&D</a>          </li>
<li><a href="../TORstd.html">Short Term Disability</a> </li>
        <li><a href="../TORltd.html">Long Term Disability</a>          </li>
<li><a href="../TORcontacts.html">Contacts</a></li>
      </ul>
CSS for spry menu bar is:
@charset "UTF-8";
   ul.MenuBarVertical
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: 8em;
ul.MenuBarActive
          z-index: 1000;
ul.MenuBarVertical li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 9em;
ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          left: -1000em;
          top: 0;
ul.MenuBarVertical ul.MenuBarSubmenuVisible
          left: 0;
ul.MenuBarVertical ul li
          width: 8.2em;
ul.MenuBarVertical
          border: 1px solid #CCC;
ul.MenuBarVertical ul
          border: 1px solid #CCC;
ul.MenuBarVertical a
          display: block;
          cursor: pointer;
          background-color: #06F;
          padding: 0.5em 0.75em;
          color: #FFF;
          text-decoration: none;
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
          background-color: #33C;
          color: #FFF;
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
          background-color: #33C;
          color: #FFF;
ul.MenuBarVertical a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarVertical a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarVertical iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
@media screen, projection
          ul.MenuBarVertical li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

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.

Spry Menu Bars, Templates and Current Page Indicators

Hello,
If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
Thanks,
Ferg.

Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
First we write a function to initialse the page
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
Next we nee a trigger to activate the function. This is done with a load listener as per
Spry.Utils.addLoadListener(InitPage);
Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
<script src="SpryAssets/SpryDOMUtils.js"></script>
The whole thing will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
Gramps

Spry Menu Bar Colors and Pictures in Dreamweaver

I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.

> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development

SP Designer Workflow: How to Get Full URL Path to List Item and inserted same list ITem URL in another list

Hi,
I have requirement in Sp Designer 2010,Get List item URL and insert in another list as one column value.When open another list and click on same item column entry url will show the parent item information.
Here i have create work flow and insert item URL in another list but cant find appropriate item url information.I can easily make item url link through String builder in mail body with using current id and predefine link,but
when try to insert the same type of item link in another list where i cant find string builder for create custom url link,only get valur of Path,URL,Absolute URL and Relative server URL,all these links or not provide me exact
item link dispaly information.
So I opened SharePoint Designer and start creating the workflow associated to the list.
As there is some Field from source related to current item URL I start using it
Encoded Absolute URL – this one should be the one to use
Server Relative URL
URL Path
Unfortunately, none of these options were providing the correct link. Indeed, these options are providing an incorrect path:
Encoded Absolute URL
http://wfe1/Lists/bpf/1_.000
Server Relative URL
/Lists/bpf/1_.000
URL Path
/Lists/bpf/1_.000
As you can see, the item URL is composed by an ID while it should be http://wfe1/Lists/bpf/dispform.aspx?id=1
Hasan Jamal Siddiqui(MCTS,MCPD,ITIL@V3),Share Point Application Developer,TCS

Unfortunately, [%Current Item:URL%] doesn't seem to be available from a "Site Workflow" associated to a List. I'm finding less advantages to doing a "Site Workflow" when I don't necessarily need to. One problem is the workflow is initiating
twice. I'm thinking I should have just created the workflow as a a "List Workflow."
I am going to try "Association Columns" -- that may work. Anyone have other suggestions?

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;

Inserting a Spry Accordion on top of a background image?

I created an 800 x 600 pixel graphic image in Adobe Photoshop CS4 to be used as an overall background image for a webpage. I also created a few navigation links from the image Layers using the Slice Select Tool, then optimized and saved the image as an html file using the Save for Web & Devices command in Photoshop. Next, I opened the html file in Dreamweaver CS4.
Is it possible to insert a Spry Accordion with a clear (transparent) background anywhere on top of that background image in Dreamweaver CS4 so that I can see the background image behind the text content of the Spry Accordion? I use Windows Vista.

Hi,
Yes, as is shown by the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body style="background: url(images/detail/cd1.jpg) no-repeat center;"> //use your own location and file
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spacing of Spry Menu submenu items, and inserting background images

Similar Messages

Maybe you are looking for