Updating my links in a spry menubar
I just made my first spry menu bar and I'm wondering how to
update my links. If I update a link in the spry property inspector
on one page, it only changes the html on that page doesn't seem to
want to update the spry menu on subsequent pages. How can I
accomplish this?
I was hoping you weren't going to say that <G>! Can
spry menubars be created as a Library item, then when I make a
change it applies the change to anywhere in the site that library
item is?
Similar Messages
-
my (church) website has a number of HTML "Calendar" pages. One page for each month, with easy navigation from one page to another. These pages list services and activities that happen during the month. I retain several previous months' pages as well as future months, so that visitors can see what sort of stuff goes on at the church. On the home page and on several other pages I have a Spry menubar tab named "calendar". Each new month, I edit the menubar tab links to navigate to the current month Calendar page. Is there an easy way to update all these links simultaneously? Or should I direct the menubar links to a single dummy page as an intermediate page that will redirect immediately to the current page (so I only have to edit the dummy page each month)?
You are not referencing the Library item properly although this is a creative attempt. The correct way to do it (with this example) would be to start with this code on your page containing the spry menubar -
<li><a href="#">Home</a></li>
In Design view, select the word "Home" and on the Quick tag selector (at the bottom of the document pane) click on the "<a>" so that the entire link is selected. Then in the Library category of the Assets panel, select ThisMonth.lbi, and click on INSERT at the bottom of the Library pane. And you will have replaced that Home link with the Library item. Your resulting code would look like this -
<li><!-- #BeginLibraryItem "/Library/ThisMonth.lbi" --><a href="../pages/2013_01.html">Home</a><!-- #EndLibraryItem --></li>
Now, DW will manage that link for any changes you make to the Library item. -
Dreamweaver spry menubar vertical doesn't work properly in firefox 3.6.3 for windows
The links in the menu items in the left hand sidebar (a Spry menubar vertical) do NOT work properly in Firefox 3.6.3 for Windows. They work when the home page is first loaded, but when you go to another page using the menu links and return to the home page via the BACK ARROW, the links no longer work. You have to reload the page to get the links to reappear.This bug is only manifested in Firefox 3.6.3 for Windows. The menus work as expected in IE 8 for Windows, Google Chrome 4.1.249.1064 (45376) for Windows, Safari 4.0.5 for the Mac, Google Chrome 5.0.375.38 beta for the Mac and Firefox 2.0.0.17 for the Mac.
== URL of affected sites ==
http://elkview.zxq.net/Your above posted system details show multiple Java Console extensions.
You can uninstall (remove) the Java Console extensions and disable the Java Quick Starter extension, you do not need them to run Java applets.
See http://kb.mozillazine.org/Java#Multiple_Java_Console_extensions
See also http://www.java.com/en/download/help/quickstarter.xml - What is Java Quick Starter (JQS)? What is the benefit of running JQS? - 6.0
Disable the Java Quick Starter extension: Tools -> Addons -> Extensions
Control Panel -> Java -> Advanced tab -> Miscellaneous -> Java Quick Starter (disable)
You can try a direct connection: <br />
Control Panel > Java > General tab > "Network Settings...": "Direct Connection" (enable) -
Using Spry MenuBar in a FrameSet
Hello,
I would like to use a Spry MenuBar in a fixed top frameset and redirect the link to the bottom frame. However, when I insert the menubar into the top frame, the Spry MenuBar "widget tab" will not show thus not allowing me to configure the menuing other than directly editing in code view.
Any help you can asist with will be appreciated.
Thanks in anvanceI see this is your first post at the Dreamweaver Spry Forum. Welcome!
Framesets are an old way of constructing pages. I don't have specific knowledge about how they work with Spry, but it appears that the answer to that is "not well." In construction, a frameset is a set of child pages arranged in a containing frame.
I suggest that you would be much happier running through a good tutorial on the modern way of building web pages, which is with Cascading Style Sheets. You can easily incorporate Spry MenuBars into those pages.
Here is a link to such a tutorial: http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
Beth -
How to make spry menubar top level only appear for browsers with java turned off
I was under the impression that just the top level of the horizontal spry menubar appears when someone with Java turned off views it...now I see that the entire unordered list appears vertically and takes up the whole page....is there a way to make just the top level menubar items appear when java is turned off in viewers browser?
Thank you in advance for any insight you can provide.
LoisWhen you disable Javascript in your browser...and it is Javascript not Java... if your menubar is properly constructed, the submenus do not appear, only the top level menu items.
It sounds to me as if you are turning off style rendering in Dreamweaver itself, or have not properly linked your CSS stylesheet to your page.
When CSS is linked properly, the submenus are "hidden" with left: -10000px; (a BIG distance) offscreen to the left of the Viewport. They stay there unless Javascript is turned on. It is Javascript that "calls them back" onto the Viewport.
Give me a link, Lois, and I'll check into your page for you...
Beth -
How to make spry menubar first button different colour?
Hi
When making spry menubar how do you make the first button or whatever page you are on a different colour to show that you are on that page?
thanks
alix1. Add a helper script called SpryDOMUtils.js as per
<script src="SpryAssets/SpryDOMUtils.js"></script>
2. Add a function called InitPage or similar that inspects each of the menu items and compares the link with the current URL as per
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
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");
3. Add a listener for when the page is loaded. The listener will be the trigger for the function
Spry.Utils.addLoadListener(InitPage);
4. Add a style rule for the activeMenuItem that we, in our function, addedto the current menu item.
.activeMenuItem a {
background:#a59a84 !important;
color:#ffffff !important;
The !important bit is to override the JS
Your complete document should look similar to
<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="untitled.php">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>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
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);
</script>
</body>
</html>
Gramps -
I am working on this page
http://www.spinsister.nl/TV3/index.htm
which has a
spry menubar at the top. Both FF and IE7 show the menu's as
intented. In IE6
all looks well when the page is first opened, but when a menu
link in the
navbar or in the left sidebar (which has ordinary links, no
spry) is clicked,
all text disappears from the navbar at the top, plus visited
links become
invisible. I experimented with adding a:visited to
ul.MenuBarHorizontal li a
so that it read
ul.MenuBarHorizontal li a:link, ul.MenuBarHorizontal li
a:visited
but that is no good either.
Two questions:
Am I on the right track thinking the problem is with the link
css?
Does someone know how to solve the problem in IE6?
Thank you.
Regards,
Adriana.
[ put out the rubbish if you need to reach me by e-mail ]
www.spinsister.nl> I am working on this page
http://www.spinsister.nl/TV3/index.htm
which has a
> spry menubar at the top. Both FF and IE7 show the menu's
as intented. In IE6
> all looks well when the page is first opened, but when a
menu link in the
> navbar or in the left sidebar (which has ordinary links,
no spry) is clicked,
> all text disappears from the navbar at the top, plus
visited links become
> invisible. I experimented with adding a:visited to
> ul.MenuBarHorizontal li a
> so that it read
> ul.MenuBarHorizontal li a:link, ul.MenuBarHorizontal li
a:visited
> but that is no good either.
> Two questions:
> Am I on the right track thinking the problem is with the
link css?
> Does someone know how to solve the problem in IE6?
I have redone the whole css from scratch, modifying the Spry
Assets style sheet
and checking in IE6 as I went along, and found that "all is
well" in IE6 until
I change the background colour for the menu items {
display: block;
cursor: pointer;
background-color: #666699;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
the moment I change that bg colour, IE6 shows no text in the
menu's as though
I'd set the *color* to #669999. But I haven't.
I have been going over and over this thing now for two days.
Can someone please
help me?
Regards,
Adriana.
[ put out the rubbish if you need to reach me by e-mail ]
www.spinsister.nl -
Spry Menubar-background problem
Hi,
I have tried to search for this problem, and though I have
found others with the same problem, there have been no answers
(probably so obvious I missed it and they figured it out.) And I
did update the Spry Menubar to the latest version.
The Spry Horizontal menubar works fine on Firefox, but on IE
7 the background is white as well as the submenus, not the intent.
The alignment and size is fine, just the designed background colors
don't work (on the menu itself, I want a transparent background, on
the submenus it is #777079.)
Website:
September
Entertainment Website
Style Sheet spry:
Spry
CSS
Thank you in advance for any help you can give me.
Cheers,
JanellHi,
Just found the problem for anyone that is having the same
thing happen. It is the hack at the bottom of
"SpryMenuBarHorizontal.css":
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: fff;
Where it says: "background:fff;" change it to whatever you
need, in my case, "background: transparent;"
Voila!!
Cheers,
Janell -
Spry MenuBar/TabbedPanels/Accordion Javascript Not Working in IE8
As you've heard, Adobe removed the links to the Spry API files (http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l).
My question is: If I link to a remote file, then my spry menu bar/accordion/etc. work in IE 8 properly. If I link to a local file (same content as the remote file though!!), then my spry menu bar/etc. don’t work on IE 8.
Because the remote files are no longer available on Adobe's API site, I had to change all my links and make it linked to SpryAssets/SpryMenuBar (for instance) on my local web server instead. HOWEVER, this doesn't work for IE8.
Why is that? WHy is it necessary to link to a remote file? http://spry-it.appspot.com/ works for me too because it’s remote (however, the file accordion is not available it seems!). But what if they change their link again in the future or remove the link?
Please help!
The website is www.compex.com.sg (please have a look in IE8!!)
Thanks a lot!You might want to cut your losses right now and switch to a different widget framework.
Personally, I never liked Spry. I've been using jQuery for quite some time.
If you want to get it done fast with professional results, look at Project Seven's products. They are rigorously tested to perform well in modern devices. If you need it, their customer support is excellent.
http://www.projectseven.com/
Nancy O. -
Formatting problem with Vertical Spry Menubar with Frameset
I have a frameset, which includes a Top Frame, with a nested
Left Frame, and a nested bottom frame after that. I also have a
vertical spry menubar in this left frame. When I click on an item
to view it's submenu, the center frame of the page cuts of a
significant portion of the submenu. I want the page to appear, so
that when you click on an item to view it's submenu, the submenu
appears past the frame's border, without having to set it up so
that the frame width is relevant to the use of the spry menubar
within it.
I talked to a Tech Support person today over the phone, and
he told me to post here and ask for someone to post custom code for
this.
If anyone can help, it would save me so much grief, and I
would be very greatful!There is no practical way to make a positioned page element
as you have in
the Spry menus cross the boundary between two separate frames
(i.e., two
unique HTML pages).
It is true. Your choices are limited now -
1. DUMP THE FRAMES - you would not be having this problem in
a non-framed
site.
2. Redesign your menus so that they do not need to span a
frame boundary.
3. Redesign the frameset so that you leave enough room for
the largest
popup.
4. DUMP THE FRAMES - you would not be having this problem in
a non-framed
site.
I recommend either #1 or #4, depending on what your needs
are. You just
have no idea the horrors that await you if you continue with
the frames.....
8)
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
==================
"DMMaestro2009" <[email protected]> wrote in
message
news:gbdvir$a8i$[email protected]..
>I have a frameset, which includes a Top Frame, with a
nested Left Frame,
>and a
> nested bottom frame after that. I also have a vertical
spry menubar in
> this
> left frame. When I click on an item to view it's
submenu, the center frame
> of
> the page cuts of a significant portion of the submenu. I
want the page to
> appear, so that when you click on an item to view it's
submenu, the
> submenu
> appears past the frame's border, without having to set
it up so that the
> frame
> width is relevant to the use of the spry menubar within
it.
>
> I talked to a Tech Support person today over the phone,
and he told me to
> post
> here and ask for someone to post custom code for this.
>
> If anyone can help, it would save me so much grief, and
I woulde be very
> greatful!
>
> Here's the link to the page...
>
>
http://www.vrd.ca/713/index2.htm
> -
Hi All,
Just finished adding and styling the Spry Menubar 2.0 for a new template on my site.
http://sfgraphicdesigner.com.au/services.htm
Just wondering what the fallback options are for the Menubar.
The Spry 1.6 Menubar degrades quite gracefully but as the Spry UI creates the a lot of the markup on the fly it looks shocking when Javascript is disabled.
Any thoughts?
Cheers,
StephenHi Lon,
Yeah that's exactly what I'm talking about.
I know I could make this easier on myself with a CSS version but I wouldn't learn anything that way lol!
Plus I have a lot of other sections planned for my site which the Spry Menu will be useful for.
Found some links for a possible answer, haven't had a chance to review them properly yet:
http://css-plus.com/2010/06/how-to-make-a-jquery-drop-down-menu-with-a-css-fall-back/
http://www.simonbattersby.com/blog/jquery-dropdown-menu-plugin-with-css-fallback/
http://www.twinhelix.com/dhtml/fsmenu/
Thanks for the replies,
sf d;-)= -
Is there a way to set the active state on the Spry MenuBar?
Have looked through the forums and not found solution with Spry. I
have this code set up:
quote:
<ul id="MenuBar5" class="MenuBarHorizontal">
<cfoutput>
<li><a id="home" href="
http://#Variables.sDomain#/index.cfm">Home</a></li>
<li><a id="directories" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=11">Directories</a></li>
<li><a id="reports" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=12">Reports</a></li>
<li><a id="documents" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=13">Documents</a></li>
<li><a id="financial" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=14">Financial</a></li>
<li><a id="aboutUs" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=15">About
Us</a></li>
<li><a id="helpDesk"
href="mailto:[email protected]">HelpDesk</a></li>
</cfoutput>
<li>
<cfif IsDefined("Client.EmployeeID")>
<a id="logout"
href="/index.cfm?Logout=1">Logout</a>
<cfelse>
<a id="login"
href="javascript:OpenLogin('/index.cfm');">Login</a>
</cfif>
</li>
</ul>
<script type="text/javascript"><!--
var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5",
{imgDown:"images/SpryMenuBarDownHover.gif",
imgRight:"images/SpryMenuBarRightHover.gif"});
//-->
</script>
I'm interested in putting this 'request' to work on several
in-house sites.
Thank you,
GaryThe last solution worked fine if
- You only had one layer of menus
- you were willing to manually create the menus and links,
not using the properties tool in DW
because that solution wrapped the menu calls in php tags so
javascript calls got messed up
This solution will give you the ability to
- have more than one level of menu (I used two, you can
extend the thinking to more layers if you want)
- like using the DW tools and property window to create
menus
(in other words, it is a much better, more refined solution
=============================================================
<div id="container">
<div id="header">
<h1>Ayuda</h1>
<!-- end #header -->
</div>
<div id="SubHeader">
<div id="NavBar">
<?php
// Get the name of this page - the page being viewed
$ThisPage = $_SERVER['PHP_SELF'];
$ThisPage = basename($ThisPage);
// Set to "BeingViewed" the style for the MenuItem of this
page
// and the style of the MunuItem of all the pages in the
path to get to this page
// including the top-level MenuItem
// with the "BeingViewed" style being defined in the header
above or CSS
// This changes the style
// so that the MenuItem of the page being viewed and in the
path
// look different than the MenuItem for the other pages
// Note that the "NotBeingViewed" style (also defined in the
header above or CSS)
// does nothing. It just leaves the MenuItem as is
// Create one array per top-level MenuItem,
// with all the subordinate pages to that MenuItem included
in the array
// Make sure each page is included in one of the arrays
// Even if a page can be reached by more than 1 path
// it is better (but not mandatory) to include it in only
one path here
// So each page is ideally in one and only one array
// Declare the number of top-line MenuItems
$NumMenuItems = 6;
// Enter each the pages subordinate to each MenuItem in its
respective arrays
// Make sure to label the array variable $Menu[X] where X is
the sequence 0,1,2,...
$Menu[0] = array("index.php");
$Menu[1] = array("AboutUs.php");
$Menu[2] = array("Services.php");
$Menu[3] = array("Customers.php","Pantry.php");
$Menu[4] = array("ContactUs2.php");
$Menu[5] = array("sitesearch.php");
// Initialize the style for all MenuItems to
"NotBeingViewed"
for ( $i=0 ; $i < $NumMenuItems ; $i++)
$CountMenu[$i] = count($Menu[$i]);
for ( $j=0 ; $j < $CountMenu[$i] ; $j++)
$MenuItemStyle[$i][$j] = "NotBeingViewed";
// Set the style for all MenuItems in the path to the page
being viewed to "BeingViewed"
for ($i=0 ; $i < $NumMenuItems ; $i++)
if (in_array($ThisPage,$Menu[$i]))
// Set the style for the top and landing page to
"BeingViewed"
$MenuItemStyle[$i][0] = "BeingViewed";
$LandPageNum = array_search($ThisPage,$Menu[$i]);
$MenuItemStyle[$i][$LandPageNum] = "BeingViewed";
else
// Leave the style for this whole menu as NotBeingViewed
?>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.php"><span
class="<?php echo $MenuItemStyle[0][0];
?>">Home</span></a> </li>
<li><a href="../AboutUs.php"><span
class="<?php echo $MenuItemStyle[1][0]; ?>">About
Ayuda</span></a></li>
<li><a href="../Services.php"><span
class="<?php echo $MenuItemStyle[2][0];
?>">Services</span></a></li>
<li><a href="../Customers.php"
class="MenuBarItemSubmenu"><span class="<?php echo
$MenuItemStyle[3][0]; ?>">Customers</span></a>
<ul>
<li><a href="../Pantry.php"><span
class="<?php echo $MenuItemStyle[3][1];
?>">Pantry</span></a></li>
</ul>
</li>
<li><a href="../ContactUs2.php"><span
class="<?php echo $MenuItemStyle[4][0]; ?>">Contact
Us</span></a> </li>
<li><a
href="../z_HiddenPages/sitesearch.php"><span class="<?php
echo $MenuItemStyle[5][0];
?>">Search</span></a></li>
</ul>
<!-- end #NavBar-->
</div>
<!-- end #SubHeader -->
</div>
<div id="mainContent">
<!-- TemplateBeginEditable name="MainBody" -->
Select this text and replace it with the content you want on
this page
<!-- TemplateEndEditable -->
<!-- end #mainContent -->
</div>
<div id="footer">
<p>Thank you for visiting our site.</p>
<!-- end #footer -->
</div>
<!-- end #container --> -
Hi I'm creating a hobby-related website using Dreamweaver CS3, and I've got it set up to use a Spry menubar for navigation. The Spry menu itself works great-- I'm not having any issues with the actual formatting or functioning of the menu bar.
My question has to do with making changes to the menus and submenus. (I'm still not fully decided on the overall structure of the menu and I know I'll be expanding athe menu options even after the site goes public.) I know *how* to make those on a page by page basis-- either by using the menu bar panel or just editing the code directly. That's easy enough.
But here's the thing-- when I make a change to the text/structure/labels of on the menubar I want to change it sitewide, not just one individual page.
It's a pain to have to cut and paste that change I've just made onto every other page in the site (or even to use the search and replace function to do it.) It seems to me that there ought to be a way that I could have the menu code info that's currently indicated on each page (see below) stored in some external file rather than on each individual page, so that whenever I wanted to update the menubar sitewide, I only needed to make a change in *ONE* location .
That's got to be possible, right? But how do I do it?P.S.
Here's the menubar code info that currently appears on each individual page of the site-- and which currently has to be updated on every page, any time I make a change. There's surely got to be a way I can have this located in an external file, so that I can make changes in just one location rather than on each page?
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="intro_home.html" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="intro_home.html">Intro / Home</a></li>
<li><a href="intro_bw.html">About BW</a> </li>
<li><a href="intro_harn.html">About Hârn</a></li>
<li><a href="intro_who_are_we.html">Who Are We?</a></li>
</ul>
</li>
<li><a href="general_overview.html" class="MenuBarItemSubmenu">General</a>
<ul>
<li><a href="general_overview.html">Overview</a></li>
<li><a href="general_traits_intro.html" class="MenuBarItemSubmenu">Traits</a>
<ul>
<li><a href="general_traits_intro.html">Intro</a></li>
<li><a href="general_traits_harnic.html">Hârnic</a></li>
<li><a href="general_traits_jarin_ivinian.html">Jarin & Ivinian</a></li>
<li><a href="general_traits_barbarians.html">Barbarian</a></li>
</ul>
</li>
<li><a href="general_affiliations.html">Affiliations</a></li>
<li><a href="general_skills.html">Skills</a></li>
<li><a href="general_prices.html">Prices</a></li>
</ul>
</li>
<li><a href="lifepaths_intro.html" class="MenuBarItemSubmenu">Lifepaths</a>
<ul>
<li><a href="lifepaths_intro.html">Overview</a></li>
<li><a href="lifepaths_guilds_intro.html" class="MenuBarItemSubmenu">Guilds</a>
<ul>
<li><a href="lifepaths_guilds_intro.html">Guilds Intro</a></li>
<li><a href="lifepaths_guilds_lps-by-guild.html">Guild LP List</a></li>
<li><a href="lifepaths_guilds_new-lps.html">New Lifepaths</a></li>
</ul>
</li>
<li><a href="lifepaths_churches.html">Churches</a> </li>
<li><a href="lifepaths_ivinian.html">Ivinian</a></li>
<li><a href="lifepaths_thardic.html">Thardic</a></li>
<li><a href="lifepaths_tribal.html">Tribal </a> </li>
<li><a href="lifepaths_non-human.html">Non-Human</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="magic_intro.html">Magic</a>
<ul>
<li><a href="magic_intro.html">Overview</a></li>
<li><a href="magic_shek-pvar.html">Shek-P'var</a> </li>
<li><a href="magic_alchemy.html">Alchemy</a></li>
<li><a href="magic_talents.html">Talents</a></li>
</ul>
</li>
<li><a href="religion_intro.html" class="MenuBarItemSubmenu">Religion</a>
<ul>
<li><a href="religion_intro.html">Overview</a></li>
<li><a href="religion_faith_general.html" class="MenuBarItemSubmenu">Faith</a>
<ul>
<li><a href="religion_faith_general.html">About Faith</a></li>
<li><a href="religion_the_gods.html">The Gods</a></li>
<li><a href="religion_faith_ritual_languages.html">Ritual Languages</a></li>
</ul>
</li>
<li><a href="religion_spirit_binding.html">Spirit Binding</a></li>
</ul>
</li>
<li><a href="bestiary_intro.html" class="MenuBarItemSubmenu">Bestiary</a>
<ul>
<li><a href="bestiary_intro.html">Overview</a></li>
<li><a href="bestiary_ivashu_general.html" class="MenuBarItemSubmenu">Ivashu</a>
<ul>
<li><a href="bestiary_ivashu_general.html">About Ivashu</a></li>
<li><a href="bestiary_ivashu_aklash.html">Aklash</a></li>
<li><a href="bestiary_ivashu_hru.html">Hru</a></li>
<li><a href="bestiary_ivashu_nolah.html">Nolah</a></li>
<li><a href="bestiary_ivashu_umbathri.html">Umbathri</a></li>
<li><a href="bestiary_ivashu_vlasta.html">Vlasta</a></li>
</ul>
</li>
<li><a href="bestiary_other_creatures.html">Other Creatures</a></li>
</ul>
</li>
<li><a href="other_index.html" class="MenuBarItemSubmenu">Other</a>
<ul>
<li><a href="other_earthmasters.html">Earthmasters</a></li>
</ul>
</li>
<li><a href="advice.html">Advice</a></li>
</ul> -
Problems to add a background-image to the widget Spry MenuBar!
With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 116px;
float: left;
background-image: url(../immagini/Menu_Button_01.gif);
background-color: transparent;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 116px;
position: absolute;
left: -1000em;
background-image: url(../immagini/Menu_Button_01.gif);
background-color: transparent;
Then when you apply style rules to
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../immagini/Menu_Button_01.gif);
background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben -
The underline is in the middle of the links in my spry accordion
I created a spry accordion menu in Dreamweaver CS4, and when I test it the underline is in the middle of the links in my spry accordion. This is not happening when I test it in a browser on the Mac I'm working on, but when I test it on a PC my rollover links have the line going through the center verses being underlined. The rest of the links on my page are fine, this is just happening when I rollover my submenu links in my Spry accordion when I test it in a browser on a PC. I am a "spry virgin," so please help!!!
Hello Em_needs_help,
You posted this message in the InContext Editing Web Developer discussion. I'm going to move your post to the Spry forums where more spry experts will be able to help.
Best regards,
Corey
Maybe you are looking for
-
My ipod classic has started making a mewling sound and all it does is scroll through the songs. It does not play on my Bose sound dock or through earbuds. It will play when connected to the computer...but that makes it hard to take it on a walk wit
-
Design question - best way to design a page for layout at runtime
I have an application that I want to port to ADF faces. The application currently generates HTML for both the layout and for the data at runtime. All of the examples I have researched rely on a layout defined at design time, which will not work in my
-
Mouseover doesn't display title attribute
I know the whole issue about the alt text fiasco. However, on my laptop, the title attribute does not display either. It works fine on other computer's firefox, but not this one. I assume it might be something in my settings, or an add-on getting in
-
HELP - My sound is gone, both audibly and in Prefs
My sound has crapped out on me. I thought maybe my speakers had just gotten unpluged but it's everything. In the Sound section of Prefs. It no longer shows the digital and analog options... it doesn't show anything in the box at all. Is my sound boar
-
Heap size fails if set to 1400
Hi, I have a machine that has 4 gigs of memory, runs x64 and have java 1.5. Now when i run my program i would like to have as much memory as possible, so maybe around 2.5 gig, but the max i can set it to is 1350. I use this command: java -Xmx1350M -X