How to maintain the last clicked menu bar button in "mouseover" state?

**George59** · 01 August 2009, 03:57 AM

Hi,

I am working on a simple 6 page website with six menu buttons using one of the original Xara Design templates and while I was working on the pages I realized that based on the button views you cannot tell which page you are viewing out of the six one, you have to glance at the web page tab on the top or you have to add a page title somewhere near the top of the pages.

So, my question is, how can I modify the menu or navigation bar, so that if for example after I click on the button "About Us", that button will maintain the "mouseover" color even when I already moved the mouse pointer away from that button?

If this idea could be implemented, the result wold be, that any time you return your eyes or attention to the monitor screen (after making 3 phone calls) with your web site on, in a jiffy you can tell which page out of the six you're looking at, without having to look around the whole page.

If we consider three stages for button "lit" status:

mouse off
mouse over
mouse click

I'd prefer to have the "mouse over" stage color to stay on - in the solution.

In my specific case, the menu bar has only two stages, mouse off and mouse over - right after clicking on the button, the mouse over stage goes off and the mouse off comes up, so how can I modify the menu bar, so that the button will keep the mouse over color until you close that page (or navigate to another page)?

George

**Drwyd** · 01 August 2009, 11:12 AM

As there is always one page active the simplest solution is to colour the mouseoff button with the mouseover colour on the respective pages.

Edit: I usually colour the current page button slightly different from the rollover if the mouse pointer is a similar colour to the buttons.

**gwpriester** · 01 August 2009, 08:41 PM

Welcome to the Web Designer/Xtreme conference George (from another former Angelino)

I replaced the mouse over button on each page of my site www.gwpriester.com with a static button that is a different color. So the static colored button (no mouse over effect) indicates the current page.

Simply create your button bar on the home page and then copy it to all pages (Arrange menu).

Then replace the button on the current page. You can either link the button to the current page or not have a link at all. Either way it has the same effect.

**slavelle** · 02 August 2009, 02:19 PM

I don't recall who suggested this, but an easy way to do this without having to do a bunch of recoloring and checking and getting rid of stuff is to just create a layer above the mouseover layer that has the "you are here" button on it. Repeat this layer on all pages and you have a button that automatically sits on top of whatever is below it.

**cursor** · 03 August 2009, 02:13 PM

Here are a couple of ideas (side by side), neither of which requires additional layers.

The example on the left lets the buttons function without modification. A "current page" indicator (note that any number of creative accents can be used) is added (on the MouseOff layer) that has nothing to do with the way that the button works. The web address assigned to the current page button is either # or javascript(); (do nothing).
The example on the right allows all buttons to behave as normal except the current page button. In that instance the MouseOver (or the rollover) object is deleted, and the MouseOff version of the button is uniquely colored. No link is assigned at all ("Do nothing"). In this case, I made the unique named color a "shade of" the "mouseOver" color.

**slavelle** · 04 August 2009, 01:57 AM

Those are fine methods as well. Where I found the extra layer idea useful was when you are using the nav bar as a repeating object. If you use your option 2, when you update repeating objects, the mouseoff one gets messed back up (to the original way rather than the mouseover for that prticular page). Your other method (an indicator that is not part of the button) doesn't do this and is also a good way to go.

**George59** · 04 August 2009, 06:00 PM

Thank you guys for all the solutions, I ended up doing what drwyd and cursor suggested by deleting the current mouse off button group on each six pages and copied the group of mouse over button to its place. Since I don't have my website up I cannot demo it here, but I will put a link here after I uploaded it.

Of course the ideal solution would be to have some kind of java script incorporated in the menu bar and as an independent entity (independent from the web pages) would indicate which button was pressed last time. I guess Web Designer cannot produce such an effect by default, which is OK.

George