CSS - manually highlight current page link?

In the sidebar navigation on this page I want to highlight the current page link with a CSS class. I wrote a class called "current" and applied it to the link. But nothing changes. I've used this on other sites, but something is tripping me up this time. I'm obviously missing something simple.
Here's the page: http://www.jesseyoung.com/gill/practice_areas/small_business/exceptions_to_limited_liabili ty.html
Suggestions?
-Jesse

function(){return A.apply(null,[this].concat($A(arguments)))}
In the sidebar navigation on this page I want to highlight the current page link with a CSS class. I wrote a class called "current" and applied it to the link.
Are you creating this Current Page marker manually?
You're using Pop Menu Magic 2 from Project Seven which already has an excellent in-built feature for Automatic and Advanced Current Page "you are here" marking.
Click the two boxes adjacent "Current Marking" in the PMM2 interface and the job is done. The PMM2 PDF User Guide explains the feature in detail.
You'll also get excellent support on questions related to Project Seven products at their newsgroup forums
http://www.projectseven.com/support/index.htm

Similar Messages

Highlighting Current Page with CSS

This morning I post my first Dreamweaver/CSS site. It is for
a DVD I produced about infant massage. www.BabyBabyOhBaby.com.
What I'd like to do is highlight the current page in the
navigation bar using either a border or color change. I've found
some sites like
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
but, sorry to say, I'm a beginner at both Dreamweaver & CSS and
I can't quite follow the code.
Is there some way within Dreamweaver to accomplish the
highlighting in design view without writing the code? Or perhaps
someone has some very basic elementary CSS guidance?
Thanks for your time,
David

Oh, yeah. 8)
Get that....
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
==================
"E Michael Brandt" <[email protected]> wrote
in message
news:[email protected]...
> <informative but also self-serving>
>
> Really we have made this much much easier. divaGPS
creates you-are-here"
> menu highlighting and is easy to add to any number of
pages at once - even
> Templates' Child pages. It is a commercial DW Extension
that will save
> you lots of time and effort.
>
>
http://divahtml.com/products/divaGPS/current_menu_location.php
>
> <informative but also self-serving />
>
> --
>
> E. Michael Brandt
>
> www.divaHTML.com
> divaGPS : you-are-here menu highlighting
> divaFAQ : FAQ pages with pizazz
>
> www.valleywebdesigns.com
> JustSo PictureWindow
> JustSo PhotoAlbum
>
> --
>
>
> Murray *ACE* wrote:
>> You need to know the downside to using layers as a
primary layout
>> device - open your page in Firefox (or any non-IE
browser) and bump the
>> text size up a tick or two. Ugh....
>>
>> Here's your navbar -
>>
>> <div id="navbar"><a
href="index.html">Home</a> | <a
>> href="about_dvd.html"> the DVD</a> | <a
href="preview.html">Preview</a> |
>> <a href="reviews.html">Reviews</a> |
<a href="infant_massge.html">Infant
>> Massage</a> | <a
href="contact_us.html">Contact Us</a> | <a
>>
href="shopping.html">Shopping</a></div>
>>
>> Change it to this -
>>
>> <div id="navbar"><a href="index.html"
id="button1">Home</a> | <a
>> href="about_dvd.html" id="button2"> the
DVD</a> | <a href="preview.html"
>> id="button3">Preview</a> | <a
href="reviews.html"
>> id="button4">Reviews</a> | <a
href="infant_massge.html"
>> id="button5">Infant Massage</a> | <a
href="contact_us.html"
>> id="button6">Contact Us</a> | <a
href="shopping.html"
>> id="button7">Shopping</a></div>
>>
>> Then on each page, embed a little stylesheet in the
head by changing
>> this -
>>
>> </head>
>>
>> to this -
>>
>> <style type="text/css">
>> a#buttonX { your highlight styles }
>> </style>
>>
>> and just change the "X" to whatever number button
you want to highlight.
>>
>> You can do this in Design view, but it's too
tedious.
>>

Disabling the current page link?

I have a nav bar. I want the current link (whatever page you
are on) to be disabled and to be "pushed in" (my active link
color). Is there anyway to do this with ONE css page or template? I
could manually change each page but I would have to edit all the
pages if I change it again.

> THat didn't bother me, but it
> wouldn't let me change it in other pages.
Are you using MODIFY | Template Properties to change it?
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
==================
"firmana" <[email protected]> wrote in
message
news:egnvsd$j8e$[email protected]..
>
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
>
> Read #7 and see what the guy says. I tried making the
body tag editable
> (by
> Modify --> Templates --> make attribute ediatble),
but it makes me insert
> a new
> tag inside. WHen I tried it with the ID tag, it came out
with
> id="(@@Template@@)" or something like that. THat didn't
bother me, but it
> wouldn't let me change it in other pages.
>

How do you remove the hand cursor on the "current" page link?

I'm working on a new website design in Dreamweaver and would like to remove the hand cursor when it hovers over the current page link. I'd welcome any help! Here's an example of the design: http://www.bfranklincrafts.com/NewSite/MonroeCalendar.html
Thanks!
LioLee

Create a class with the following style rule, and apply it to the current link:
.current {
cursor: default;

Highlight "current" page in CSS Dreamweaver TEMPLATE

I have created 2 navigation bars (in my header) using an unordered list styled with CSS in a Dreamweaver Template that I created. Here is that template (in the template- the "Beads" link is styled as the current page): http://www.bfranklincrafts.com/Templates/MainTemplateM.dwt
I don't want the navbars to be editable in the pages that will be created from this template, so I was NOT planning on putting the navbars in editable regions. But now I'm realizing that if I don't put the navbars in editable regions, I won't be able to go in each link in my navbars to put the "current" style for each page.
The idea of the template is wonderful because it allows us to create one template and from that template we can make changes that would be past down to all the pages that were created using this template. But if I have to put the navbars in editable regions, it means that if I have to make changes to the navbars, I'll have to go to each individual page to make those changes.
I really want to show the "current" page that visitors are on, can anyone help!!!
Liolee

Hi,
sorry to bring up an old post but I am having issues with this myself and hope you can help?
I have coded my site as per your example but still no luck.
It is an .asp site. and my menu looks like this:
<ul id="nav">
    <li><a id="home" href="http://www.ampso.co.uk/index.asp"><img src="/images/nav1_gray.jpg" width="84" data-srcover="/images/nav1_full.jpg"></a></li>
    <li><a id="tech" href="http://www.ampso.co.uk/page/88/Technical.asp#.USOIoqWduS0"><img src="/images/nav4_gray.jpg" width="102" data-srcover="/images/nav4_full.jpg" class="wrap_right"></a></li>
    <li><a id="construction" href="http://www.ampso.co.uk/page/89/Construction.asp#.USOQLqWduS0"><img src="/images/nav5_gray.jpg" width="170" data-srcover="/images/nav5_full.jpg" class="wrap_right"></a></li>
    <li><a id="medical" href="http://www.ampso.co.uk/page/87/Medical.asp#.USOUeaWduS0"><img src="/images/nav3_gray.jpg" width="88" data-srcover="/images/nav3_full.jpg" class="wrap_right"></a></li>
    <li><a id="media" href="http://www.ampso.co.uk/page/90/Media.asp#.USOWQKWduS0"><img src="/images/nav6_gray.jpg" width="88" data-srcover="/images/nav6_full.jpg" class="wrap_right"></a></li>
    <li><a id="logistics" href="http://www.ampso.co.uk/page/91/Logistics.asp#.USOXdqWduS0"><img src="/images/nav7_gray.jpg" width="100" data-srcover="/images/nav7_full.jpg" class="wrap_right"></a></li>
    <li><a id="allsectors" href="http://www.paycoservices.co.uk/page/86/All-Sectors.htm"><img src="/images/nav2_gray.jpg" width="120" data-srcover="/images/nav2_full.jpg" class="wrap_right"></li>
    <li><a id="contact" href="http://www.ampso.co.uk/page/205/Welcome-to-Payco.asp#.USObtaWduS0"><img src="/images/nav9_gray.jpg" width="120" data-srcover="/images/nav9_full.jpg" class="wrap_right"></a></li>
</ul>
Now the issue arises with adding the code to the pages themselves. For example, if I go to the 'tech' page. I have no editable regions like I would with a html template (even though my main menu is in a top menu template which applies to each page) so I'm not sure exactly where to put the css code.
Currently the top section of my 'tech' page looks like this:
<%
Bodystyle = "style='background:url(/images/bg-further-technical.jpg) center 0px no-repeat;'"
%>

<div id="further-banner" style="background:url(/images/technical-icon.png) 811px 9px no-repeat; ">
<h1>Payco Technical <span>It's your industry so why not do it your way?</span></h1>
<p><b>You are here:</b>
<a href="/index.asp">Home</a> /
<a href='Payco-Technical.asp'>Payco Technical</a> /
</p>
</div>
Now do I paste the css code into here? Or would it help if you saw my whole 'tech' page so you can see the rest?
Any help would be greatly appreciated.
Thanks

Using body id= to highlight current page on nav bar

Hi all, using the method of giving the body tag an id to set
the current page on the nav bar, works all very well. however, this
is no good if you are working from a template as it would mean the
<body> being editable on each page (so most of the content
then)....am I right? or am I missing something blindingly obvious
here which will allow me to change the <body>...
many thanks - didn't really want to use the javascript method
you see!

> Hi all, using the method of giving the body tag an id to
set the current
> page
> on the nav bar, works all very well. however, this is no
good if you are
> working from a template as it would mean the
<body> being editable on each
> page
> (so most of the content then)....am I right? or am I
missing something
> blindingly obvious here which will allow me to change
the <body>...
ideally, you wouldn't actually link the item on the menu of
the page you are
currently on. This is a usability/accessibility thing. If you
do that, then
you can simply style non-linked items on the menu differently
to highlight
that page.
That said, it's often not a practical solution if you are
using SSIs to load
the menu.
In that case, you could just add the Class to a wrapper DIV,
or to the menu
itself:
<div id="myMenu" class="contactPage">
<div id="myMenu" class="aboutPage">
<div id="myMenu" class="productsPage">
etc.
OR, alternatively, give each meny item it's own class and
then over-ride
that one particular class style in the HEAD of each
individual page. That
said, I'm not sure how well the latter would work with DW
templates.
-Darrel

Spry Menu - highlight current page in menu

If the current page is "aboutus.html" for example, can I configure Spry Menu to apply a different color or css class to the "About Us" link in the menu?
Thank you.

I added a new class with different color in CSS and refer that class in my html. I don't think the function is build in. Something like:
<a class="selectadded" href="/contactus.html">Contact Us</a>

Highlighting current page on Tab control

Hi!,
I am using tab control with 7 pages. The page names are all in the same colour. Is there any way in which the colour for the name of the current page can be made different from the rest?
If your answer involves property nodes (or more advanced techniques) please be descriptive as I am beginner.
Also, which is the best book for inside stuff on property nodes?
I am using LV-PDS 6.1
Best wishes and thanks,
Gurdas
[email protected]
Gurdas Singh
PhD. Candidate | Civil Engineering | NCSU.edu

> Is it possible to assign the same keyboard key (to all buttons) such
> that pressing it will do the job of clicking the current active
> button? I would prefer this key to be the 'space bar'.
>
> The application allows only one hand to be free. The other hand will
> be used to place test component and rotate it manually below the
> sensor. Thus, such a feature makes the user's task very easy. He just
> keeps clicking the space bar until the vi ends.
>
It isn't possible to assign a key to more than one control, since then
it would be pretty unclear which control should out-of-the-blue receive
the key. It is possible to catch key events and perform and action
based upon the key press. Another option is to set
the key focus to the
next logical button in your progression. If the focus is set to a
button, then the space bar, enter key, etc all work.
Since you are asking for comments, the UI you describe sounds a bit odd
to me. A sequence of buttons that the user is required to click in a
given order? You might want to compare this to an indicator showing the
stage and current results, and one more button that says Next. Tie the
key navigation shortcut to the single button, and each button press
moves to the next stage. You might want to add a Cancel or Stop button
if there is ever any need to break out of the sequence. Finally, this
is pretty close to a wizard that allows the user to go both directions.
If it makes sense to reverse and redo a step, add that button too and
you have a very standard UI.
To build a wizard, use a tab control with a page for each stage. Hide
the tabs, and modify the pages by adding or subtracting on the value.
Greg McKaskle

CSS to Highlight Current TD Tag Selection

Trying to find how I add a CSS class to show the currently
selected menu item.
I am using
<td height="22"align="center"
class="SmallLinkB"onclick="MM_changeProp('titletxt','','innerHTML','<img
src=\"/FILESPEC.gif\"
alt=\"dwr\" width=\"20\"
height=\"15\" /> TEXT HERE
<o:p><a
href=\"/FILESPEC.pdf\"
target=\"_blank\"
class=\"nugbody\">PDF</a>
<span
class=\"nugbody\">or</span>
<a href=\"/FILESPEC.swf\"
target=\"_blank\"
class=\"nugbody\">FlashPaper</a></o:p><img
src=\"/FILESPEC.gif\"
alt=\"dw\" width=\"20\"
height=\"15\"
/>','DIV');Spry.Utils.updateContent('DIV1',
'/FILESPEC.php'); return false"
onmouseover="this.style.backgroundColor = '#FFD2AA'
;this.style.cursor='pointer'"
onmouseout="this.style.backgroundColor = ''">TEXT
HERE</td>
inside a SpryCollapsiblePanel with color effects.
When I select a meu item, I want the new selection to be
highlighted and to release the last selection.

You can achieve this result by adding:
<script language="javascript" type="text/javascript"
src="../../includes/xpath.js"></script>
<script language="javascript" type="text/javascript"
src="../../includes/SpryData.js"></script>
and then embed a DIV in the panelcontent called "test1' to
each button then add onClick=
Spry.Utils.addClassName('test1','selected1')
Spry.Utils.removeClassName('test2','selected1')
make a new class called select1 (or whatever)
This works great without allot of code if compared to some
other solutions I have seen. Also works with onMouseover including
colour effects.

How can I make a link a different color than the other links according to the current page?

Hello. I have created a navigation bar. And I would like to style the links to have the current page link a different color than the other links. For example, if all of the links have a black background, I would like to have the current page link to have a white background. The reason that I would like to style them this way is so that the visitor knows what page is being visitied.
I tried different ways but all of them did not show to make any change to the links. This is what I have so far. The links work, but all of them have the same color and background. When on the home page, I would like to have the home page link to have a white background with black letters. I would appreciate your advice.
<head>
ul {
    list-style-type: none;
    text-align: right;
    padding-top: 10px;
    padding-bottom: 6px;
    padding-right: 10px;
li {
    display: inline;
a:link {
    color: #FFF;
    background-color: #000;
    text-align: center;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 7px;
    text-decoration: none;
a:visited {
    color: #FFF;
    background-color: #000;
    text-decoration: none;
a:hover {
    color: #000;
    background-color: #FFF;
    text-decoration: none;
a:active {
    color: #FFF;
    background-color: #000;
    text-decoration: none;
a.menu:link {
     color: #000
     background-color: #FFF;
     text-decoration: none;
</head>
<body>
<div class="navigation">
    <ul>
        <li class="menu"><a href="index.html" target="_self">HOME</a></li>
</body>
Thank you very much.

http://www.itworld.com/development/351097/setting-active-menu-item-based-current-url-jquer y

CSS Menu Which Highlights Current Selection

Hi,
I'm trying to convert my table and frame-based site to use CSS.
http://www.jchmusic.com
OK, the menu at the left works fine except that I'd like it to behave a bit differently; more like a real 'application' if possible.
When the user clicks on a menu, I want that menu selection to -remain- highlighted (or a different color or -something-) to indicate where the user is on the web site. Then, when the user clicks on another menu option, I want that to 'de-select' and the next menu choice to be highlighted.
I hope that makes sense. In effect, I want the page to have a 'memory' to act as a visual indicator for the user.
I've seen all kinds of CSS menus, but few that do this. And the ones I've seen which -do- work like this have style sheets that are -far- too complex for me to suss out on my own. What's the 'trick'? Is there javascript involved? Session Variables? Or is this something that can be done with only CSS (which is my deep hope.)
TIA,
---JC

If you want just the current page that you are visiting to be different, assign it an id as in "here".
If this is your sidebar links and the example uses <ul><li> as the example below:
<div id="sidebar1">
<div class="sidenav">
      <h1>Link Header </h1>
<ul>
<li><a href="#" id="here">Link One</a></li>
<li><a href="/#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
</ul>
</div>
</div>
Then the css would be:
#sidebar1 {
     float: left;
     width: 150px;
     padding: 15px 5px 15px 5px;
     margin-left:10px;
.sidenav h1,.sidenav ul {
     padding-left: 5px;
.sidenav {
     background: #cccccc;
     float: left;
     width: 150px;
.sidenav h1 {
     color: #ffffff;
     font-size:1em;
     height: 20px;
     background-color:#990000;
.sidenav ul {
     border-top: 1px solid #fafafa;
     margin: 0;
     padding: 0;
.sidenav li {
     border: 1px solid #fafafa;
     border-top: none;
     list-style: none;
     margin: 0;
.sidenav li a {
     color: #000000;
     display: block;
     font-size: 0.9em;
     padding: 3px 6px 3px 14px;
     text-decoration: none;
     background-color:#efefef;
     border-left: solid 5px #ffffff;
.sidenav li a:hover {
     color: #ffffff;
     background-color:#996600;
.sidenav li a:visited {
     text-decoration:underline;
.sidenav a#here {
    border-left-color: #900 !important;
    background-color: transparent !important;
    color: #0074A5 !important;

CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Changing the color of the link to the current page

How can I change the link on the current page to display a different color until the user redirects to another page. I am wanting to keep all my links visible and simply change the color of the link that the user is on.
I think I am going to use the 'pFlowStepId'.
I am using a navigation bar that redirects to pages within the application but one link redirects to a url.
Thanks in advance!

<style type="text/css"><br>
<br>
</style><br>
Copy and paste into HTML Header.<br>
Welcome to the <a href="f?p=&APP_ID.:1001:&SESSION.::NO:::"><br>
<span class="style1">Master – Detail - Details</span></a> demo application.<br>
…<br>
Click <a href="f?p=&APP_ID.:1001:&SESSION.::NO:::">here</a>
to begin.<br>
It is located at http://htmldb.oracle.com/pls/otn/f?p=26372
Then pick ApEx>Forms>Master – Detail from menus.
Konstantin

Opening any link causes location in current page to jump back to top of page.

I have FF set to open all new windows in a new tab which was the default setting. Whenever I open a link, the new link will open in another tab, but on my current page/tab I will be transported back to the top of my current page/tab. You can imagine how annoying this is especially on long pages. Does anyone have a solution for this? One thing I have tried is highlighting some text near the link I am about to open and sometimes this will prevent the page from moving back to the top when I open the link, but not always. Thanks for looking, (FF 3.6.18 on linux)
-This occurs whether I have FF set to switch immediately to new tab, OR not.

Thank you Cor-el! That did the trick, but I'm not sure why.
Just FYI I restarted in safemode, and chose to continue without selecting any of the options just as you said. I tried clicking on links further down in the page, and the page DIDN'T jump back to the top! I checked to make sure the default theme was selected which it already was.
When I restarted Firefox in normal mode, it continued to do the right thing and did not jump to the top for each link open. I have no idea why your solution worked, maybe it reset something? anyways, thank you again, wonderful help!

Need Adds on to highlight or select several(next) pages in search result on current page?

Need Adds on to highlight or select several(next) pages in search result on current page?

Do you mean this: you would select a bunch of links with your mouse, then right-click and choose something like "open all these links in new tabs"?
There are extensions like that. Here are a few examples, but since I don't use them myself, I don't recommend any particular one. You can check the reviews and try the one(s) that sounds good to you:
* [https://addons.mozilla.org/en-us/firefox/addon/multi-links/ Multi Links]
* [https://addons.mozilla.org/en-us/firefox/addon/selection-links/ Selection Links]
* [https://addons.mozilla.org/en-us/firefox/addon/SnapLinksPlus/ Snap Links Plus]
If you already have one of those but it stopped working, make sure you have the latest version. You can check for updates to your extensions here:
orange Firefox button (or Tools menu) > Add-ons > "gear" button > "Check for Updates"
Any luck?

CSS - manually highlight current page link?

Similar Messages

Maybe you are looking for