I am starting to learn ember and try to incorporate some navigation bar using zurb foundation framework. I have a problem with dropdown menu. Check this link
<ul class="title-area">
<li class="name">
<h1>Home</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
{{#linkTo "about"}}About{{/linkTo}}
<ul class="vertical dropdown menu" data-dropdown-menu>
<li click>{{#linkTo "about.team"}}Team{{/linkTo}}</li>
</ul>
</li>
<li click>{{#linkTo "about.team"}}About/Team again{{/linkTo}}</li>
<li>{{#linkTo "contact"}}Contact{{/linkTo}}</li>
</ul>
</section>
I can not achive to trigger route when clicking on About/Team. When clicking on "About/Team again" then route works.
Any idea why this happens?
Related
I'm relatively new to web development, and I'm using Materialize for the project I'm working on right now. My navbar code is attached, for some reason I can click on and follow the links in the sidebar, but not in the nav-content tabs. When I take out the tabs tabs-transparent classes in the ul, it works, but it looks ugly. I am loading JQuery- that was the only resolution I saw to this problem when I googled.
<nav class="blue-grey lighten-1 nav-extended" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo center"><img src="/application/static/application/colorondarknotext.png" height=60px/></a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>Account Info</li>
<li>Log Out</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<div class="divider"></div>
</li>
<li>Application</li>
<li>Decisions</li>
<li>Travel Information</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="nav-content hide-on-med-and-down">
<ul class="tabs tabs-transparent">
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
</ul>
</div>
</nav>
I've run into a series of issues like this.
Generally you need to look deeper in the docs. In this case the navbar component docs don't address the issue in their example code. You need to look under javascript>tabs section of the docs to uncover more details about how the tabs work.
http://materializecss.com/tabs.html#external
By default, Materialize tabs will ignore their default anchor behaviour. To force a tab to behave as a regular hyperlink, just specify the target property of that link!
The normal anchor (<a>) functionality is disabled/ignored. In order to make your links work like "normal" you need to add a target attribute to your links.
Assuming you want to open the links in the same window, you would add target="_self" to each <a> tag.
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
Actually I would like to have horizontally scrollable menu with dropdowns smth like this:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable pure-menu-fixed">
Brand
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">Settings</li>
<li class="pure-menu-item">Log Out</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Contact
<ul class="pure-menu-children">
<li class="pure-menu-item">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
</ul>
</div>
But it does not work. Actually horizontal menu scrolling works, but dropdown does not(( I found out that it is because .pure-menu-scrollable and pure-menu-has-children classes can't get along. So at this point I can have or scrolling menu or menu with dropdown but not both at the same time.
Is there any way to make pure menu both scrollable and with dropdown?
I use the framework Foundation 5, i use the top bar and i want to insert into the top-bar a simple progress bar
The only problem is the progross bar is not horizontal but vertically. It's really strange, i don't know how to correct that.
jsfiddle
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<li class="name"><h1>Sexy Top Bar</h1></li>
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<section class="top-bar-section">
<!-- Top Bar Right Nav Elements -->
<ul class="right">
<!-- progess bar bug -->
<li>
<div class="progress">
<span class="meter"></span>
</div>
</li>
<li class="divider"></li>
<!-- Anchor -->
<li>Generic Button</li>
<li class="divider"></li>
<!-- Button -->
<li class="has-form show-for-large-up">
Get Lucky
</li>
</ul>
</section></nav>
It's not vertical, it's just doesn't have width.
fix:
div.progress{
width: 500px;
}
I'm working on a site using the latest version of Foundation 5 SASS (downloaded a few days ago from https://github.com/zurb/bower-foundation).
When I create a top bar the menu-icon (the 3 horizontal lines) doesn't appear on mobile/small screens. It's just the 'MENU' text.
Here is my code:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li>HOME</li>
<li class="has-dropdown">
ROOMS & FACILITIES
<ul class="dropdown">
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
</li>
<li>PRICES</li>
<li>THINGS TO DO</li>
<li>CONTACT</li>
</ul>
<ul class="right">
<li class="show-for-medium-up"><i class="fi-calendar calendar-icon"></i> CHECK AVAILABILITY</li>
</ul>
</section>
</nav>
</div>
Any help greatly appreciated. I've had a good look around already and can't find a solution. Most of the problems seemed to be from people omitting the span tags around the Menu text.
Thanks
the main thing is to have a <span> element. In the case of 2 examples below, the first one will NOT show the hamburger icon, but the second and the third one will.
<li class="toggle-topbar menu-icon ">Menu</li>
<li class="toggle-topbar menu-icon "><span>Menu</span></li>
<li class="toggle-topbar menu-icon "><span></span></li>
<li class="toggle-topbar menu-icon">
<span>MENU</span>
</li>
This works fine with latest (5.5.3) version
The menu-icon class should be in the tag.
<li class="toggle-topbar"><a class="menu-icon" href="#"><span>Menu</span></a></li>
There's a Foundation fix for this here which worked for me, for the top bar menu icon at least.
I have a simple one page site. Im using the "top-bar" wrapped in a "fixed" div, which works fine on every size but mobile. On mobile the nav is in fact fixed until the menu icon is clicked/tapped. then it opens the menu at the top of the page and nav is no longer fixed.
Here is my code:
<div class="fixed">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
Page Title
</h1>
</li>
<li class="toggle-topbar menu-icon"></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Process</li>
<li class="divider"></li>
<li>Bookshelf</li>
<li class="divider"></li>
<li>Brands</li>
<li class="divider"></li>
<li>Looking for</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Thanks in advance.