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

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

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

Auto Width for Spry Menu

I've set the width of a (position: absolute) container for a Spry menu so it's width (width: auto) will expand to hold the menu in a single row.
But sometimes it looks like this in CS3:
While in browsers it looks OK, like this:
Is it OK to set the width (or height, for that matter) of the container to auto or or do I have to set a fixed width?

Please see the answer in the other forum.
Gramps

Different images for spry menu button jpg or gif?

Hi I have just been reading James Branstons "questions and answers", just what I was looking for many thanks to gramps.
I am new to dreamweaver and spry and what I am wanting to achieve is a spry menu bar horizontal, I would like to have my own font "Cheri" for the about etc. To do this would I need to save text as a gif or a jpg? The jpg looks crisp where as the gif is not so sharp, the jpg has a black background white text, gif white text transparent background, the gif works well with hover, the jpg has the boxed background, if using a jpg do I need to create another file for hover? If so where do I place this in code?
I did what gramps descibed in James Branstons question works well, but the sub menu boxes have disappeared.
Hope this all makes sense, hard to explain what you want when you don't know exactly what you're doing. Many many thanks in advance.

Hi back on the website today just tried out the mouseover and mouseout, I must be doing something wrong as it looks like goulash at the moment, sorry to be a pain and thankyou in advance, as coding is something quite new and frightening for me help is really appreciated.
Currently code is:
    </script>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">about</a></li>
      <li><a href="#">recipes</a></li>
      <li><a href="#">shopping</a></li>
      <li><a href="#">contact</a></li>
    </ul>
</div>
<div id="mainNavspace"></div>
When I added the code below to the about region thats when I made goulash.........
<li><a class="MenuBarItemSubmenu" href="#"><img name="about" src="jpgs/about.jpg" onMouseOver="about.src='jpgs/about_over.jpg'" onMouseOut="about.src='jpgs/about.jpg'" /></a>
Thank you for patience in advance, if you could show me how the code should look I would be very grateful, kind regards.

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.

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

Fixing a set width for horizontal menu bar

I'm using the Spry horizontal menu bar at the top of my page and want to put it as a set width that doesn't zoom or shrink in size when someone uses this function on their screen. At the moment, when zooming, the menu wraps to the next line. How can I stop this? Does anyone know how to do this please?
Many thanks,

You can set the width of the menuitems as a percentage, you can also set a minimum width for the menubar container (UL).
Gramps

XML data for Spry Menu ?

I maintain several web sites with static pages that all carry
a common Spry menu bar hard coded into each page via a template.
How can I use an XML file to feed a Spry menu widget to save
uploading all the pages every time there is a change on the site
that requires the menu to be updated?
I've searched the web and help files for an answer to this
without success, so any help or pointers would be most appreciated.

I made this example that uses a xml file to build the spry
menu, the page is html, you need to make a seperate dataset for
each <ul> tag, or item group in the menu, notice the two
datasets in my sample, you could expand and make as many as you
want, all drawn from xml files. check out the page here:
http://gohbcc.com/examples/menutest.html
html page:
<!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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item
1</a>
<ul>
<div spry:region="ds1">
<li spry:repeat="ds1">
<a href="{a/@href}">{a}</a>
</li>
</div>
<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>
<div spry:region="ds2">
<li spry:repeat="ds2">
<a href="{a/@href}">{a}</a>
</li>
</div>
<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>
<p> </p>
<div spry:region="ds1" style="float:right;">
<table>
<tr>
<th>A</th>
<th>A/@href</th>
</tr>
<tr spry:repeat="ds1">
<td>{a}</td>
<td>{a/@href}</td>
</tr>
</table>
</div>
<p> </p>
<script type="text/javascript">

</script>
</body>
</html>
XML Files
t.xml;
<?xml version="1.0" encoding="utf-8"?>
<links>
<link><a
href='customer_enter.php?method=Fname'>First
Name</a></link>
<link><a
href='customer_enter.php?method=caseNum'>Case
Number</a></link>
<link><a
href='customer_enter.php?method=Lname'>Last
Name</a></link>
<link><a
href='customer_enter.php?method=caseWorker'>Case
Worker</a></link>
</links>
s.xml:
<?xml version="1.0" encoding="utf-8"?>
<links>
<link><a href='customer_find.php?method=name'>By
Name</a></link>
<link><a
href='customer_find.php?method=caseNum'>By Case
Number</a></link>
<link><a href='customer_find.php?method=date'>By
Date</a></link>
<link><a
href='customer_find.php?method=itemNum'>By Item
Number</a></link>
</links>

Can you have a different colour horizontal Spry menu on multiple pages?

Hi,
I'm fairly new to Dreamweaver and CSS. So please forgive me ignorance.
I've created a page with a horizontal spry menu bar, and have edited it according to how I want it to look.. Brilliant!. The problem I have is I want the exact same menu bar on multiple pages but using a different colour scheme for a couple of the pages!. Is this possible? Thanks

I am sorry, but I do not see that you have added the suggested code to the document as per
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Touring Sport</title>
<meta name="keywords" content="Football Tours, Youth Football Tours, Junior Football Tours, Boys Football Tours, Girls Football Tours, Ladies Football Tours, Mens Football Tours, European Football Tours, School Football Tours">
<meta name="description" content="Football Tours in the UK and Europe.">
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

</script><style type="text/css">
</style></head>
Gramps

Problem with .css for Spry menu

Hi,
I am having a problem with the Spry menu I have created and edited. All looks great in the Design view of Photoshop however under the Live view or opened using a browser the menu reverts to a list of hyperlinks!
I have checked the .css link but when using Firefox CSS editor the CSS file for the menu is simply blank?
Any suggestions would be great!
Thanks,
Ozan

Your SpryMenuBarHorizontal.css needs to be within your SpryAssets folder, which is where it would have been put automatically when you inserted the SpryMenuBar. You can move it back in there using the Files Panel.
Here is what the file structure needs to look like:
SpryAssets
SpryMenuBar.js
SpryMenuBarHorizontal.css
cssstyletemplate.css
index.html (or whatever the name of your page is)
Hierarchally, the top level of your root folder will show folders for SpryAssets and css and the html pages will be on the same level.
The Spry assets themselves will be down a level IN the SpryAssets folder, as the styletemplate.css file will be down a level IN the css folder.
In the head of the document, you will have
     <link rel="stylesheet" type="text/css" href="css/styletemplate.css" />
     <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> </script>
     <link rel="stylesheet" type="text/css" href="SpryAssets/SpryMenuBarHorizontal.css" />
At the end, remove the slash before Spry inside the imgDown and imgRight sections:
     <script type="text/javascript">

</script>
Compare these with your files and file structure and correct any small typos, and they should be correctly linked.
Beth

Using external xml for spry menu help

Just started playing with DW CS3, I would like to know how to
insert a spry menu and get the xml data from an external file. Can
anyone point me at a suitable example or tutorial please?

The video workshop has some great tutorials with spry.
http://www.adobe.com/designcenter/video_workshop/
Aram

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 .

Problem setting different width for images using HorizontalList tag

Hi,<br />I succeeded using HorizontalList in my AdvancedDataGrid,<br /><br /> <mx:groupedColumns><br />...<br />...<br /> </mx:groupedColumns> <br /> <mx:rendererProviders> <br /> <mx:AdvancedDataGridRendererProvider <br /> dataField="Actual" <br /> renderer="ChartRenderer" <br /> columnIndex="3" <br /> /> <br /> </mx:rendererProviders> <br /><br />My Chartrenderer:<br /><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" <br /> xmlns:local="*"><br /> <mx:Script><br /> <br /> import mx.collections.ArrayCollection;<br /> import mx.controls.Image;<br /> private var images:Array; <br /> private var catalog:ArrayCollection; <br /> private static var cat:Array = [<br /> "kpi_overtime_bar_10.png", "kpi_overtime_bar_20.png",<br /> "kpi_overtime_bar_30.png", "kpi_overtime_bar_40.png"<br /> ];<br /> <br /> <br /> private function initCatalog(items:Array):void<br /> {<br /> catalog = new ArrayCollection(items);<br /> myList.dataProvider = catalog;<br /> }<br /> <br /> <br /> </mx:Script><br /> <mx:VBox height="20" width="40%" xmlns:mx="http://www.adobe.com/2006/mxml"<br /> horizontalScrollPolicy="off" <br /> verticalScrollPolicy="off"><br /> <mx:HorizontalList width="100%" id="myList" <br /> horizontalScrollPolicy="off"<br /> verticalScrollPolicy="off"<br /> columnCount="4" <br /> creationComplete="initCatalog(cat)"><br /> <mx:itemRenderer><br /> <mx:Component><br /> <mx:Image width="50%" height="20"<br /> maintainAspectRatio="false"/> <br /> </mx:Component><br /> </mx:itemRenderer><br /> </mx:HorizontalList><br /> </mx:VBox><br /><br /></mx:Application><br /><br />This is a test I've done to see if I can palce a list of images in a cell,<br />and I can :)<br /><br />I have 2 problems:<br /><br />1. Here the size of each image is contant, I need a way to set each image in the list to be different,<br />Can I do it? <br />2. I need to load the images dynamically and not from a fixed Array,<br />Can I do it?<br /><br />It will be great to get help.....<br />Thanks<br />Jo

On Sunday 15 Feb 2009, Yossi Bar wrote:
> I think not all my descussion detailes were shown,
I think you should be asking on FlexCoders...
Tom Chiverton
Helping to collaboratively enable 24/7 plug-and-play portals
This email is sent for and on behalf of Halliwells LLP.
Halliwells LLP is a limited liability partnership registered in England and Wales under registered number OC307980 whose registered office address is at Halliwells LLP, 3 Hardman Square, Spinningfields, Manchester, M3 3EB. A list of members is available for inspection at the
registered office together with a list of those non members who are referred to as partners. We use the word partner to refer to a member of the LLP, or an employee or consultant with equivalent standing and qualifications. Regulated by the Solicitors Regulation Authority.
CONFIDENTIALITY
This email is intended only for the use of the addressee named above and may be confidential or legally privileged. If you are not the addressee you must not read it and must not use any information contained in nor copy it nor inform any person other than Halliwells LLP or the addressee of its existence or contents. If you have received this email in error please delete it and notify Halliwells LLP IT Department on 0870 365 2500.
For more information about Halliwells LLP visit
www.halliwells.com.

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;

Different widths for Spry Menu Submenu items

Similar Messages

Maybe you are looking for