Giving different color to active link in spry menu

hi,
I am using spry horizontal menu for my site.
Now what i need is that whenever any page is open i want the related link to that page as active link and wants to change the color of it...
Is there any way in css or js by which i can do this??
Thanks.
Regards
Dhvani

Hello,
Spry does not provide build in functionalty for this. But what you can do is add a className to the <li> that has the current page. And just add styling to that className. So i has a special "active" state.

Similar Messages

How to show active page in Spry Menu Bar using images

Hi,
I have already read this answer "how to show active page in spry menu bar" but I am using images, not text. I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages. (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
Any ideas. Here is the code:
<ul id="MenuBar1" class="MenuBarHorizontal">
       <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
       <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
        <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
        <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
        <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
        <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
        <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
        <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
     </ul>
Thanks so much for helping!
Cheers,
Janell

Just found this page:
Persistent Page Indicator
Update: Drat, it is for text menus only not using images. :-(
Cheers,
Susan

Show Active Link with Spry Sliding Panels

Hi,
Whilst googling to a solution to my problem I came accross this sample:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanels_withTabs.html
Is there anyway that simple HTML links that can be used instead of tabs? I have a navigation menu that contains links which link to specific panels using the ShowPanel() function, but once a panel is selected via one of these links, I want that link to become 'active' and display in a different colour.
So far I have this:
<a href="#" class="active" onclick="sp1.showPanel('p1'); return false;">Home</a><br />
<a href="#" onclick="sp1.showPanel('p2'); return false;">Latest News</a><br />
<a href="#" onclick="sp1.showPanel('p3'); return false;">FAQ's </a></div>
The 'active' class represents the link that is currently active, but I don't know how to dynamically switch the active link when another panel is selected.
Does anybody know how this could be achieved?
Thanks

Did you check out the source code for that those panels?
http://labs.adobe.com/technologies/spry/samples/slidingpanels/sp_withTabs.js
Als you see, they use a separate function to set active classes to the tabs. You can use the same functionality for your active link class.

Using search pages (i.e. Google) how can I get a different color on a link (website) that I have previously visited? It used to work that way, but now every link is the same color.

I use Firefox 4.0.1 & Windows 7 Home Premium Edition. In the Options/Contents/Color setting I have the "Allow Pages To Use Their Own Colors" box checked. I tried checking "Use System Colors" with 2 different colors selected for Unvisited Links & Visited Links, but it does not work, & in addition, the Use System Colors messes up my normal view(s). I just want to be able to differentiate between Visited & Unvisited Links. Thank you.

Hi,
Agree with Holger, I check on my Lync Windows Store app and can't find the meeting URL as well.
Best Regards,
Eason Huang
Eason Huang
TechNet Community Support

Using different color sets for button in one menu

Hi!
In DVDSP4 you can have three different sets of color mapping for your menu buttons.
I'm using TIFFs as backgrounds and a simple black/white TIFF for overlay. I do want to use different colors for my buttons in the same menu. Can I do this with a black/white overlay, or do I have to use an overlay with (four different) colors? My wish is to be able to create one or two color sets and just assigning any of them to one or more buttons in one menu.
G4 Dual, FCP5, DVDSP4, BitVice, Soundtrack Pro Mac OS X (10.4.3) 2 GB RAM, SuperDrive

One Overlay is fine
What you need to do is set up the color sets in Inspector and assign them to the different buttons. Take a look for "Color Mapping Sets" in the PDF where it details how to do it (PG 219 in DVD SP 3, PG 238 DVD SP 4). Note that it works for selected and activated states for the buttons, not normal state.
Also note, at least for me anyway, this has always been a buggy feature where sometimes it works properly and sometimes it does not. Never figured out why why either, but sometimes it does not flag the proper set to be used

Dreamweaver CS3 Linking Using Spry Menu Bars

Hello,
Please forgive my noobieness. I used to use Adobe GoLive and
am now transitioning to Dreamweaver.
I have the layout of the website I want using a template
provided by DW with a fixed main content area, header and a footer.
The banner and the horizontal menu bar are at the top. The content
would be displayed below as each button from the menu bar is
clicked. I have followed the directions in the Missing Manual
series but I still seem to have problems.
1. For example. For a button listing Directions. I have it
set to link to the proper .html file called Directions.html. This
was set using the Spry Properties. Same for Home and a pricing
menu. However when I run it using Firefox it opens a new tab and
displays the chosen content there rather than in the existing page
where the menu bar is located. In IE I cannot even get the page to
jump to any place else. I dont here the clicking noise or even some
kind of recognition that is trying to load the chosen page.
I see a list for target but those have no effect.
2. Secondly. In IE the menu bar drop down works really slow
even when I view other peoples websites that were built using CS3.
In Firefox it seems to work fine.
Any suggestions would be great and appreciated. Attached is
som code.

Hi Peter,
only to show you my impressions.
1. FF:
2. IE8:
There is no "failing".?
Hans-G.

Linking collapsable spry menu to other html pages

Hi,
I dont seem to be able the link the subject within my
collapsible, to another html page.
Surely it not hard, can someone explain how I do this, Im
having a blonde day.
Thanks in advance

Thanks.
I'll try my best to keep replying although I cannot guarantee further responses and no-one else here can help you further without those details.
Several points:
See http://www.projectseven.com/products/menusystems/pmm2/ug-examples/includes/index.htm
(The instructions relate to a commercial product but the principles apply to every SSI.)
Your include statement is 
The .shtml is required for the parent file to tell the server to parse the Include
In other words, the parent page should read http://www.yourdomain.com/index.shtml - and every page which has an Include statement must have a .shtml extension. (The article linked above discusses alternatives to this requirement if you talk to your host)
Then the include reads 
The include file extension can be anything provided it's correctly linked from the parent page.
Also, with nav bars, you'll be calling them from every page of your website so you need a site root relative reference, not a document root relative one, so that the include file is correctly referenced from every page of the website regardless of its position in the folder structure.
i.e. 
Note: the "file=" changes to "virtual=" and the crucial forward slash in front of Includes.

How to assign a class for different colored links

Hi. I'm new to CSS and HTML and Dreamweaver. I'm trying to
get links to be different colors within the same page. I have a
navbar with a CSS style that I've assigned colors to all my links
there. They work. But if I attempt to change the links in the main
content it screws up the navbar links.
So, now, I'm trying to assign the different colors to the
links in the main content. I have the link color down but I can't
seem to get the visited, hover, active to work.
So, I read somewhere you have to assign a class to be able to
have different colors for your links on the same page. There is a
class assigned to the links I want to change but it only assigns
the link color, not the visit,hover,active colors. I don't know
where I am supposed to put the code so that only the main content
links are changed. Here is what I came up with from reading and
studying. Can somebody tell me what's wrong with it and where I am
supposed to put what in each page? This is just a CSS style page I
made and I have no idea if I even did that right. Then, I can't
figure out how to tell each page to include it for that class only.
Thanks.
@charset "utf-8";
/* CSS Document */
<class="style49"
<style type="text/css">
a:link {color: #3333FF}
a:visited {color: #009900}
a:hover {color: #6600CC}
a:active {color: #FF0000}
</style> </class>

Pseudo-classes and container styles are what you need - here
are some
tutorials.
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
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
==================
"Newbie744" <[email protected]> wrote in
message
news:fn3***$m6q$[email protected]..
> Hi. I'm new to CSS and HTML and Dreamweaver. I'm trying
to get links to
> be
> different colors within the same page. I have a navbar
with a CSS style
> that
> I've assigned colors to all my links there. They work.
But if I attempt
> to
> change the links in the main content it screws up the
navbar links.
>
> So, now, I'm trying to assign the different colors to
the links in the
> main
> content. I have the link color down but I can't seem to
get the visited,
> hover,
> active to work.
>
> So, I read somewhere you have to assign a class to be
able to have
> different
> colors for your links on the same page. There is a class
assigned to the
> links
> I want to change but it only assigns the link color, not
the
> visit,hover,active
> colors. I don't know where I am supposed to put the code
so that only
> the
> main content links are changed. Here is what I came up
with from reading
> and
> studying. Can somebody tell me what's wrong with it and
where I am
> supposed to
> put what in each page? This is just a CSS style page I
made and I have no
> idea
> if I even did that right. Then, I can't figure out how
to tell each page
> to
> include it for that class only.
>
> Thanks.
>
> @charset "utf-8";
> /* CSS Document */
> <class="style49"
> <style type="text/css">
> a:link {color: #3333FF}
> a:visited {color: #009900}
> a:hover {color: #6600CC}
> a:active {color: #FF0000}
> </style> </class>
>
>
>

Multiple text colors in my spry menu

Can I make multiple text colors in my spry menu? I want to match the text color on one of my spry menu items to the hover color so that you know which link you are currently visiting. I haven't posted the site yet until I work out all the kinks. So, to summarize, I have my spry menu link text color (ul.MenuBarVertical a) set to #E00 and my hover color for those items (ul.MenuBarVertical a.MenuBarItemHover) set to #888. All of the links also contain the same spry menu. I would like the link you're currently in to be #888 and the other links to be #E00 with all of them hovering with color #888. How can I give unique color to an individual menu item? Any help you can give is much appreciated!

Sorry to bug you again. I implemented your suggestion as you can see in this partial pageview:
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script src="js/navbar-select.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul.MenuBarHorizontal a#button1:hover, ul.MenuBarHorizontal a#button1:focus
{ color:#625647; }
</style>
</head>
<body>
<div id="team-vision" class="container">
<div class="header"> <a href="#"><img id="logo" src="images/logo_i.png" width="215" height="36" alt="Greiner Engineering"></a>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">INTRO</a>|</li>
<li><a href="ger-vision.shtml">VISION</a>|</li>
<li><a href="ger-2firmen.shtml">2FIRMEN</a>|</li>
<li><a href="#">PROJEKTE</a>|</li>
<li><a href="ger-network.shtml">NETZWERK</a>|</li>
<li><a href="ger-contact.shtml" id="button1" class="MenuBarItemSubmenu">KONTAKT</a>|
<ul>
<li><a href="ger-contact.shtml">ADRESSEN</a></li>
<li><a href="ger-team.shtml">TEAM</a></li>
<li><a href="ger-location.shtml">LAGEPLAN</a></li>
</ul>
</li>
<li><a href="ger-links.shtml">LINKS</a>|</li>
<li><a href="ger-publications.shtml">VERÖFFENTLCHUNGEN</a>|</li>
<li><a href="ger-jobs.shtml" class="MenuBarItemSubmenu">JOBS</a>|
<ul>
<li><a href="ger-jobs.shtml">OFFENE STELLEN</a></li>
<li><a href="ger-practice.shtml">PRAKTIKUM</a></li>
<li><a href="ger-thesis.shtml">DIPLOMARBEIT</a></li>
</ul>
</li>
<li><a href="ger-impressum.shtml">IMPRESSUM</a>|</li>
</ul>
</div>
I did this in ger-kontakt.shtml, ger-team.shtml, ger-location.shtml
but it does not leave KONTAKT highlighted.
If you want to check it out my url is http:/www.lsdcoach.com/greiner-engineering. Select GERMAN and the click on KONTAKT. The other menu items without a submenu work great.

Spry Menu Bar Editing Links PLEASE HELP

Ok I am a new user and this is my first site and I have a question regarding creating links in the spry menu bar.
I created my home page with a spry menu bar and I have begun creating pages to link to my home page.
My question is when I navigate to another page from my home page my spry menu bar on the second page does not have the links set for the spry menu. Do I have to input all the links again on each additional page or is there an easier way to copy from my home page.
I am creating an online store and my homepage menu bar has over thirty links to products pages. Each page has the original banner and spry menu bar from my home page but the links arent set on any of the products pages. Do I have to go into each one of my thirty pages and create the thirty links to the other pages? and if that is the case what if I want to change or add additional links to the home page for new products launching? Do I have to update the links and spry menu bar on all of the additional pages as well?
If anyone can help me out I would greatly appreciate it. Any answer would be helpful even if its not the one I want.

If you're not using DW Templates to spawn site pages or Server-Side Includes for sitewide menus, you definitely must edit each menu on each page and upload to your server. Tedious.
Server-Side Includes are a huge time saver. Learn to use them.
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Nancy O.

How to use a Spry Menu as a Library item?

Okay, this is my second post; but, with a different title.
I made a Spry menu for my Home Page. I saved it and a logo
together as a library item and placed the library item on a second
page. The links in the menu work when there is no style sheet
attached for the Spry meny and the menu appears just as text; but,
as soon as the .css style sheet for the menu is attached to the
second page, the menu appears correct except the drop down menus do
not work. I tried adding a link to the Spry Java Script file as it
is on the home page; still no luck.
I tried the same with a test file, which I have since
removed, stored at the same folder as the home page; same problem.
How are we suposed to make a workable library item with a
Spry Menu? Surely this is possible, no?
Here are the two pages I am referring to:
Good Page:
http://iculver.com/
Bad Page:
http://iculver.com/pages/AboutUs/Personal_info.html

Apologies - my mistake. You are correct, and my instructions
were
incomplete. That other bit is required too.
> Now, I thought (probably in error) that items after !--
were comments, but
> it
> seems to be required, too. I tried eliminating taht part
and the menus did
> not
> work. I need all of this last part.
The comments 'hide' the scripting from validators and older
browsers, but
it's still recognized as javascript, since the comments occur
INSIDE a
<script> tag.
> these Spry Menus in Libraries easier to use...)
It's not so hard once you get all the pieces together.
1. Create the library item as described.
2. Make sure that each page that is to carry this library
item has the
required links in the head (to the CSS and the js files), AND
in the body.
Why not use a template instead? That way, all of these links
are managed
for you.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"JustBob" <[email protected]> wrote in
message
news:[email protected]...
> Hummm...
>
> Now, don't yell at me, okay? I'm a goLive switcher and
really a graphic
> designer, not a coder...
>
> So, It seems from the above message that I am to
establish the links to
> the
> script and the css file before inserting the library
item. But, either
> way,
> that didn;t do the trick for me. I did find a bit of
code in one of the
> pages
> that seems to be required.
>
> It seems I also need to insert this just before the
close of the body tag:
>
> <script type="text/javascript">
> 
> </script>
>
> Now, I thought (probably in error) that items after !--
were comments, but
> it
> seems to be required, too. I tried eliminating taht part
and the menus did
> not
> work. I need all of this last part.
>
> I'm sorry I'm such a dope. I probably did something
funny when I was
> styling
> the menu. (I do hope Adobe can accommodate dopes lime
me, though, and make
> these Spry Menus in Libraries easier to use...)
>
> Thanks for all of your help! Really!
>

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

Spry Menu and iframe

Hi, I want to link my spry menu to my iframe, so when I click on something on my menu, a different page will show up on the iframe, can someone please explain to me how to do this? Thanks

Here some other links, maybe you prefer words instead of a video:
Examples
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
http://craigsworks.com/projects/simpletip/
http://calebjacob.com/tooltipster/
http://www.solutions4website.com/Extensions/nova_dropdown_menu.aspx
Tutorials:
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
http://try.jquery.com/
http://learn.jquery.com/
https://tutsplus.com/course/30-days-to-learn-jquery/
http://www.w3schools.com/jquery/

Spry menu accordion

HI! I'm using the spry accordion in one of my web projects.
Can somebody help me out? Whenever I click on a link, the spry menu
goes back to its original position. I would like to have the menu
open to where the active link is... is that possible?

Well.....I found a solution. But it's a cure with nasty side
effects.
Ok...if I change this:
if(isie)
if(this.hasClassName(this.element, "MenuBarVertical"))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems
.style.position = "relative";
for this:
if(isie)
if(this.hasClassName(this.element, "MenuBarVertical"))
this.element.style.position = "static";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems.style.position = "static";
then the scrollbars appear. But the submenus don't appear
anymore.
Soo....keep on keepin' on. I'll post any findings.

How do I make the menu title a different color when it is the active menu in Spry horizontal menu?

How do I make the menu title a different color when it is the active menu in Spry horizontal menu?
Dreamweaver CS5.5
Apple OS X.6.8
View site at: http://dorsay-easton-indian-law.com/staging/index.html
Steps:
1. Click link to land on Home page
2. View Home link in Spry horizontal navigation menu
Actual:
Home menu title is the same color as all of the others.
Expected:
The title of the active menu is color: #FFC.
I was hoping that a:active would give me this functionality, but that's not how it is described. Any suggestions are welcome!

Nothing I have tried in the template makes the BODY tag editable. That's why I'm wondering how to disconnect the template from the individual pages. Adding an ID to each body tag is a prerequisite of the how-to page you supplied.
You don't make the <body> tag editable in a Template.
You make attributes of the <body> tag editable.
Don't disconnect the Template from the child pages.
Specify editable tag attributes in a template
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7aa3a.h tml
In the Template:
Select the <body> tag (either in the Tag selector or click inside the <body> tag in Code View)
Modify > Templates > Make Attribute Editable
Select ID from the Attribute dropdown menu
If there's no existing ID attribute then click Add and type ID into the next dialogue box
Attribute: ID
Check the box to "Make attribute editable"
Enter anything into the Label field as a default e.g. foo
OK
Dreamweaver will change the <body> tag to read <body id="@@(foo)@@"....
Now the ID is editable
Save the Template and update the child page
In each child page:
Modify > Template Properties
Select the id attribute from the list (it's probably the only one listed)
Change its name in the box to whatever name matches your CSS rule for the active state for that page
OK
Save
Upload

Giving different color to active link in spry menu

Similar Messages

Maybe you are looking for