CODEWITHSUNDEEP
javascriptzurb-foundationstickymagellan
Eric Thibeault
Eric Thibeault

Reputation: 91

foundation 5 sticky magellan vertical menu

I'm trying to reproduce a magellan sidebar menu like the one on this link http://jsfiddle.net/mBSA4/

<ul class="magellan tabs vertical" data-magellan-expedition="fixed">
  <li data-magellan-arrival="grid"><a href="#grid">Grid</a></li>
  <li data-magellan-arrival="tabs"><a href="#tabs">Tabs</a></li>
  <li data-magellan-arrival="buttons"><a href="#buttons">Buttons</a></li>
</ul>

But it's in foundation 4 and doesn't seem to work as expected with foundation 5. I'm trying some things but I just can't reproduce a sticky vertical sidebar. What I'm reproducing is a sidebar that goes full horizontal - on top of viewport - when I scroll. Which is not the behavior I want. I want a vertical ul-tab all the time.

Anybody had this resolved?

Thanks a lot

Upvotes: 0

Views: 1261

Answers (1)

Gita Street
Gita Street

Reputation: 51

Use the HTML code from Foundation 5 - and just replace the class "sub-nav" with "side-nav": 

<dl class="sub-nav">

The code for my vertisidebar Magellan

<div data-magellan-expedition="fixed">
  <dl class="side-nav">
    <dd data-magellan-arrival="tabs"><a href="#tabs">Tabs</a></dd>
    <dd data-magellan-arrival="code"><a href="#code">code</a></dd>
  </dl>
</div>

Upvotes: 0

Related Questions