I am programming this on rails but the problem is in html+css+javascript.
<ul>
<li>Menu1
<ul style="overflow: hidden auto; height: 400px; display: none;">
<li class="sub-menu">
<a href="#">
<div>submenu1</div>
</a>
<ul style="left: 258px; height: 400px; display: none;">
<li>
<a href="#">
<div>Subsubmenu1</div>
</a>
</li>
<li class="line"></li>
<li>
<a href="#">
<div>Subsubmenu2</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have this long list of submenus so i want it scrollable.
As soon as i add overflow to the sub menu list the Sub Sub menus stop being displayed. I tried checking for javascript errors without success.
Related
how can one add a dropdown caret to the account link in the html code below
.
.
.
<nav>
<ul id="menu">
<li class="home"><a href= "home.html" class="menu" ><h3>Home</h3></a></li>
<li class="news"><h3>News</h3></li>
<li class="account"><h3>Account</h3></li>
</ul>
</nav>
There are many ways to do this. Here is a way using only CSS and the ::after psuedo element.
.dropdown-toggle {
display: flex;
align-items: center;
}
.dropdown-toggle::after {
content: "⬇️";
margin-left: 10px;
}
<nav>
<ul id="menu">
<li class="home"><a href="home.html" class="menu">
<h3>Home</h3>
</a></li>
<li class="news"><a href="news.html" class="menu" target="_blank">
<h3>News</h3>
</a></li>
<li class="account"><a href="#" class="menu dropdown-toggle" target="_blank" data-toggle="dropdown">
<h3>Account</h3>
</a></li>
</ul>
</nav>
I have a menu which has categories with subcategories. I want to show/hide the list elements but the catch is I need the first 2 elements to show all the time. I have tried to look for the solution everywhere and the closest I came was jQuery toggle show/hide elements after a certain number of matching elements
but this doesn't seem to be working for me as my filters are little more complicated. Can someone please help me with this. Clicking on 'Sub-Categories' shows/hides links.
Also i must add the default state must be collapsed.
My basic fiddle without any style
HTML code:
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
jQuery code:
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
});
jQuery('.subCat').click(function () {
jQuery(this).prev('ul:first.level1').slideToggle();
});
To achieve expected result, use below option
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
Subcategories parent
Find li greater than 1 (li's index starts from 0 )
Hide by default, using jQuery(this).find('li:gt(1)').hide()
code sample for reference - https://codepen.io/nagasai/pen/omYKzv?editors=1010
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
jQuery(this).find('li:gt(1)').hide()
});
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level 1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
Change your javascript that do the slideToggle as this;
jQuery('.subCat').click(function () {
var ul = jQuery(this).prev('ul:first.level1');
var li = ul.find('li:gt(1)');
li.slideToggle();
});
In Foundation 6 by default, dropdown menus appear on the same level as the parent like so:
Is there a way to make it so that the menu appears on the same level as the first menu? This is the desired outcome:
I have looked through the documentation and cannot seem to find a way to do it. Thanks in advance!
This is a snippet of the default code from Foundation site
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li>Item 1A Loooong
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
</ul>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
</ul>
</li>
</ul>
</li>
<li>Item 1B
</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A
</li>
<li>Item 2B
</li>
</ul>
</li>
<li>Item 3
</li>
<li><a href='#'>Item 4</a>
</li>
</ul>
Here is a fiddle of the default: http://jsfiddle.net/65017wc2/
Here is a possible fix to do this :
.dropdown.menu {
top: 0!important;
}
.dropdown.menu {
position: relative;
}
.dropdown.menu li {
position: static !important;
}
.dropdown.menu ul {
margin-top: -1px;
}
I overwrite the relative position of li elements to the native static position and made the main ul relative, so all the dropdown menus are relative to the main ul menu.
See this fiddle
I need to find all the anchor tags till parent of a specific element. Example is here-
<li id="li4">
<a id="ancHideShow4" onclick="hide('4');" href="#" style="font-weight:bold;">SECURITY</a>
<ul id="ul4" style="display: block; margin-left: -20px; list-style: none;">
<img onclick="hide('5');" id="img5" src="../../images/asd.gif" class="Hover">
<li id="li5">
<a id="ancHideShow5" onclick="hideshow('5');" href="#" style="">GROUP</a>
<ul id="ul5" style="">
<div class="QWER"></div>
<li id="leafli6">
<a id="ancRedirect312" onclick="Redirect('#')" href="#"><span>XYZ</span></a>
</li>
</ul>
</li>
</ul>
</li>
So, If I click --> "ancRedirect312"
These IDs should be found --> ancRedirect5, ancRedirect4
help me out !!
You can find all the parent li elements then its a child like
$('a').click(function() {
var ids = $(this).closest('li').parents('li').children('a').map(function() {
return this.id
}).get();
alert(ids)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li id="li4">
<a id="ancHideShow4" onclick="hide('4');" href="#" style="font-weight:bold;">SECURITY</a>
<ul id="ul4" style="display: block; margin-left: -20px; list-style: none;">
<img onclick="hide('5');" id="img5" src="../../images/asd.gif" class="Hover" />
<li id="li5">
<a id="ancHideShow5" onclick="hideshow('5');" href="#" style="">GROUP</a>
<ul id="ul5" style="">
<div class="QWER"></div>
<li id="leafli6">
<a id="ancRedirect312" onclick="Redirect('#')" href="#"><span>XYZ</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Consider the following navigation layout
primary nav
secondary nav
sub nav (shown only on rollover
of primary or secondary nav
I'm needing for there to be a delay in the fadeOut call long enough for a user to get their mouse from the primary nav to the subnav and once over the subnav I need the hover fadeOut cancelled. Repeating the idea when hovering over the secondary nav item. (I know how to add the delay but not how to cancel the hover)
TIA
http://jsfiddle.net/Wm6Gp/
<div class="primary">
<ul class="primary common">
<li class="primary category" rel="politics">
POLITICS
</li>
</ul>
</div>
<div class="secondary">
<ul class="secondary common">
<li class="secondary category" rel="news">
NEWS
</li>
</ul>
</div>
<div style="display: block; height: 20px; width: 100px; overflow: hidden;">
<div id="politics" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
POLITICS SUBNAV
</li>
</ul>
</div>
<div id="news" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
NEWS SUBNAV
</li>
</ul>
</div>
</div>
$('.category').hover(
function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeIn('slow');
}, function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeOut('slow');
});
Try jQuery Hover Intent plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html