I'm having problems with Zurb's foundation navigation (I'm new to this and I'm having a steep learning curve and I've hit a wall)
I would like to do a couple of things:
Have the "menu icon" on the left hand side when the topbar is being toggled.
I would like to have three sections when the topbar is being toggled (Title/Middle/Menu)
Any ideas or help would be greatly appreciated!
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><h1>Title</h1></li>
<li class="toggle-topbar menu-icon"><span>MENU</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li></li>
<li class="divider"></li>
<li class="has-dropdown">
<ul class="dropdown">
<li class="divider"></li>
<li class="divider"></li>
<li class="divider"></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</section>
Try with this code :
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Menu
<ul class="dropdown">
<li>First link in dropdown</li>
<li>Second link in dropdown</li>
</ul>
</li>
</ul>
</section>
</nav>
Go on : http://foundation.zurb.com/docs/components/topbar.html#
Related
I'm new with django-cms and i want to add menu like image i post.
I have read the doc but i don't know how to create my custom menu.
I want to get something like this html code (Please add me explain):
some place in code i have .col-4, and another place i have .col-3 look image and code for more comprehension.
<ul class="menu">
<li class="toggle-menu">
<i class="fa icon_menu"></i>
</li>
<li class="first">
Accueil
</li>
<li>
Photographie
<div class="megamenu full">
<div class="row">
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Evènements</li>
<li>Mariage</li>
<li>Portrait</li>
</ul>
</div>
<div class="col-4">
<ul class="megamenu-list">
<li class="title">Entreprise et institutions</li>
<li>Portraits Corporate</li>
<li>Reportage entreprise</li>
</ul>
</div>
</div>
</div>
</li>
<li>
Production media
<div class="megamenu full">
<div class="row">
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Présentation</li>
<li>A propos</li>
<li>Nos offres</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Services</li>
<li>Montage</li>
<li>Drones</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Vos évènements</li>
<li>Mariages</li>
<li>Reportage coorporate</li>
</ul>
</div>
<div class="col-3">
<ul class="megamenu-list">
<li class="title">Location</li>
<li>Cameras</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
but i dont know how, please help
I have below html code for submenu. Now i have to integrate with my django application.
HTML Code :
<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
<p class="nav-title">MENU</p>
<ul class="nav">
<!-- dashboard -->
<li>
<a href="a.html">
<i class="ti-home"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;">
<i class="toggle-accordion"></i>
<i class="ti-support"></i>
<span>Category1</span>
</a>
<ul class="sub-menu">
<li>
<a href="SubCategory1.html">
<span>Sub Category1</span>
</a>
</li>
<li>
<a href="SubCategory2.html">
<span>Sub Category2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="toggle-accordion"></i>
<i class="fa fa-file-text-o"></i>
<span>Category2</span>
</a>
<ul class="sub-menu">
<li>
<a href="SubCategory7.html">
<span>SubCategory7</span>
</a>
</li>
</ul>
</li>
</nav>
I have used simple-menu module for that.
but i don't understand how to apply bootstarp class in simple menu which are in below code.
For this submenu i have to use simple-submenu ?
i have try simple-menu Code is below.
<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
<p class="nav-title">MENU</p>
<ul class="nav">
{% for item in menu%}
<li>
<a href="{{ item.url }}">
<i class="ti-home"></i>
<span>{{ item.title }}</span>
</a>
</li>
<li>
<ul class="sub-menu">
{% for child in item.children%}
<li>
<a href="{{ item.url }}">
<span>{{ child.title }}</span>
</a>
</li>
</ul>
</li>
<!-- /ui -->
</nav>
On above code how to apply different classes in for loop for particular html tag ?
You can use randomly generated classes or use Django's cycle tag.
Using randomly generated classes:
{% for item in menu%}
<li>
<a href="{{ item.url }}">
<i class="ti-home-{{forloop.counter}}"></i>
<span>{{ item.title }}</span>
</a>
</li>
...
Using cycle tag:
{% for item in menu%}
<li>
<a href="{{ item.url }}">
<i class="{% cycle "ti-home-1" "ti-home-2" "ti-home-3" "ti-home-end"%}"></i>
<span>{{ item.title }}</span>
</a>
</li>
...
Would really welcome some help with my navbar. I'm trying to achieve what I consider the most obvious setup. Dropdown menus on larger screens and drilldowns on smaller ones. I have a pen here but there are bullet marks that should not be there, and the menu opens horizontally (I want it vertically) on larger screens.
<div class="title-bar" data-responsive-toggle="nav-menu" data-hidefor="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title player-controls">Brand
</div>
</div>
<div class="top-bar" id="nav-menu">
<div class="row">
<div class="top-bar-left show-for-medium">
Brand
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
Item
<ul class="vertical submenu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
<li class="">Item</li>
</ul>
</div>
</div>
</div>
Not entirely sure about the vertical menu issue as the pen works fine for me. Regarding the errant bullet points, you are missing some essential classes. For the site title, you're using an li without the surrounding ul element. Add a ul with a class of menu around the title to fix that problem:
<ul class="menu">
<li class="menu-text">Site Title</li>
</ul>
The same menu class is missing for the sub menu:
<ul class="vertical submenu menu" data-submenu>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
<li role="menuitem">Sub-Item</li>
</ul>
Here's an updated Pen
I'm wondering if this is a Foundation bug, or if I've missed something in my code. My nav bar is structured as follows:
<div class="sticky noprint">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<!-- This li needs to be here for for some strange reason to make the mobile menu work -->
<li class="name">
<!-- <h1>Home</h1> -->
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<!-- Class Dropdown -->
<!-- <li><img src="background180.png" alt="background120" width="225" height="60"></li> -->
<li class="has-dropdown">
Courses
<ul class="dropdown">
<li>All Classes</li>
<li class="has-dropdown">
Course Admin
<ul class="dropdown">
<li>Search for a Course</li>
<li>Edit a Course</li>
<li>Add a Course</li>
</ul>
</li>
</ul>
</li>
<!-- Class Dropdown Ends -->
<!-- Learner Dropdown -->
<li class="has-dropdown">
Learner
<ul class="dropdown">
<li>Search for a Learner</li>
<li>Add a Learner</li> <li>Edit a Learner</li>
<li>List All Active Learners</li>
</ul>
</li>
<!-- Learner Dropdown Ends -->
<!-- Grades Dropdown -->
<li class="has-dropdown">
Grades
<ul class="dropdown">
<li class="has-dropdown">
View and Enter Grades
<ul class="dropdown">
<li>All Courses</li>
</ul>
</li>
<li class="has-dropdown">
Grade Templates
<ul class="dropdown">
<li>Create Template</li>
<li>Active Templates</li>
<li>All Templates</li>
</ul>
</li>
</ul>
</li>
<!-- Grades Dropdown Ends -->
<!-- Employee Dropdown -->
<li class="has-dropdown">
Employee
<ul class="dropdown">
<li>Add an Employee</li>
<li>Edit an Employee</li>
<li>Search for an Employee</li>
</ul>
</li>
<!-- Employee Dropdown Ends -->
<!-- Reports Dropdown -->
<li class="has-dropdown">
Reports
<ul class="dropdown">
<li class="has-dropdown">
Program
<ul class="dropdown">
<li>New Registrations</li>
<li>Email All Active Students</li>
<!-- <li>Email All Active Students Using Your Default Client</li> -->
<li>Weekly Course Report (Your Courses)</li>
<li>Weekly Course Report (Active Courses)</li>
<li>Weekly Class Report (Inactive Courses)</li>
<li>Grades</li>
<li>Grades (Old System)</li>
<!-- <li>Program Totals</li> -->
<!-- <li>IMS Action</li> -->
<!-- <li>Exited Needs Action</li> -->
</ul>
</li>
<li class="has-dropdown">
Reporting
<ul class="dropdown">
<li>New Reg CSV for</li>
<li>New Reg CSV for</li>
<li>Active - No</li>
<li>Action</li>
<li>Exit 3-Month Follow-up</li>
<li>Exit 6-Month Follow-up</li>
<li>Exit 12-Month Follow-up</li>
</ul>
</li>
<li class="has-dropdown">
Counsellor
<ul class="dropdown">
<li>100 Day No Attendance</li>
<li>Active - No Classes</li>
<!-- <li>Pause 3-Month Follow-up</li> -->
<!-- <li>All Paused Students</li> -->
</ul>
</li>
<li class="has-dropdown">
DUP
<ul class="dropdown">
<li>Active - No</li>
<li>Banner Action</li>
<li>Exit 3-Month Follow-up</li>
<li>Exit 6-Month Follow-up</li>
<li>Exit 12-Month Follow-up</li>
<li>100 Day No Attendance</li>
<li>Active - No Classes</li>
<!-- <li>Pause 3-Month Follow-up</li> -->
<!-- <li>All Paused Students</li> -->
<!-- <li>Exited Needs Action</li> -->
</ul>
</li>
</ul>
</li>
<li class="has-dropdown">
Account
<ul class="dropdown">
<!-- <li class="active">Right Button Active</li> -->
<li>Request Access</li>
<li>Report Bugs</li>
<li>Login</li>
<li>Edit Your Account</li>
<li>Logout</li>
</ul>
</li>
<!-- Reports Dropdown Ends -->
</ul>
<!-- Left Nav Ends -->
<!-- Right Nav Section -->
<ul class="right">
<li class="has-form">
<form name="form" action="select.php" method="get">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" name="search" id="search" style="height: 29px" placeholder="">
</div>
<div class="large-4 small-3 columns">
<input type="submit" class="button expand" value="Search">
</div>
</div>
</form>
</li>
</ul>
<!-- End Right Nav Section -->
</section>
</nav>
</div>
So what I'm wondering is: Desktop works perfectly. When I shrink to mobile screen size, perform a search, the search bar now takes over the entire menu and won't show the hamburger menu as it's supposed to. Can anyone suggest a fix? Thanks so much in advance!
Why Menu button not workig?
He does not react to clicks.
JS errors in the browser console is not.
My code:
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>GamingTop</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"><ul class="left"><li>Рейтинги</li><li>Игры</li><li>О нас</li></ul>
<ul class="right">
<li class="has-dropdown not-click">
guyasyou#gmail.com
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li>
<li>Профиль</li>
<li>Мои сервера</li>
<li class="divider"></li>
<li>Выйти</li>
</ul>
</li>
</ul>
</section>
Included JS:
<script type="text/javascript" src="/testtop/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/testtop/js/foundation.min.js"></script>
This can be caused by the version of your jQuery. Try to use the latest version and don't forget to close the nav tag.
Its okay with this code :
Header :
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
Code :
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1>GamingTop</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"><ul class="left"><li>Рейтинги</li><li>Игры</li><li>О нас</li></ul>
<ul class="right">
<li class="has-dropdown not-click">
guyasyou#gmail.com
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li>
<li>Профиль</li>
<li>Мои сервера</li>
<li class="divider"></li>
<li>Выйти</li>
</ul>
</li>
</ul>
</section>
</nav>
Before closing your body tag :
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<script>
$(document).foundation();
</script>