SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post How to highlight the menu topnav

    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.
    css with html.txt.txt

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <body class="blog">
    
    ...
    
    <ul>
      <li><a href="/blog" class="blog">Blog</a></li>
    </u>
    and in the CSS, do this:

    Code:
    .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:

    http://css-tricks.com/snippets/jquer...-current-page/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    <body class="blog">
    
    ...
    
    <ul>
      <li><a href="/blog" class="blog">Blog</a></li>
    </u>
    and in the CSS, do this:

    Code:
    .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:

    http://css-tricks.com/snippets/jquer...-current-page/

    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •