How to make a vertical tabs like we have in zurb foundation doc website : http://foundation.zurb.com/docs/javascripts.php where we have tabs and sub menu when clicking on item for example "javascript".
Here is the code from their page
it's just unordered list inside one of list elements from main navigation
<ul class="tabs vertical hide-on-phones">
<li>Getting Started</li>
<li>Compass</li>
<li>Rails</li>
<li>Sass</li>
<li>CSS Quickstart</li>
<li class="active">Components
<ul>
<li>Overview</li>
<li>The Grid</li>
<li>Media Queries</li>
<li>Typography</li>
<li>Buttons</li>
<li>Forms</li>
<li class="active">Navigation</li>
<li>Tabs</li>
<li>Elements</li>
</ul>
</li>
<li>Javascripts</li>
<li>Support</li>
</ul>
Related
I have a responsive menu in responsive 5 (5.4.7). The mobile menu (hamburger icon) shows for below 640 px, between 640 and 1185px the mobile menu disappears but the normal menu doesn't display properly. How do I change the breaking point of the mobile menu from 640 to 1185 (or some other designation).
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1 data-finder-type="Web App" data-finder-name="Logo" data-finder-id="7616221"><img src="{{ companyInfo['Logo']}}" alt="logo"></h1>
</li>
<li class="toggle-topbar menu-icon"><span></span>
</li>
</ul>
<section class="top-bar-section">
<ul>
{module_menu, version="2", menuId="1405853", moduleTemplateGroup="Default"}
</ul>
</section>
</nav>
Go to your _settings.scss file and around line 1425 you'll see the variable (which may be commented out by default):
$topbar-media-query: $medium-up;
Remove the '//' so it's no longer commented out, then change the '$medium-up' to either '$large-up' or more precisely 1185px. So it would look something like this:
$topbar-media-query: $large-up;
OR
$topbar-media-query: 1185px;
Setting the variable to '$large-up' makes the mobile hamburger menu display from the medium viewport size on down.
I know you didn't ask for this, but if you want the mobile hamburger menu to always show you can do the following:
$topbar-media-query: 9999px;
Is it possible to open a Foundation 6.3 accordion menu from a regular href link on the same page? I'm using the most current Foundation v6.3.1 and have found some info on doing this but nothing that works in my case.
This post seems to have an ideal solution (Trigger opening of a Zurb Foundation Accordion via URL hash link) but it doesn't seem to jell with the latest release?
Yep, there are some alternative methods and the exact way it's applied is up to what you want to achieve, but basically the answer is: "use JavaScript".
This is my method:
Add a means of identifying the CONTENT of each tab you want to open. Below I have added a new data attribute (data-remote) to .accordion-content.
Create a link that has an id that corresponds to the new data-remote on the tab you want to open with that link. e.g. id="toggleAco1" & data-remote="toggleAco1"
Use the in-built Foundation function to toggle the tab on click (see JS/JQ below)
So all together it is something like this:
HTML
<div class="block">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content data-remote="toggleAco1">
<p>Panel 1. Lorem ipsum dolor</p>
Nowhere to Go
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content data-remote="toggleAco2">
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content data-remote="toggleAco3">
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>
</div>
<div class="block">
Open accordion tab 1
Open accordion tab 2
Open accordion tab 3
</div>
JS/JQ
$('a').on('click', function() {
var dataTarget = $(this).attr('id');
$('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});
A simple JSFiddle example
The advanced options from the docs
N.B. What the links will do is linked to the data attributes you include and the same as if you clicked the accordion title for a tab. So if you allow multi-opening then the links will open each and leave it open, if you don't (as in the e.g.) then they will close once a new one is open etc.
System Info:
Windows 7 x64
aurelia-framework: "^1.0.0-beta.1.1.3"
"foundation-sites": "^6.2.1"
skeleton-navigation-webpack
How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page? This is causing the dropdown to work incorrectly.
I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page
Aurelia Code
main.js to initialize foundation framwork
aurelia.start().then(a => a.setRoot('app', document.body))
.then(a => {
// Initialize any frameworks you want to use
$(document).foundation();
console.log('foundation loaded')
});
The initialization of foundation $(document).foundation(); seems to work as the dropdown menu is displayed and working but the css is slightly different
nav-bar.html snippet before code is emitted
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li repeat.for="row of router.navigation">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia
emitted code in Aurelia
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
<!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
<a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
</li><!--</view>--><!--<view>-->
Standard html page
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0">One</li>
One specific is the open-left class in the first <li>
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
Verse the is-down arrow is active
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
'reflow' is not Foundation 6, I instead use
attached(){
// refresh JS after DOM is loaded
$(document).foundation();
}
I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.
Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.
Aurelia as a "Single Page Application" framework loads page content dynamically all the time. I don't have tested it, but I think you have to re-apply foundation after ajax content is loaded.
You can do it calling foundation 'reflow' in the attached view-model method:
attached() {
$(document).foundation();
}
I am trying to use Foundation's joyride in my website. I took the example on Zurbs homepage like this
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">
<p>Hello and welcome to the Joyride <br>documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">
<h4>Stop #1</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">
<h4>Stop #2</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="End" data-prev-text="Prev">
<h4>Stop #3</h4>
<p>It works as a modal too!</p>
</li>
and then in the javsScript I initialize it like this
$(document).foundation('joyride', 'start');
I get this error on my console,
Uncaught RangeError: Maximum call stack size exceeded
Any explanations on how I am getting this error?
Sounds like the page is missing an element for Joyride to attach to. Your code contains the JoyRide modals but doesn't contain an element to attach to.
Add
<div id="firstStop">First Stop</div>
to your HTML.
Here's a working demo.
I'm using foundation as a basis for the site design and developing a nav bar for the side of the screen. I want to use Foundation's side nav because it has dividers and nice method for graying out or marking nav links as 'active'. The problem I'm having is that the clickable area for the link extends the width of the container instead of the text content of the link. I feel that is confusing and I don't want that experience for my users.
Zurb Foundation Code:
<section class="section">
<ul class="side-nav no_padding_top">
<h5 >What can I do here?</h5>
<li class="">
<a href="#" >View Popular</a>
</li>
<li class="">
<a href="#" >View Top Rated</a>
</li>
<li class="">
<a href="#" >Browse Categories</a>
</li>
</ul>
</section>
In the picture below I show the way the zurb site nav is rendered (bottom) with a border around the clickable area. I want to limit the click area around the link text (top), ie. the clickable link is the size of the text, not the container. How can I override the default zurb foundation behavior to do that?
It is because the link is set to display:block. Override it with:
.side-nav li a {
display: inline-block;
}