Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] A little help with figuring out a toolbar?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #151709
    caspian
    Participant

    Hi everyone!

    Is there anyone here who’d be willing to give me a brief explanation of how the developers got the nav bar on this page https://www.att.com/olam/passthroughAction.myworld?actionType=Manage to function the way it does, in exchange for a promise of a free beverage or two of their choice some day?

    I’m specifically trying to duplicate the way the horizontal subnav functions. I like how each one is activated upon hover and stays displayed until you hover over another li and the subnav for that appears and stays displayed. For instance, when you hover over ‘Shop’ in the orange menu, it opens the subnav with WIreless, Bundles, Digital TV, etc. Then when you hover over ‘myAT&T,’ it displays the items Overview, Bill & Payments, etc. It’s good usability because it reduces the number of clicks the user has to perform to navigate to different sections. I’m trying to duplicate that effect for an app I’m building as a way to reduce repetitive tasks for our users (some on IE8).

    Even just a brief outline without all the details, like whether you think it’s mostly powered by jquery or straightforward CSS, would be much appreciated! Sometimes I’m just not good at figuring out complex setups like that.

    Thanks for any light you could shed on this!

    #151712
    Paulie_D
    Moderator

    It will be powered by JS/JQ most likely.

    The AT&T menu is open by default and rather than a click they add/remove classes (I presume) on a mouseOver/mouseLeave.

    I’m not expert with JS but here’s one I have for reference that operates by setting an ‘active’ class with a click.

    http://codepen.io/Paulie-D/pen/488842da8d7807b7b924d0b5637589d3

    #151716
    caspian
    Participant

    Thank you! I’ll take a look at that.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.