#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2004
    Posts
    50
    Rep Power
    10

    Outlook.com-like top menu [moved from PHP]


    Hi,

    anyone came across a way to make a top navigation menu similar to the menu in outlook.com (hotmail.com)?.
    Regards,
    Jassim
    RMC - UME
    Xoom Page
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Doesn't seem all that unusual to me. I'd suggest starting with something like Superfish.

    *** Moved to JavaScript Forum ***
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2004
    Posts
    50
    Rep Power
    10
    this is the menu I am talking about.

    please see the attached...
    Attached Images
    Regards,
    Jassim
    RMC - UME
    Xoom Page
  6. #4
  7. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,004
    Rep Power
    9398
    That's looking like a CSS thing...

    Can you be very specific about this? Including some kind of background thing? Appearance of buttons? Images? What behavior does the menu have? Is there a cascading menu or just those buttons?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2004
    Posts
    50
    Rep Power
    10
    I am looking to just having the same basic menu with same buttons' style
    Regards,
    Jassim
    RMC - UME
    Xoom Page
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Oh, I thought you were talking about something else.

    There's even less special about what you're asking about. I recommend you use Firebug (in Firefox) or the Developer Tools in Chrome to look at the HTML and CSS code used to make that.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Good morning,

    Yep take a look at the HTML + CSS which creates that effect, then attempt to create your own.

    If you get stuck, by all means come back and we will help you improve the code you've wrote.

    Kind regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo