I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
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.
See the below code for a basic hover dropdown-pane:
<button class="button" type="button" data-toggle="example">Toggle Dropdown</button>
<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
<div class="row">
<div class="medium-12 columns">
<p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
</div>
</div>
</div>
Now what I'd like to have happen is that when the user is viewing any content within that dropdown-pane, the button that triggered the event has a visual indicator that it is the "active" trigger. Here's a picture example:
Any insight you can provide would be very much appreciated.
Foundation has you covered here.
When the .dropdown-pane (content wrapper) is active, the button is given the class .hover (not to be confused with :hover state).
So you can simply add specific styles to that class (relative to your button if you want multiple different types of effect in different scenarios). You would have to manually ensure that your Foundation :hover matched your new .hover state.
HTML (e.g.)
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
CSS
.button.hover,
.button:hover{
background-color: green;
}
Working example: https://jsfiddle.net/tymothytym/8re4jcy0/ << in this example (and above) I'm manually setting :hover and .hover because I've used a default F6 CSS build which has a set :hover state but if you have already set :hover (e.g. to green) you don't need to re-set it.
Use css. Find the style of the hovered over button and either make an :hover pseudo class and apply the style that way or you can use javascript to add a class to the element that will have the exact css as the hovered over button.
.element:hover{
add styles here
}
or
var element=document.getElementByClassName('.className');
element.addClass('.classToAdd');
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 am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file