Menu Bar Widget - how to target li name="item_one"

Hello,
I am using CS5.
I using spry widget menu bar ... simple layout and I want to target individuals element on li.
Here is the code
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li name="item_one"><a href="#">Item 1</a> </li>
<li name="item_two"><a href="#">Item 2</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
I want to target with CSS name="item_one" so I can change background image, etc.
On CS3 there was a "inset menu bar" option then you could target individuals elements.
I have a nav bar that each element has different backgrounds images.
On the CSS I have the standard CSS that dreamweaver installs. But for example the ul.MenuBarVertical a targets every thin on the page.
On the properties window (once you click on the individuals items you can assign names hence "item_one" and "item_two"
and it call it CSS-P Element.
Thank you in advance.
Carlos

Ben,
Thank you for the link. On the vertical menu bar it shows
.MenuBarVertical .MenuItem {
     padding: 0px 4px 0px 0px;
     border-color: #ffffff #ffffff #cccccc #ffffff;
     border-style: solid none none none;
.MenuBarVertical .MenuItemLast {
     border-style: solid none none none;
.MenuBarVertical .MenuItem .MenuItemLabel{
     padding: 6px 22px 6px 19px;
.MenuBarVertical .MenuItemHover {
     border-color: #ffffff #ffffff #cccccc #cccccc;
Which there is a class .MenuItem
When I turn Live Code on CS5 and hover over the item you get this
<ul id="MenuBar1" class="MenuBarVertical">
<li class="item_one"><a href="#" class="MenuBarItemHover"> </a> </li>
<li><a href="#" class="">Item 2</a></li>
</ul>
It is interesting that on the construction CS5 places a .MenuBarItem class. I placed the class="item_one" to be able to target (change background, etc)
that specific item with this CSS
ul.MenuBarVertical .item_one
a{
display: block;
cursor: pointer;
color: #333;
text-decoration: none;
background-image: url(../images/Home-UP.png);
background-repeat: no-repeat;
height: 6em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical .item_one a:hover ,ul.MenuBarVertical .item_one a:focus
color: #000;
background-image: url(../images/Home-OVER.png);
Which in turn it gives the effect to change background image when hover.
Carlos

Similar Messages

How to turn of Leopard Screen Sharing menu bar indicator in the target Mac?

How to turn of Leopard Screen Sharing menu bar indicator in the target computer?

On target computer go to system preferences>sharing>remote management. From here, select computer settings and uncheck box 'show remote management status in menu bar'.

Spry Menu Bar Widget 2.0 (1.0) -- IE 6 Rendering Snag

Hi:
Once again I need to call on the aid of others with more detailed knowledge of the spry frameworks, particularly the Spry Menu Widget 2.0 (vers. 1.0) developed by Adobe labs.
I have posted the site to http://www.aclco.org/testing/index.html. You will see that it works beautifully, thanks to the help of many contributors, except in IE 6.0, where, when the sub menus become visible and drop down, it causes all page elements (divs) to be pushed down to create the necessary room to accommodate the drop down. The natural overlap of the sub-menu over pre-existing content doesn't seem to overlay properly.
It does this on all pages, and not just those which present flash sideshows. And as I say it is peculiar to IE 6.
I have followed the tutorial provided by David Powers in deploying the widget and have not altered the spry skin css or the basic css. Any changes (affecting padding, etc. and adding of background images where created using the widget browser and supplemented in the css added to the template page. The "add-on" css was then added to the general style sheet governing the whole site layout.
I was wondering if anyone else has experienced this problem, if there are any work arounds or hacks that anyone is aware of, or any other suggestions that might help.
I haven't been able to preview this on a free standing PC using IE6, but was able to reproduce the problem on 2 cross browser testing services employing a "live mode". I renders properly until the sub-menus are called upon to become visible, and then the problem manifests.
Your assistance will be greatly appreciated.
Sincerely,
Steve Webster
Attach.
Please note: Attached are the relevant excerpts from the customized style sheet as amended from the spry widget browser:
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt%20Light2.png);
background-repeat:repeat-x;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:2E35A3;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */

I have systematically reviewed the tutorial of David Powers on the Spry Menu bar 2.0, and recreated the process in a methodical process - making one change at a time, and then checking each step on a cross browser testing server, and have found, quite to my amazement that what seems to be causing the problem of the "gap" in IE 6 is by removing the customized styles from the head of the individual pages, and placing them in CSS stylesheet that governs the entire site.
I find this quite inexplicable. When the customized CSS rules governing the menu bar are situated in a separate stylesheet, the page renders well enough for any of the "modern" browsers, but won't render in IE 6. All that I get is a horizontal menu with drop downs, but none of the styling (specifically background colours, background images, etc.) that are called for in the stylesheet and that otherwise appear when rendered by other browsers.
I realize that this sounds strange, but I was wondering if anyone had experienced this phenomenon, or could offer any explanation.
Any suggestions would be greatly appreciated.
Steve Webster

Menu bar widget submenu placement bug in IE7

I am tring to set up my first horizontal menu bar widget.
Looks great in FF, but the submenu is placed over the main
menu and off to the side in IE7.
Could any one help?
Example is located here:
http://dco4.com/spry_test/
Submenu is under "consumables" button.

Possibly a padding or margins error.. having a similar issue
myself only it lines up properly in IE and not in Firefox!
Sorry..

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.

Menu Bar Widget works in IE not Firefox

I am using the horizontal menu bar widget on this Web page:
http://www.ucg.org/booklets/FM/new/
. The drop down under the TABLE OF CONTENTS works as intended in
IE, but in Firefox the drop down does not show at all. I am
wondering if Firefox is not able to properly view the constructor I
built as an include within my top navigation. Any help is
appreciated.

I am having a similar issue with the horizontal menu bar. It
works perfectly fine in IE 7, but when I tested it in Firefox only
the first and third, of four, menus actually drop down.
Unfortunately I can't actually show you the error since I this is
only a pre-release version and as such it hasn't been uploaded to
the web, but I have posted images of the issue
Firefox working on the first :
http://www.flickr.com/photos/80733324@N00/2343834946/
Firefox not working on the second :
http://www.flickr.com/photos/80733324@N00/2343834840/
IE 7 working on the second :
http://www.flickr.com/photos/80733324@N00/2343005261/

Bugs in Spry 1.6.1 menu bar widget affect performance in IE6

The Spry 1.6.1 menu bar widget has bugs that result in the showSubmenu and hideSubmenu methods being called more times than necessary. This is especially noticable in IE6 because multiple iframes are then created and deleted on every menu bar mouseover event, which makes the menu bar display slow and jerky.
Two of the bugs are incorrect references when checking whether a submenu is visible before calling showSubmenu/hideSubmenu, and the other three are places that I think also need checks for whether a submenu is visible before calling hideSubmenu.
I've attached a "SpryMenuBar-fixed.js" file that fixes those bugs. All changes are marked with "BUG FIX", and I left the previous code commented out for reference.

I have systematically reviewed the tutorial of David Powers on the Spry Menu bar 2.0, and recreated the process in a methodical process - making one change at a time, and then checking each step on a cross browser testing server, and have found, quite to my amazement that what seems to be causing the problem of the "gap" in IE 6 is by removing the customized styles from the head of the individual pages, and placing them in CSS stylesheet that governs the entire site.
I find this quite inexplicable. When the customized CSS rules governing the menu bar are situated in a separate stylesheet, the page renders well enough for any of the "modern" browsers, but won't render in IE 6. All that I get is a horizontal menu with drop downs, but none of the styling (specifically background colours, background images, etc.) that are called for in the stylesheet and that otherwise appear when rendered by other browsers.
I realize that this sounds strange, but I was wondering if anyone had experienced this phenomenon, or could offer any explanation.
Any suggestions would be greatly appreciated.
Steve Webster

Air Play icon not showing up in menu bar. How do I fix this?

Air Play icon not showing up in menu bar. How do I fix this?

What year is the MacBook Pro from?
AirPlay: iOS and Mac

I have lost the email Address Book from the menu bar. How do I get it back?

I have lost the address book from the menu bar. How do I get it back?

Which menu bar? Finder or your email client? Which email client are you using btw? If your email client you can customize your menu through the view>toolbars menu.
If Mail it's view>Customize Toolbar
Finder menu it's System Preferences>Users & Groups>your account>unlock the padlock>Login Items - add the address book by clicking the "+" sign. When done lock the padlock.

In bar graph how should we get name of diminsion on perticular bar in labwindow/CVI ?

in bar graph how should we get name of diminsion on perticular bar in labwindow/CVI ?

Can you explain your question a bit more? Can you add an example of what you want to obtain?
Proud to use LW/CVI from 3.1 on.
My contributions to the Developer Zone Community
If I have helped you, why not giving me a kudos?

I just got an IPAD2 on Saturday. With the Mac, I could always tell when programs were open/running by going to the menu bar. How can I tell what programs are running in the background. I am struggling with not being able to go to a menu bar at the top

I just got an IPAD2 on Saturday. With the Mac, I could always tell when programs were open/running by going to the menu bar. How can I tell what programs are running in the background. I am struggling with not being able to go to a menu bar at the top

You can see which apps are open and/or recently used by double-clicking the home button to bring up the taskbar at the bottom of the screen (not all apps that appear there are active) - you can then close apps on it by pressing and holding one of them for a couple of seconds or so until they start shaking, then press the '-' in the top left of the Mail app to close it, and touch any part of the screen above the taskbar so as to stop the shaking and close the taskbar. If you have an app 'open' on-screen then it won't appear on the taskbar, you will need to go back to the homescreen first, and it should then show when you next open the taskbar.
If you haven't already got a copy then you can download the iPad manual from here : http://support.apple.com/manuals/#ipad

Adobe recommends: Customizing a Spry Menu Bar widget

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Our second recommendation is a piece by David Powers:
Customizing a Spry Menu Bar widget
The tutorial takes you through some of the most common styling tasks for the difficult-to-style Spry Menu Bar widget in Dreamweaver.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices

Customizing a Spry Menu Bar widget
The tutorial takes you through some of the most common styling tasks for the difficult-to-style Spry Menu Bar widget in Dreamweaver.
Why is such an important article posted on David's private website instead of on Adobe's own website? What is the guarantee that the article will remain on David's website for some years to come! Such an important article should remain online for at least 5 years before it is deleted to create room for new articles.

HT204406 no itunes match update in menu bar so how do i update

no itunes match update in menu bar so how do i update

You see the orange (on Linux gray) Firefox button if the Menu Bar is hidden, so you need to hide the Menu bar via View > Toolbars, also accessible via Firefox > Options.<br />
If you need to access the hidden Menu bar then press F10 or hold down the Alt key to make the Menu Bar appear temporarily.<br />
Firefox 4 has two bookmark buttons with a star in the Customize window.<br />
One star button has a drop marker that open a Bookmark menu.<br />
The other star button without the drop marker opens the bookmarks in the sidebar.<br />
<br />
You can drag the Bookmarks menu button with the drop marker in the Customize window from the toolbar palette on a toolbar (e.g. Navigation Toolbar or Tab Bar or to the left side of the Bookmarks Menu Items).<br />
You only see the Bookmarks menu button if the menu bar is hidden.<br />
If the bookmarks toolbar is visible then the default bookmarks menu button will appear on the right hand side of the Bookmarks Toolbar as part of the Bookmarks Toolbar Items.<br />

Menu Bar Widget

Hi All,
I have a horizontal menu bar widget with various
menus/submenus... Is there a simple way of adding a new item to the
existing menu/nav bar and have it apply the changes to all of the
pages, or do I have to edit each menu/navbar individually?
I have to many page now!!
Thanks
BoodleAU

In DW, press F1, and read about "server-side includes".
That's your
answer....
Alternatively, you could consider bringing your site under DW
template
control, but this will take an effort for a site with more
than about 5
pages.
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
==================
"BoodlesAU" <[email protected]> wrote in
message
news:g5ju4o$gr8$[email protected]..
> Hi All,
>
> I have a horizontal menu bar widget with various
menus/submenus... Is
> there a
> simple way of adding a new item to the existing menu/nav
bar and have it
> apply
> the changes to all of the pages, or do I have to edit
each menu/navbar
> individually?
>
> I have to many page now!!
>
> Thanks
> BoodleAU
>

Menu bar shows icon instead of application name

For an unknown reason, my menu bar now shows an icon for the application in the open window instead of the name of the application. For instance, when I switch to the Finder, the smiley face is in the menu bar next to the Apple menu. How can I return to have the application name shown?

If you are looking for tech help with a third party application contact the developer. These forums are for Apple hardware and software as per the
Apple Support Communities Terms of Use.

Menu Bar Widget - how to target li name="item_one"

Similar Messages

Maybe you are looking for