I copied the foundation navbar syntax straight from their site https://foundation.zurb.com/sites/docs/top-bar.html and the dropdown menu feature doesnt seem to be working
Here's the code:
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
Here's what it looks like
Make sure to initialize foundation:
$(document).foundation();
I had the same issue -
This appears to be a known issue with Foundation 6.2 ~ 6.4 - at least for Rails apps using the foundation-rails gem.
The fix was to update the foundation_and_overrides.scss include order, move
#include foundation-dropdown-menu;
to the bottom as per here
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
Hej all !
As the title of the subject suggest, I wonder if it's possible to have deep linking that works on nested tabs.
I mean, if I use only one tabs container, it works fine, but I don't know how to deep link to a tab inside a parent tab. It should first open the parent tab and then display the goal child tab.
Is it possible using Foundation 6 deep-linking please (without hacks) ?
Let's say we have this code :
<div>
<ul class="tabs" data-tabs id="tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 1</li>
<li class="tabs-title">Content 2</li>
</ul>
</div>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="tab1">
My Content 1
</div>
<div class="tabs-panel" id="tab2">
<ul class="tabs" data-tabs id="tab2-tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 2-1</li>
<li class="tabs-title">Content 2-2</li>
</ul>
<div class="tabs-content" data-tabs-content="tab2-tabs">
<div class="tabs-panel is-active" id="tab2-tab1">
My Content 2-1
</div>
<div class="tabs-panel" id="tab2-tab2">
My Content 2-2
</div>
</div>
</div>
</div>
How can I open "My Content 2-2" using deep-linking please ?
So, VS Community 2017 offer me to download Glyphfriend.
I installed it, but it's not displaying the icons.
I'm importing all the libraries as usual, like this
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/Site.css"));
I tried also importing all the libraries above directly in the page, but didn't solve the problem.
I'm doing this to display the icons
<ul class="icons-list">
<li class="dropdown">
<span class="fa-cog"></span> <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
//Tried using span as well
<li><span class="mdi-sync"></span> Update data</li>
<li><i class="octicon-list-unordered"></i> Detailed log</li>
<li><i class="glyphicon-check"></i> Statistics</li>
<li><i class="icon-cross"></i> Clear list</li>
</ul>
</li>
</ul>
None of then worked. It works only If I don't use GlyphFriend
<span class="glyphicon glyphicon-adjust"></span>
Any ideas?
I'm new to Foundation and I'm trying to mix several components of Foundation into one nav bar just by using their classes and data attributes they've provided and demoed in their html.
I followed instructions for Responsive Toggle Dropdown at: http://foundation.zurb.com/sites/docs/responsive-navigation.html
And I want to make that Sticky. See: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation , 'Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!'
They left out the toggle part so I don't know if this is even feasible by using just the classes and data attributes they provide for the html.
I can get them both to work separately but not together. It seems buggy but it could be me. I'd love to hear from anyone out there who might have succeeded in doing this!
This is what I have so far. The wider window is sticky and responsive. The dropdown initially falls behind the jumbotron until you scroll up a bit.
The narrow window's responsive toggle works but the sticky does not. And initially the dropdown falls beneath the jumbotron until you widen the window a bit. The drilldown works fine.
This is the code:
<div class="row">
<div data-sticky-container>
<div class="top-bar" data-responsive-toggle="main-menu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1">
<button class="menu-icon" type="button" data-toggle></button>
<div class="top-bar-title">Fruit Is Good</div>
</div>
</div>
<div data-sticky-container>
<nav class="top-bar" id="main-menu" data-sticky data-options="marginTop:0;" style="width:100%" >
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
<li class="menu-text">Fruit Is Good</li>
<li class="active">Home</li>
<li>Apples</li>
<li>Citrus
<ul class="vertical menu">
<li>Oranges</li>
<li>Limes</li>
<li>Lemons</li>
</ul>
</li>
<li>Bananas</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</div>
</div>
And you can find the demo here: http://lucillekenney-demos.com/fruit/home.html
I'm using Bootstrap with an Ember project, and following markup produces navigation tabs that work on the desktop, but fail in Chrome & Safari the iPhone 6.
Here is the markup produced:
<nav>
<ul class="nav nav-tabs">
<li id="ember611" class="ember-view active">
<a>Tab 1</a>
</li>
<li id="ember612" class="ember-view">
<a>Tab 2</a>
</li>
</ul>
</nav>
Tapping on Tab 2 doesn't work. Any suggestions?
Here is the HtmlBars that produces this HTML:
<nav>
<ul class="nav nav-tabs">
{{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
<a href={{view.href}}>Matches</a>
{{/link-to}}
{{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
<a href={{view.href}}>Standings</a>
{{/link-to}}
</ul>
</nav>
I'm using Bootstrap 3.3.4, and Ember 1.3
You're using your li elements as links when they really shouldn't be. That will work in some browsers but it's non-standard. I usually do something like this:
{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
{{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}
This will make the a tag the actual link (which will work across browsers), but will still add the active class to the li elements.