Center the Spry Menu?

How does one get the Spry menu to align center (relative to
page size)? I'm doing a horizontal menu and it always stays
left-justified. I can't seem to get it to stay center via CSS
editing or anything like that. Any help? Thanks!

Using CSS you need to place a container around the menu with
the side margins set to auto.

Similar Messages

Spry horizontal menu, can't center the whole menu bar

I have a horizontal menu set up more or less how I want it
(after much time). But I can't seem to figure out how to center the
entire menu. Adding padding or margins pushes it out beyond the
700px box even if I resize the menu itself to be smaller than
700px. The page is here:
http://peacefuldriver.net/mnguitar/index_dropdown.htm#.
And the CSS:
http://peacefuldriver.net/mnguitar/SpryAssets/SpryMenuBarHorizontal.css.
Thanks for your help.

another_nickname wrote:
> I have a horizontal menu set up more or less how I want
it (after much time).
> But I can't seem to figure out how to center the entire
menu. Adding padding or
> margins pushes it out beyond the 700px box even if I
resize the menu itself to
> be smaller than 700px. The page is here:
>
http://peacefuldriver.net/mnguitar/index_dropdown.htm#.
>
> And the CSS:
>
http://peacefuldriver.net/mnguitar/SpryAssets/SpryMenuBarHorizontal.css.
>
> Thanks for your help.
>
I'm not familiar with the spry menus - but if you were to
play with the
padding on this rule (1.85em might just do it) I think you
can achieve a
pretty good result......
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEEEEE;
padding: 0 1.5em;
color: #0000CC;
text-decoration: none;
/*background-image: url(../images/line.gif);
background-repeat: no-repeat;
background-position: right;*/
HTH
chin chin
Sinclair

Trying to Center a Spry Menu bar.

Hi
I must be a bit stupid as I really can't work this out.... How do I center a Spry menu bar?
I have tried putting the code in the head of the document page as follows, but it is not working.
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
What am I doing wrong?
Also, If my page is a fixed width of 850px how wide should I make the width of the menu bar?
Many thanks
Piupiutoo

Have a look here: http://foundationphp.com/tutorials/sprymenu/centering.php
I hope it helps.
Ben

How to align the spry menu pannel in dreamweaver cs4

Can someone tell me how to align the spry menu pannel either left, center, are right in a div tag? I'm talking the whole pannel I have within a div tag.
Thanks

Defaults to left align
To center ul.MenuBarHorizontal{margin: 0 auto; width: 32em;} addjusting the width to suit.
To align right ul.MenuBarHorizontal {float: right; width: 32em;} addjusting the width to suit.

Is there any way to disable the mouse-over function of the Spry Menu Bar (CS5)? Click-open preferred

Hello,
I'm using the standard CS5 Spry Menu Bar (Horizontal) in Dreamweaver. I have it set up exactly the way I want with CSS. However, I've very little experience with Javascript, consequently I'd like to ask anyone here for some help in modifying this aspect of the Spry Menu Bar. I'd like it to 'click-open' and not open when the mouse is over it. I've tried to change the delay variables in the code to something that has a longer duration in milliseconds; unfortunately, this tends to cause some bugs such as the menu re-opening once the mouse is no longer near it and other such bugs.
The ideal solution for me would be to have it open when it's clicked on once. The reason I need this is because the menu appears over some buttons - there's no way around this for me, it's the layout I absolutely must have. Although the buttons don't overlap with the menu, they are very close and it is annoying when your hand slips a little and the menu pops up over it all.
I'd appreciate any help at all, thank you.
PS:- The Javascript containing the delay variables I tried to modify.
Spry.Widget.MenuBar.prototype.init = function(element, opts)
    this.element = this.getElement(element);
    // represents the current (sub)menu we are operating on
    this.currMenu = null;
    this.showDelay = 250;
    this.hideDelay = 600;
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // Fix IE6 CSS images flicker
    if (Spry.is.ie && Spry.is.version < 7){
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch(err) {}

Hello,
Thank you so much for replying so quickly and moreover, solving my problem. I must apologise for not doing more research about this issue by searching these forums more thoroughly. I found a similar post here:-
http://forums.adobe.com/message/139937#139937
Your solution goes one step further and eliminates the need to search through the Javascript for the relevant code.
Thank you again, you've helped me a great deal.
Best wishes,
foreverdusty.

I colored the spry menu, but it's not showing up in preview.

I changed the color of my spry menu from beige to black. It shows up on my work page, but when I try to preview it, it's as if I had never changed the color. I also tried going to the page through Firefox, but it's not showing up there either. The code says the background of the menu is #000, One the design panels it says the background color is #000 as well. Can someone tell me what I'm missing that is making the spry menu stay at the default color?

Not a good option unfortunately.
"allow multiple consecutive spaces" is an old option in DW which should be discontinued. It simply inserts multiple non-breaking spaces when you press the spacebar.
It's ugly, and unpredictable since it depends on font sizes, browser text sizing etc.
Better to use CSS
letter-spacing http://www.w3schools.com/cssref/pr_text_letter-spacing.asp
word-spacing http://www.w3schools.com/cssref/pr_text_word-spacing.asp

I am not able to edit the spry menu via dreamweaver

After having configured a spry-menu-horizontal-bar in my we page the
day before, I cam back to add more links, however, I found this error
message:
The following translator were not loaded due to errors:
PHP_MySQL.htm, has configuration information that is invalid.
Spry.htm: has configuration that is invalid.
SplyWidget.htm: has configuration information that is invalid.
XSLT.htm: has configuration information that is invalid
I am not able to edit the spry menu via dream weaver and doing the
modifications by hand is cumbersome and prone to errors.
Does anyone know how to solve this problem?
Have a good day!
http://www.tandooristyle.ca/ArbolOne1.html

Not sure exactly why, but somethings don't look normal like why you have a PHP_MYSQL.htm file?
Anyways, bets to post this on the Dreamweaver forum instead of the Developer Toolbox forum. You will get a much quicker response as this has nothing to do with the Adobe Dreamweaver Developer's Toolkit.
Brad Lawryk
Adobe Community Expert, Dreamweaver
Adobe Usergroup Manager, Northern British Columbia Adobe User Group

Howto: Random color in the spry menu

Im new to css and trying to use random colors when hovering over the links in the spry menu.
I anderstand i need to use javascript for the random hex value, but i cant figgure how to insert the value into the css.

Have a look at th Spry Element Selector Utility which can be found here http://labs.adobe.com/technologies/spry/articles/element_selector/ and here http://labs.adobe.com/technologies/spry/articles/data_api/apis/element_selector.html
I hope this helps.
Ben

I cannot locate the Jump Menu under Insert/Form. I am looking for a way to replacve the Spry menu I used previously

I need to modify my website and I used a Spry menu to direct users to specific pages. This is no longer supported with the 2014 version and thought a Jump Menu would work, but it is not on the insert/form menu as instructed in help files. Any ideas?

Jump Menus still exist in CC, they're just created differently than they used to be. For some reason I can't figure out, they've been a bit buried...
1. Click in Design View where you want the Select Menu to appear
2. Go to Insert > Form > Select
3. Click on the Select Menu created in Design View
4. Click the + in the Behaviors Window and choose Jump Menu
From there, you should get the familiar Jump Menu dialogue box.

Dreamweaver Help | Working with the Spry Menu Bar widget

This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

How do I keep the Spry menu fixed to the bottom of the header div?

I have created a horizontal Spry menu bar using Dreamweaver CS4 but the problem is, I can't figure out how to make it be in the right position at the bottom of the header div. In Design View it is too far below the header background graphic, in Live View it cuts off the bottom of the header graphic, and it also looks higher or lower in Safari and Firefox.
I'm sure it's very simple, but how can I control them menu on the y-axis and keep the menu fixed to the bottom of the header div? Is there a way to float it to the bottom?
I really appreciate any help or advice anyone can give me on how to get a stationary menu bar.

Below is an example of a fixed-header & footer layout with jQuery smooth scrolling. I did not use a separate scrolling div because mobile users have lots of trouble with them.
View source to see the code.
http://alt-web.com/TEMPLATES/FixedLayout.shtml
You need 4 basic things:
jQuery latest core library,
jQuery easing.js,
jQuery anchor.js, inside the <head> of your document
jQuery function code, near the bottom of your document.
That's all there is to it.
Nancy O.

Fixing Some of the Spry Menu Limitations

Example and Tutorial:
http://www.projectseven.com/testing/adobe-bugs/spry-menus/
Spry menus bug me. Not because I dislike Adobe and not even because my company makes menu tools for Dreamweaver. Spry menus bug me because they are targeted at beginners, which are the very group that would not be able to understand or fix the limitations and problems. The little tutorial we prepared seeks to do that. Note, however, there is at least one fatal flaw in the Spry menus that ship with Dreamweaver and that is that the menus will not work in mobile devices. There is no easy fix for this so if you decide to go with Spry menus, understand that the sub-menus will not be accessible in mobile devices. In order to get that fixed one must use Spry 2.0, which does not come with Dreamweaver. Our tutorial is for beginners. It addresses real issues and I would hope it becomes something regularly referenced here.
Enjoy.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Most modern menus allow for links on the root to be live. Tap once, the
sub-menu opens. Tap again, the link is executed. This has become the
convention. But keeping the root menu items null would get around the issue.

How to pass a value instead of index to the spry menu?

Hi,
I am using spry menu in DW and I have a page called products which has a menu with some items. The question is how can I access to item menus using this link:
".../products.html#USNP"
Now I can access to a specific menu item of this page using the following link ".../products.html#tab=3" but i like to have the name of the menu items instead of the item number.
I would be appreciated if anyone can help me .
Thanks

So we are talking SpryTabbedPanels where the tabs are used as your menu bar.
The out-of-thebox Spry product identifies each tab as a number and as such, only numbers can be use to open each panel.
To overcome this limitation, you can assign your expressions to corresponding numbers. I am not sure if the '#' will do the trick, thinking that you may need to assign a variable instead.
Gramps

How to change the direction of the Spry menu?

Is there a way to change the SpryMenuBarVertical menu to fold
out to the left? I am using this menu on the right side of the
website and it now folds out to the right (standard). I have tried
for hours to change the css (float left, etc) but must have
overlooked something. Can somebody please help?
This is what it looks like so far...
http://www.norske.nl/zomer/tours/auto01.html
(Click on the orange field: "50 Autotours")

Is there a way to change the SpryMenuBarVertical menu to fold
out to the left? I am using this menu on the right side of the
website and it now folds out to the right (standard). I have tried
for hours to change the css (float left, etc) but must have
overlooked something. Can somebody please help?
This is what it looks like so far...
http://www.norske.nl/zomer/tours/auto01.html
(Click on the orange field: "50 Autotours")

How do you prevent the spry menu from using the main css background-image?

(Dreamweaver CS5. Problem seems not to be browser specific)
I added some code I found online to my main css file in order to allow a custom icon to be used as a bullet in unordered lists, sitewide. It was added before the "body,td,th {" line.
The problem is that the same icon now appears on the upper left hand corner of each main menu segment; not on any submenus or during any mouse states. Just the main at-rest bar.
I know this is somehow related to spry itself being a list, but how do I keep it from showing the background image of the main css file?
Thanks!
This is the site http://www.usc.edu/org/seagrant/NS/
The code which was added to the css file is shown below:
ul{
    list-style:none;
    margin:0 0 1em 15px;
    padding: 0;
ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(../Images/Compass_Website_small_2-4-11.png) no-repeat 0 4px;
li ul{
    margin:0 0 0 30px;
    list-style:disc;
li ul li{
    padding-left:0;
    background:none;
li ul li ul{
    margin:0 0 0 30px;
    list-style:circle;
ul li ul li ul{
    padding-left:0;
    background:none;
/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */
@media print{
ul {
    list-style:disc;
    margin-left:30px;
ul li {
    padding-left:0px;
    background:none;
} /* end print */
body,td,th { - etc...

Add/modify the following to your document
ul.MenuBarHorizontal li {
    background: rgba(0,0,0,0.0) url(none);
Gramps

Center the Spry Menu?

Similar Messages

Maybe you are looking for