Menu icon Foundation

My Posts











My Comments

Hannes Lehner commented on Hannes Lehner's post about 3 years

The issue is solved. I have used foundation.css. But that does not work. Something seems to be wrong with this css. Now I use foundation.min.css and everything works.

Hannes Lehner commented on Hannes Lehner's post about 3 years

I've just noticed that no Java menucode is working for me.
For example: If I copy the code of the Responsive Toggle from
http://foundation.zurb.com/sites/docs/responsive-navigation.html
it don't work. Something must be wrong with the js I downloaded. But I tried the complete css and the essential css. No difference.
I think, I include all that is needed:
foundation.min.css
app.css
 
and
 
jquery.js
what-input.js
foundation.js
app.js
 
jquery.min.js, what is mentioned here
http://foundation.zurb.com/sites/docs/javascript.html
is not in the download folder.

Hannes Lehner commented on Hannes Lehner's post about 3 years

Hi Rafi,believe me, the menu don't work in small screens, no matter whether right or left.I use F 6.2.1 for Sites, complete css (checked it also with essential).Here ist an new side with your code. There is no small menu (no hamburger, it don't open). But in your CodePen, it works! I don't know the reason.
<!DOCTYPE html><html  class="no-js"  dir="ltr"  lang="en"><head><meta  content="text/html; charset=utf-8"  http-equiv="content-type"><meta  http-equiv="x-ua-compatible"  content="ie=edge"><meta  name="viewport"  content="width=device-width, initial-scale=1.0"><title>Foundation for Sites</title><link  rel="stylesheet"  href="css/foundation.css"><link  rel="stylesheet"  href="css/app.css"></head><body><div  class="title-bar"  data-responsive-toggle="main-menu"  data-hide-for="medium"><button  class="menu-icon float-right"  type="button"  data-toggle=""></button><div  class="title-bar-title float-right">Menu</div></div><div  class="top-bar"  id="main-menu"><div  class="top-bar-left"><ul  class="dropdown menu"  data-dropdown-menu=""><li  class="menu-text"><strong>Site Title</strong></li></ul></div><div  class="top-bar-right"><ul  class="menu vertical medium-horizontal"  data-responsive-menu="drilldown medium-dropdown"><li><a  href="#">Oberlink 1</a></li><li  class="has-submenu"> <a  href="#">Oberlink 2</a><ul  class="submenu menu vertical"  data-submenu=""><li><a  href="#">One</a></li><li  class="has-submenu"> <a  href="#">One</a><ul  class="submenu menu vertical"  data-submenu=""><li><a  href="#">One</a></li><li><a  href="#">Two</a></li><li  class="has-submenu"> <a  href="#">One</a><ul  class="submenu mega menu vertical"  data-submenu=""><li><a  href="#">One</a></li><li><a  href="#">Two</a></li><li><a  href="#">Three</a></li></ul></li></ul></li><li><a  href="#">Two</a></li></ul></li><li><a  href="#">Oberlink 3</a></li></ul></div></div><script  src="js/vendor/jquery.js"></script><script  src="js/vendor/what-input.js"></script><script  src="js/vendor/foundation.js"></script><script  src="js/app.js"></script></body></html>

Hannes Lehner commented on Hannes Lehner's post about 3 years

Thanks Rafi Benkual,
can you post it on gifthub?

Hannes Lehner commented on Hannes Lehner's post about 3 years

Hallo Rafi Benkual,
If you use longer Linknames in your Parent-Link, for example "Oberlink1", "Oberlink2", "Oberlink3" instead of "Two", "One", "Three", you can replicate it, because the Menu don't work any longer.Alex Smith has suggested to use data-alignment="right". That works, but then the arrows are in the wrong direction.

Hannes Lehner commented on Hannes Lehner's post over 3 years

Hi Alex,
It works - partially. Now the arrows are in the wrong direction :-(
see picture:

Hannes Lehner commented on Hannes Lehner's post over 3 years

It's incredible! When used in your code longer link names, the orientation change in the wrong direction.This is Rafis code with longer link names:
<div class="title-bar" data-responsive-toggle="main-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="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu="">
<li class="menu-text">Site Title</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">Oberlink1</a></li>
<li class="has-submenu"> <a href="#">Oberlink2</a>
<ul class="submenu menu vertical" data-submenu="">
<li><a href="#">One</a></li>
<li class="has-submenu"> <a href="#">One</a>
<ul class="submenu menu vertical" data-submenu="">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="has-submenu"> <a href="#">Tree</a>
<ul class="submenu mega menu vertical" data-submenu="">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">One</a></li>
</ul>
</li>
<li><a href="#">Oberlink3</a></li>
</ul>
</div>
</div>

Hannes Lehner commented on Rafi Benkual's post over 3 years

:( Next time, I'll wait with the update until everything really works.

Hannes Lehner commented on Rafi Benkual's post over 3 years

Thanks Vladimir. In my case it does not affect on mobile device, but on large screens. Is it the same bug?

Hannes Lehner commented on Rafi Benkual's post over 3 years

Thanks Vladimir. In my case it does not affect on mobile device, but on large screens. Is it the same bug?

Posts Followed


  • 7
    Replies
  • Foundation 6.x Top Bar Responsive Menu

    By PHILL

    6top barmenu

    Hello, I have build a responsive menu following the instructions here https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6 The responsive bar works, but not the way I had hoped, in short I am looking for more of a v5 look: The resp... (continued)

    Last Reply by miss ziva about 1 year ago






Following

    No Content

Followers

My Posts

My Comments

You commented on Hannes Lehner's post about 3 years

The issue is solved. I have used foundation.css. But that does not work. Something seems to be wrong with this css. Now I use foundation.min.css and everything works.

You commented on Hannes Lehner's post about 3 years

I've just noticed that no Java menucode is working for me.
For example: If I copy the code of the Responsive Toggle from
http://foundation.zurb.com/sites/docs/responsive-navigation.html
it don't work. Something must be wrong with the js I downloaded. But I tried the complete css and the essential css. No difference.
I think, I include all that is needed:
foundation.min.css
app.css
 
and
 
jquery.js
what-input.js
foundation.js
app.js
 
jquery.min.js, what is mentioned here
http://foundation.zurb.com/sites/docs/javascript.html
is not in the download folder.

You commented on Hannes Lehner's post about 3 years

Hi Rafi,believe me, the menu don't work in small screens, no matter whether right or left.I use F 6.2.1 for Sites, complete css (checked it also with essential).Here ist an new side with your code. There is no small menu (no hamburger, it don't open). But in your CodePen, it works! I don't know the reason.
<!DOCTYPE html><html  class="no-js"  dir="ltr"  lang="en"><head><meta  content="text/html; charset=utf-8"  http-equiv="content-type"><meta  http-equiv="x-ua-compatible"  content="ie=edge"><meta  name="viewport"  content="width=device-width, initial-scale=1.0"><title>Foundation for Sites</title><link  rel="stylesheet"  href="css/foundation.css"><link  rel="stylesheet"  href="css/app.css"></head><body><div  class="title-bar"  data-responsive-toggle="main-menu"  data-hide-for="medium"><button  class="menu-icon float-right"  type="button"  data-toggle=""></button><div  class="title-bar-title float-right">Menu</div></div><div  class="top-bar"  id="main-menu"><div  class="top-bar-left"><ul  class="dropdown menu"  data-dropdown-menu=""><li  class="menu-text"><strong>Site Title</strong></li></ul></div><div  class="top-bar-right"><ul  class="menu vertical medium-horizontal"  data-responsive-menu="drilldown medium-dropdown"><li><a  href="#">Oberlink 1</a></li><li  class="has-submenu"> <a  href="#">Oberlink 2</a><ul  class="submenu menu vertical"  data-submenu=""><li><a  href="#">One</a></li><li  class="has-submenu"> <a  href="#">One</a><ul  class="submenu menu vertical"  data-submenu=""><li><a  href="#">One</a></li><li><a  href="#">Two</a></li><li  class="has-submenu"> <a  href="#">One</a><ul  class="submenu mega menu vertical"  data-submenu=""><li><a  href="#">One</a></li><li><a  href="#">Two</a></li><li><a  href="#">Three</a></li></ul></li></ul></li><li><a  href="#">Two</a></li></ul></li><li><a  href="#">Oberlink 3</a></li></ul></div></div><script  src="js/vendor/jquery.js"></script><script  src="js/vendor/what-input.js"></script><script  src="js/vendor/foundation.js"></script><script  src="js/app.js"></script></body></html>

You commented on Hannes Lehner's post about 3 years

Thanks Rafi Benkual,
can you post it on gifthub?

You commented on Hannes Lehner's post about 3 years

Hallo Rafi Benkual,
If you use longer Linknames in your Parent-Link, for example "Oberlink1", "Oberlink2", "Oberlink3" instead of "Two", "One", "Three", you can replicate it, because the Menu don't work any longer.Alex Smith has suggested to use data-alignment="right". That works, but then the arrows are in the wrong direction.

You commented on Hannes Lehner's post over 3 years

Hi Alex,
It works - partially. Now the arrows are in the wrong direction :-(
see picture:

You commented on Hannes Lehner's post over 3 years

It's incredible! When used in your code longer link names, the orientation change in the wrong direction.This is Rafis code with longer link names:
<div class="title-bar" data-responsive-toggle="main-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="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu="">
<li class="menu-text">Site Title</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">Oberlink1</a></li>
<li class="has-submenu"> <a href="#">Oberlink2</a>
<ul class="submenu menu vertical" data-submenu="">
<li><a href="#">One</a></li>
<li class="has-submenu"> <a href="#">One</a>
<ul class="submenu menu vertical" data-submenu="">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="has-submenu"> <a href="#">Tree</a>
<ul class="submenu mega menu vertical" data-submenu="">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">One</a></li>
</ul>
</li>
<li><a href="#">Oberlink3</a></li>
</ul>
</div>
</div>

You commented on Rafi Benkual's post over 3 years

:( Next time, I'll wait with the update until everything really works.

You commented on Rafi Benkual's post over 3 years

Thanks Vladimir. In my case it does not affect on mobile device, but on large screens. Is it the same bug?

You commented on Rafi Benkual's post over 3 years

Thanks Vladimir. In my case it does not affect on mobile device, but on large screens. Is it the same bug?

Posts Followed

Following

  • No Content

Followers

  • No Content