I have a dropdown menu on my site - http://lady-cosmetics.ru/
The problem is that if I click on any link from dropped menu nothing happens. It behaves just like if I click not on the link, but on empty space, the menu only disappears.
Try to roll over the last item of the menu and you'll see what I mean.
The problem exists only on IOS 7.x in any browser.
Here is html of the menu:
<ul>
....
<li class="has-sub">
Все бренды
<ul class="subMenu">
<li>
<a target="_self" href="/collection/emerald-bay">Emerald Bay</a>
</li>
<li>
<a target="_self" href="/collection/gehwol">Gehwol</a>
</li>
</ul>
</li>
.....
</ul>
As you can see it is just a simple list that converts to dropdown menu by jquery plugin.
Why links from dropped part of the menu don't work in IOS?
It works fine on my iphone/ipad you can still try doing this thing
<ul>
....
<li class="has-sub">
Все бренды
<ul class="subMenu">
<li>
Emerald Bay
</li>
<li>
Gehwol
</li>
</ul>
</li>
.....
</ul>
Related
I have a a navigation with a sub navigation which is hidden by default, and I want to show the sub nav for each item on click, but currently on click it shows the subnav for all items at once since the click is toggling a class. How can I only toggle the subnav of the clicked item?
HTML
<nav class="st-menu" id="menu-4a">
<ul>
<li>
Guidance Manual
</li>
<li>
Resource Directory<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>Stormwater Plan Review Resources</li>
<li>Pilot Projects</li>
<li>Proprietary Products</li>
<li>Additional Resources</li>
</ul>
</li>
<li>
Stormwater 101<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>Regulations</li>
<li>Stormwater Management</li>
<li>Stormwater Billing & Retrofits</li>
<li>Green City, Clean Waters</li>
</ul>
</li>
<li>
Contact Us<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>About Us</li>
<li>Development Review Contacts</li>
</ul>
</li>
</ul>
</nav>
jQuery
$(".toggle-arrow").click(function(){
$(".reg-subnav").toggleClass('open-sub');
});
$(".toggle-arrow").click(function(){
$(this).closest('li').find(".reg-subnav").toggleClass('open-sub');
});
Both the arrow and the element you want to toggle, belong to an <li>. You can find the closest parent li that owns both of them, then find the element you want to toggle.
I have a menu like this:
<div class="menu-hori" id="myMenu">
<ul>
<li>☰</li>
<li><a>1</a>
<ul>
<li><a>Sub 1</a>
<ul>
<li><a>SubSub 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
When I click the hamburger icon in the top ListItem, the menu opens. So the functionality is fine. Though it does not look nice, how can I use css to give it a smooth fold out? A nice flow down?
Using Foundation 5, I am trying to have a dropdown within a dropdown...
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Modify</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
</ul>
But without any success!
The Share menu, is always displaying under the Modify menu.
EDIT 1
I tried something else, it's better but not good enough:
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Modify</li>
<li ><a data-dropdown="drop2" href="#" >Share</a>
<ul id="drop2" class="f-dropdown content " data-dropdown-content >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
</ul>
And added to my .css:
.f-dropdown.content {display: block;}
Here is my full css: http://pastebin.com/QPaFbenF with the previous line at line 67
But when clicking on Share, the More menu disapear and I have to put my mouse over the More link to get the the More menu and his sub-menu Share displayed.
I have found this question on the zurb forum : dropdown within dropdown and tried the answers, without any success :S
.f-dropdown.content will do nothing since you dont have a class named content under f-dropdown class
these should be in your css:
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;}
Working Example
Nested dropdown menus tend to get complicated when you start from scratch. I would always recommend to start with superfish. You can a see a working demo here: http://users.tpg.com.au/j_birch/plugins/superfish/examples/
I had the same issue, and I realised I simply didn't include the jQuery trigger to get all the dropdown etc elements via the dropdown.js file working.
<script>
$(document).foundation();
</script>
I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.
The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.
On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li>Home</li>
<li>Contact Us</li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li>Web Design</li>
<li>Photo</li>
<li>Video</li>
<li>Hosting</li>
<li>Emails</li>
<li>Domain Names</li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li>Control Panel</li>
<li>Webmail Login</li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
Can anyone help please!?
In ZURB Foundation 3, this line:
<li class="toggle-topbar"></li>
should be changed to:
<li class="toggle-topbar"></li>
This is just a placeholder for jQuery
Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php
The following menu works really fine in the browser, but I cant get it to validate as XHTML. I took this example out of my CSS Book. It says it is right, but seemingly it is not.
<ul id="leftNavi">
<li>
left menu1
</li>
<li class="SCNL">left menu2</li>
<ul id="subnavi">
<li>
menu2/1
</li>
<li>
menu2/2
</li>
<li>
menu2/3
<li>
</ul>
<li>
left menu3
</li>
</ul>
Here a link to the page: http://www.yiip.de/arbeit/testlayout/standard_template.html I am talking about the left menu.
<ul id="leftNavi">
<li >left menu1</li>
<li class="SCNL">left menu2
<ul id="subnavi">
<li>menu2/1</li>
<li>menu2/2</li>
<li>menu2/3</li>
</ul>
</li>
<li>left menu3</li>
</ul>
You had a couple of problems:
The line with 3 as the list item didn't have a correct closing <li> element; and
The subnav1 list wasn't contained within a <li> element. It can't be a direct child of another list, which was the main problem with validating your HTML.