Menu icon Foundation
Vertical Tabs + Sub Menu Links

Hey All,

First just want to say to zurb awesome framework I started using it recently and love how much easier it to build my site! You've saved me hours and hours of work!

For my question I would to add a sub menu into the Vertical Tab's, I'm sure this is a pretty easy fix but I haven't worked much with

etc and I've been out of the game for 2 years due to illness so any right direction on this would be much appreciated!

The page that I'm working on for this : http://crpu.ca/awards-races

So in the site example I would like to click on say "2014 Awards & Races" and have it dropdown sub links

Thanks in advance!
Daryl

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="/awards-framework-db/css/foundation.css" />
    <script src="/awards-framework-db/js/vendor/modernizr.js"></script>
    <script src="/awards-framework-db/js/foundation.magellan.js"></script>
  </head>
  <body><dl class="tabs vertical" data-tab>
  <dd><a href="#panel1a">2014 Awards & Races</a></dd>
  <dd><a href="#panel1a">2013 Awards & Races</a></dd>
  <dd><a href="#panel2a">2012 Awards & Races</a></dd>
  <dd><a href="#panel3a">2011 Awards & Races</a></dd>
  <dd><a href="#panel4a">2010 Awards & Races</a></dd>
</dl>
<div class="tabs-content vertical">
  
<div class="content" id="panel1a">
 <p>Panel 2 content goes here.</p>
  </div>
   </div>
 
  <div class="content siteloader" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
  <div class="content" id="panel3a">
    <p>Panel 3 content goes here.</p>
  </div>
  <div class="content" id="panel4a">
    <p>Panel 4 content goes here.</p>
  </div>

    
    
    <script src="/awards-framework-db/js/vendor/jquery.js"></script>
    <script src="/awards-framework-db/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
      $(".siteloader").html('<object data="http://backend.crpu.ca/backend/2013" />');
    </script>
  </body>
</html>
            

         

verticaltabtabssub linksSub Nav

Hey All,

First just want to say to zurb awesome framework I started using it recently and love how much easier it to build my site! You've saved me hours and hours of work!

For my question I would to add a sub menu into the Vertical Tab's, I'm sure this is a pretty easy fix but I haven't worked much with

etc and I've been out of the game for 2 years due to illness so any right direction on this would be much appreciated!

The page that I'm working on for this : http://crpu.ca/awards-races

So in the site example I would like to click on say "2014 Awards & Races" and have it dropdown sub links

Thanks in advance!
Daryl

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="/awards-framework-db/css/foundation.css" />
    <script src="/awards-framework-db/js/vendor/modernizr.js"></script>
    <script src="/awards-framework-db/js/foundation.magellan.js"></script>
  </head>
  <body><dl class="tabs vertical" data-tab>
  <dd><a href="#panel1a">2014 Awards & Races</a></dd>
  <dd><a href="#panel1a">2013 Awards & Races</a></dd>
  <dd><a href="#panel2a">2012 Awards & Races</a></dd>
  <dd><a href="#panel3a">2011 Awards & Races</a></dd>
  <dd><a href="#panel4a">2010 Awards & Races</a></dd>
</dl>
<div class="tabs-content vertical">
  
<div class="content" id="panel1a">
 <p>Panel 2 content goes here.</p>
  </div>
   </div>
 
  <div class="content siteloader" id="panel2a">
    <p>Panel 2 content goes here.</p>
  </div>
  <div class="content" id="panel3a">
    <p>Panel 3 content goes here.</p>
  </div>
  <div class="content" id="panel4a">
    <p>Panel 4 content goes here.</p>
  </div>

    
    
    <script src="/awards-framework-db/js/vendor/jquery.js"></script>
    <script src="/awards-framework-db/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
      $(".siteloader").html('<object data="http://backend.crpu.ca/backend/2013" />');
    </script>
  </body>
</html>
            

         
Pam Bifaro about 3 years ago

Oh never mind. when i clicked on you link I was first directed to a login/register page for Code Pen that wanted a fee. but I see that I can just select a different tabs at the top and view the code.

Thanks

James Gehring about 3 years ago

Not sure what your asking? A free version of what exactly?

Pam Bifaro about 3 years ago

This is exactly what I'm looking for. Does anyone have a FREE version??

James Gehring almost 6 years ago

Not sure if this would help but I created a pen that might work. I used the code from the foundation docs, but you can see what I did.

http://cdpn.io/fmDyj

Hope this helps.