/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] JS Menu Highlighter

Copy linkTweet thisAlerts:
Jan 11.2008

Hi,

Here is my problem. I need a JS that will:

When you hover on a menu, the backgrounds turns white and text turns black, when you move your mouse away it should turn white on black. This is farely easy

But Next Challenge is when you click on an menu it should retain black on white class and not get impacted by mouse hover. This is a way of telling the user that he/she browsing This Page.

Thanks much in advance.

-Eric

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@cgishackJan 11.2008 — If you want the menu to select page by page it might be more effort.

Here is a complete client side way of selecting menus.

<i>
</i>&lt;html&gt;
&lt;head&gt;

&lt;title&gt;Menu Samplet&lt;/title&gt;

&lt;style&gt;
.menu
{
width:300px;
height:30px;
border:1px solid #000;
}
&lt;/style&gt;


&lt;script&gt;

var selectedMenuId = "myMenu";

// Hight Light
function highlightMenu(id)
{
var el = document.getElementById(id);
el.style.backgroundColor = "#000";
el.style.color = "#FFF";
}

//Un Hightlight
function unHighlightMenu(id)
{
if (id != selectedMenuId)
{
var el = document.getElementById(id);
el.style.backgroundColor = "#FFF";
el.style.color = "#000";
}
}

// Click
function clickedMenu(id)
{
highlightMenu(id);
var oldSelected = selectedMenuId;
selectedMenuId= id;
unHighlightMenu(oldSelected)


}


&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;br /&gt;
&lt;div id="myMenu" class="menu" onMouseOver="highlightMenu(this.id)" onMouseOut="unHighlightMenu(this.id)" onClick="clickedMenu(this.id); "&gt; Hello World &lt;/div&gt;

&lt;br /&gt;
&lt;div id="myMenu1" class="menu" onMouseOver="highlightMenu(this.id)" onMouseOut="unHighlightMenu(this.id)" onClick="clickedMenu(this.id);"&gt; Hello Mom &lt;/div&gt;

&lt;br /&gt;
&lt;div id="myMenu2" class="menu" onMouseOver="highlightMenu(this.id)" onMouseOut="unHighlightMenu(this.id)" onClick="clickedMenu(this.id); "&gt; Hello Friend &lt;/div&gt;

&lt;br /&gt;
&lt;div id="myMenu3" class="menu" onMouseOver="highlightMenu(this.id)" onMouseOut="unHighlightMenu(this.id)" onClick="clickedMenu(this.id); "&gt; Hello JavaScript &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;



Drew
Copy linkTweet thisAlerts:
@ericnycauthorFeb 25.2008 — Thank you so much. Exactly what I was looking for.
×

Success!

Help @ericnyc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...