Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow How Hard is it to Re-Create This Navigation?

    Hi I really like the horizontal navigation that Piwik analytics uses, see their live demo with nav bar here: http://demo.piwik.org/index.php?modu...&idDashboard=1

    I want to re-create that navigation for my own website. The problem though is that my JS is very rusty. So I was wondering...
    How hard is it to re-create a menu like that, would it be pretty simple with some jquery and basic JS knowledge? My programming knowledge is good (php), just not very experienced with JS.

    I was thinking of maybe hiring someone at freelancer.com, but if it's easy I prefer to do it myself, maybe with some help, so I know for sure the code is clean and not spaghetti chaos.

    Anyone can help?
    Last edited by jeanpaul1979; 08-30-2012 at 12:05 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,477
    Thanks
    6
    Thanked 980 Times in 953 Posts
    JavaScript has (almost) nothing to do with this, this is a plain CSS thing. Looking at the source code it appears to be the Suckerfish menu (or its son) but with some CSS 3 magic added to it. However, now that IE 6 is insignificant you can disregard the suckerfish part of the menu and just use the regular CSS.

    It is really simple and the best way to learn is to look at and/or copy their source code (ideally with a code inspection/debugging tool which is usually already built into the browser). You have a list with nested sub lists, and you hide the sub lists and show them on :hover over the main list items. There is a little more to it in terms of styling but the functionality comes down to this.


  •  

    Posting Permissions

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