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

[caspian]

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!

[Paulie_D]

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

[caspian]

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

[Author]

Posts