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>
Related
I am trying to create a menu toggle like on mobile for the desktop also with hide and show functionality but I am not able to do so.
$(document).ready(function() {
$("#menuMobileToggle").click(function() {
$(".CategoryList").slideToggle(700);
});
});
<div id="top-nav">
<div class="CategoryList" id="TopCategoryList">
<div class="SideCategoryListClassic">
<nav>
<ul class="category-list" style="padding-top: 3px;">
<li class="">MOTO-D Tire Warmers</li>
<li class="">MOTO-D Stands</li>
<li class="">Bonamici Rearsets</li>
<li class="">MOTO-D "Next" GPS Lap Timer</li>
<li class="">MOTO-D Undersuit</li>
<li class="">Spark Italy Exhausts</li>
<li class="">Accessories</li>
</ul>
</nav>
</div>
</div>
<div class="clear"></div>
<a href="#" id="menuMobileToggle">
Seems like your code is incomplete and you must include jquery library. check below snippet.
$(document).ready(function() {
$("#menuMobileToggle").click(function() {
$(".CategoryList").slideToggle(700);
});
});
.CategoryList {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-nav">
Menu
<div class="clear"></div>
<div class="CategoryList" id="TopCategoryList">
<div class="SideCategoryListClassic">
<nav>
<ul class="category-list" style="padding-top: 3px;">
<li class="">MOTO-D Tire Warmers</li>
<li class="">MOTO-D Stands</li>
<li class="">Bonamici Rearsets</li>
<li class="">MOTO-D "Next" GPS Lap Timer</li>
<li class="">MOTO-D Undersuit</li>
<li class="">Spark Italy Exhausts</li>
<li class="">Accessories</li>
</ul>
</nav>
</div>
</div>
</div>
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
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 -->
I am trying to do the Sidenav, when i have a full screen, the menu displays but when i minimize the browser the menu button shows but when i click it, it doesn't display anything. I don't know why. I am using Materialize css. http://jsfiddle.net/xdrL9e83/8/. When i run it in Jsfiddle it shows the Toggle icon being outside Navbar. I don't know why
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
The Javascript
<script>
$(".button-collapse").sideNav();
</script>
Your DIV is closed in the wrong place. It needs to close after the content of your Nav.
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="mdi-navigation-menu"></i>
<ul class="right hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</div>
</nav>
http://jsfiddle.net/aaronfranco/xdrL9e83/14/
Put the menu toggle icon (mdi-navigation-menu) at the top..
<nav>
<i class="mdi-navigation-menu"></i>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</nav>
Demo: http://codeply.com/go/mMvlUnsNRT
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>