How to highlight the menu topnav

HTML & CSS
1

hi,

I want highlighted the current menu after passover the mouse on menu. See http://www.efk.se/. After u pass the mouse over the menu, the current menu is highlighted automatically.

2

Sorry, it’s not really clear what you are asking here. Do you want it to behave as in your attachment, or as in the link you posted. The better way is as in the link you posted, when the highlight only happens on hover, except when you are actually on the page of the menu item, when it is highlighted by default. Otherwise, it would be a bit confusing for users to work out what page they were currently on.

What you see in the link you posted is easy to do with CSS.

3

ralph.m, tks by interest of help me.

How can I active the actual menu from current page automatically after the mouse lost focus from menu?

I´d like to have the same highlight functions (active menu) from this menu http://www.efk.se/.

When the page appear, the blue menu is active. After u pass the mouser over the other big menus (the colors change) and when the mouse lost focus from it, the blue menu is automatically activated.

I don´t know how to active the actual menu automatically from the actual page, after the mouse lost focus. Can u help me in it?

See the css code attached.

I tryed onMouseOut wherever I set “onMouseOver”. Ex: onmouseover=“javascript:showsubmenu(1)” add onMouseOut=“javascript:showsubmenu(3)” , but I can´t selected the submenus.

I did the 1o time <div id=“sublinks” onmouseout=“javascript:showsubmenu(1)” > and after for the 2o time <li><a id=“m1” href=“#” onmouseover=“javascript:showsubmenu(1)” onmouseout=“javascript:showsubmenu(1)” >Home</a></li>.

In the both cases above after mouse lost focus the menu Home is highlighted (activated). It´s fine, but I can´t select the sub menus, because the onmouseout don´t permit it.

How can I select and use the submenus, and after mouse lost focus activate the actual page?

4

It’s quite easy to create that effect, either with CSS or JavaScript. (CSS is better, because it then works even for those without JS on.)

Anyhow, two ways you can do it with CSS:

  • place a special class on the element to be highlighted (such as .current) and place that on the menu item when that page is shwing. You have to do this server-side, though (such as with PHP—which is easy if you are using a CMS).
  • otherwise, add a special class to each menu item, and also a special class on the <body> tag of each page. For example, on your blog page, add classes like so:
<body class="blog">

...

<ul>
  <li><a href="/blog" class="blog">Blog</a></li>
</u>

and in the CSS, do this:


.blog .blog {hover styles go here}

That way, when you are on the blog page, the menu item will be highlighted by default.

There are also various ways to do it with JS. A simple way is to use jQuery:

5

Tks by answear.

Man, How much do u want to create a menu with CSS like of this page “www.efk.se” ?

How long time do u need to delivery it for me?

tks