Foundaiton 6 Top Bar Menu like Airbnb - javascript

I am trying to create top bar using Foundation 6 similar to that of Airbnb but having trouble creating it, especially search box. (https://www.airbnb.co.uk)
Here's in codepen: http://codepen.io/anon/pen/WGarPp
Below is the html code I am working on:
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<!-- off-canvas title bar for 'small' screen -->
<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">BRAND</span>
</div>
</div>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu" data-drilldown>
<!-- start of the drilldown multi level menu -->
<li>
<a>Item 1</a>
<ul class="vertical menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>
<a>Item 2</a>
<ul class="vertical menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
<li>Item 2D</li>
<li>Item 2E</li>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="vertical menu">
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
<li>Item 3D</li>
<li>Item 3E</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</div>
<!-- "wider" top-bar menu for 'medium' and up -->
<nav class="marketing-topbar show-for-medium">
<ul class="menu">
<li class="topbar-title">BRAND</li>
</ul>
<ul class="dropdown menu" data-click-open="false" role="menubar">
<li><input type="search" placeholder="Search"></li>
<li role="menuitem">
Sign Up
</li>
<li role="menuitem">
Login
</li>
</ul>
</nav>
</div>
Thanks!


I think this will get you where you are going. As usual, alter as needed and you will need to take care of the styling/css and magnifier icon link.
<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>Menu Foo</li>
<hr/>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="content">
<div class="title-bar no-print" style="width:100%;">
<div class="title-bar-left hide-for-medium" style="width: 100%;">
<div class="title-bar-title text-center" style="width: 100%;">
<div class="row">
<div class="small-1 column position-left">
<button data-responsive-toggle="responsive-menu" class="menu-icon position-left" type="button" data-toggle="offCanvasLeft" style="padding:0;"></button>
</div>
<div class="small-10 column end">
<button data-open="exampleModal1" class="secondary hollow button small" style="width:80%;" >
Where to?
</button>
</div>
</div>
</div>
</div>
<div id="responsive-menu" >
<div class="top-bar-title">
<img src="http://placehold.it/80x38/f3a3fe/000000?text=Brand+Icon" alt="Brand Icon">
</div>
<div class="top-bar-left" style="width:50%;">
<ul class="horizontal menu">
<input type="text" class="" placeholder="Where to?" style="color:white;background: url('images/turn_page20.png') no-repeat left 10px center;padding-left:45px;border:0;" />
</ul>
</div>
<div class="top-bar-right">
<ul class="horizontal menu">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div class="reveal large text-center" id="exampleModal1" data-reveal>
Search
<p><input type="text" placeholder="Where to?" /></p>
<p><input type="submit" value="Submit" /></p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="column row">
Body content here.
</div>
</div><!-- end content -->
</div><!-- end of off-canvas content -->
</div><!-- end off-canvas-wrapper-inner -->

Related

Cancel switching by using the keys on tabs?

I can not figure out how to turn off switching between tabs on the keyboard keys? For some reason, the data-wrap-on-keys = "false" property does not work. Maybe someone ran into it? I just need to switch keyboard did not work
$(document).ready(function () {
$(document).foundation();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
<li class="tabs-title">Tab 3</li>
<li class="tabs-title">Tab 4</li>
<li class="tabs-title">Tab 5</li>
<li class="tabs-title">Tab 6</li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>
</div>

You can do so by calling $('[data-tabs] *').off('keydown.zf.tabs') after initializing foundation
$(document).ready(function () {
$(document).foundation();
$('[data-tabs] *').off('keydown.zf.tabs')
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
<li class="tabs-title">Tab 3</li>
<li class="tabs-title">Tab 4</li>
<li class="tabs-title">Tab 5</li>
<li class="tabs-title">Tab 6</li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>One</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Two</p>
<img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
</div>
<div class="tabs-panel" id="panel3v">
<p>Three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Four</p>
<img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
</div>
<div class="tabs-panel" id="panel5v">
<p>Five</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Six</p>
<img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
</div>
</div>
</div>
</div>
</div>

Bootstrap droppable Navigation menu

I create this navigation menu with Bootstrap ..
How to make it display the dropdown menu on click for small devices but display on hover large ones?
Also whats the way to keep the menu (with burger) of small devices, on tablets as well?
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub
</li>
<li>Sub2
</li>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<ul class="col-sm-4">
<li>Cat</li>
<ul class="thirdmenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub
<ul class="thirdmenu">
<li>SubSub</li>
<li>SubSub</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub</li>
<li>Sub</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Css and Js are applied by Bootstrap... Not changes yet

To make work on hover on larger screens you can use this plugin.
If you want a hamburger menu, you should place it in Bootstrap .navbar as in official documentation

Using BookBlock jquery plugin for the Navigation for Div contents

I am using Bookblock jQuery plugin as a transition effect between divs (consists of image and text) whenever the user clicks the link on the navigation bar.
Somehow, when the nav is at the top of the div, the links won't work.
<div class="container">
<ul class="bb-custom-grid" id="bb-custom-grid">
<li>
<ul id="services-submenu">
<li class="bb-current">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
<div class="bb-bookblock">
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
<div class="bb-item">
<div>
<!-- CONTENT HERE -->
</div>
</div>
</div>
</li>
</ul>
</div>

You need to add class for next, and previous in your
<li class="next"></li><li class="previous"></li>
to render from page 1 to page 5.
Example:
<ul class="services-submen" >
<li class="previous">
<a id="bb-nav-prev" data-toggle="popover" href="#"><i class="fa fa-chevron-left"></i> </a>
</li>
<li class="next">
<a id="bb-nav-next"data-toggle="popover" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>

Foundation 6 topbar animation with motion-ui

Using Foundation 6, I try to get a responsive topbar that involves an animation on toggle (small screens).
I have this:
<div class="top-bar">
<div class="top-bar-title">
<strong>MyTitle</strong>
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="responsive-menu">
<span class="menu-icon" data-toggle></span>
</span>
</div>
<div id="responsive-menu" data-toggler data-animate="hinge-in-from-top spin-out"> <!-- no matter the type of animation is -->
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
1
</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
But even after importing motion-ui library, no transition happens.
Just a rough display:none to display:block of the menu and vice-versa.
It works when I replace data-responsive-toggle by data-toggle but I would lose responsiveness.
Is it a bug regarding Foundation 6?

I had the same problem. Solved it by adding both data-toggle and data-responsive-toggle to the first div:
<div class="top-bar" data-toggle="navmenu" data-responsive-toggle="navmenu" data-hide-for="medium">
<button class="menu-icon" type="button" ></button>
<div class="title-bar-title">Menu</div>
</div>
<nav class="top-bar" id="navmenu" data-toggler data-animate="fade-in fade-out">
<div class="top-bar-left">
<ul class="menu">
<li>Left Item 1</li>
<li>Left Item 2</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
</nav>

Zurb Foundation 6: the topbar doesn´t collapse

I'm having problemas with Foundation 6, I'm a somplete beginner and I'm trying to apply it to a webpage I'm developing for a project at university. I've directly made a copypaste of the topbar code from the Zurb web page and applied to my project and it doesn't work at all.
Here's the code I´ve applied:
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>Asesoreo</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Log in</li>
<li>Sign Up</li>
</ul>
</div>
</div>
The problem is that the menu never collapses and the topbar, which is expected to be hiden while the menu is shown unless the device screen it's small, it's always on sight.
Thanks in advance!
The Pc screen
The mobile screen

here works fine
http://codepen.io/fabiovaz/pen/zrwvjq
please check your js/css path and if you starting foundation
$(document).foundation();

This should fix it:
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<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>

Categories

Resources