How to highlight the menu topnav

Discussion in 'CSS' started by cesarwj, Jun 22, 2012.

  1. #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.
     

    Attached Files:

    cesarwj, Jun 22, 2012 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    Is this a question or a tip/tutorial? If it's a question then please explain what you want to achieve.
     
    wiicker95, Jun 22, 2012 IP
  3. cesarwj

    cesarwj Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    wiicker95, 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.
     
    cesarwj, Jun 22, 2012 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    With the code you have, that's VERY easy to get working. Just set the property "onMouseOut" wherever you set "onMouseOver".

    In other words, just after onmouseover="javascript:showsubmenu(1,2 or 3)" add onMouseOut="javascript:showsubmenu(3)" if you want to return back to the first one.

    Hope it helps!
     
    wiicker95, Jun 22, 2012 IP
  5. cesarwj

    cesarwj Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Tks wiicker95 more one time for your help.

    Great, it´s almost there. 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?

    tks
     
    cesarwj, Jun 23, 2012 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    Either add an invisible "link" so it doesn't lose focus, or just stick them together like on the website you showed me. However, your current version is not really recommended because some users aren't as good with their mouse, or they are on laptop so it's a hard task anyway.

    Hope it helps!
     
    wiicker95, Jun 23, 2012 IP
  7. cesarwj

    cesarwj Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    cesarwj, Jun 24, 2012 IP
  8. cesarwj

    cesarwj Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hi wiicker95,

    Can u do it or indicate someone to do it?


    tks
     
    cesarwj, Jun 25, 2012 IP
  9. cesarwj

    cesarwj Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    How to introduce a invisible "link" to doesn't lose focus? I tryed by still I can´t select the submenus. Do u have another tip?
     
    cesarwj, Jun 25, 2012 IP
  10. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #10
    Well, I can't do it if I don't know how it's supposed to look like. Do you want it to look EXACTLY like on that website, but with your javascript right?
     
    wiicker95, Jun 25, 2012 IP
  11. cesarwj

    cesarwj Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    don´t need to be my code. I just want a menu like "www.efk.se". If u want to use my code, ok.

    Can u help me in this?

    tks
     
    cesarwj, Jun 25, 2012 IP