html overflow:hidden within dropdown-menu - javascript

I'm trying to solve an overflow problem in my slyding dropdown menu.
For slyding I'm using the als-js framework. The problem is, if I set the overflow:hidden attribute my dropdown menu is not visibly anymore.
If I just set the overflow-x:hidden I'm getting a scrollbar.
<div class="als-container" id="cssmenu"> <span class="als-prev"><img src="back.png" alt="back" title="previous" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<li class='als-item active'><a href='index.html'>Home</a>
<ul>
<li class='final'><a href='#'>Test 1</a>
</li>
<li class='final'><a href='#'>Test 2</a>
</li>
</ul>
<li class=' als-item has-sub '><a href='#'>Products</a>
<ul>
<li class='final'><a href='#'>Product 1</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li class="als-item"><a href='#'>About</a>
</li>
<li class='als-item active'><a href='index.html'>Admin</a>
</li>
<li class='als-item active'><a href='index.html'>Route</a>
</li>
</ul>
</div>
jQUery:
$(document).ready(function () {
$("#cssmenu").als({
visible_items: 4,
scrolling_items: 2,
orientation: "horizontal",
circular: "yes",
autoscroll: "no"
});
});
Here is the link to my fiddle.
http://jsfiddle.net/9zapu02q/11/
Perhaps somebody could help me to find a solution.


SOLUTION
Your div.als-viewport must have a greater height... but you asl script is setting the div height, so you need to use " IMPORTANT " to override the value.
.als-viewport {
height: 300px !IMPORTANT;
...
}

Related

Toggle list elements in Jquery while showing the first few elements all the time

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();
});

How to slide down just one level of element 's children, not sub-level

When I use this code:
jQuery:
$(this).next().slideDown()
of a selector :$(this).next()
HTML:
<li class="sub-menu two-level-collapse">
<a href="javascript:void(0);" class="two-level-collapse parent"><i
class="fa fa-line-chart"></i><span>Quản lý dữ liệu trạm</span><i
class="arrow fa fa-angle-right pull-right"></i></a>
<ul class="two-level-collapse">
<li class="sub-menu two-level-collapse">
<a class="two-level-collapse" id="sub-sub-a" href="javascript:void(0);">
<i></i><span>cem</span><i class="arrow fa fa-angle-right pull-right"></i></a>
<ul class="two-level-collapse">
<li class="two-level-collapse"><a
href='{{pathFor route='manager.csv' query='type=humid_cem'}}'>humid_cem</a></li>
<li class="two-level-collapse"><a
href='{{pathFor route='manager.csv' query='type=temp_cem'}}'>temp_cem</a></li>
<li class="two-level-collapse"><a href='{{pathFor route='manager.csv'
query='type=rainfall_cem'}}'>rainfall_cem</a>
</li>
</ul>
</li>
<li class="sub-menu two-level-collapse">
<a class="two-level-collapse" id="sub-sub-a" href="javascript:void(0);">
<i></i><span>kttvtw</span><i class="arrow fa fa-angle-right pull-right"></i></a>
<ul class="two-level-collapse">
<li class="two-level-collapse"><a href='{{pathFor route='manager.csv'
query='type=humid_kttvtw'}}'>humid_kttvtw</a>
</li>
<li class="two-level-collapse"><a
href='{{pathFor route='manager.csv' query='type=temp_kttvtw'}}'>temp_kttvtw</a>
</li>
<li class="two-level-collapse"><a
href='{{pathFor route='manager.csv' query='type=rainfall_kttvtw'}}'>rainfall_kttvtw</a>
</li>
</ul>
</li>
<li class="sub-menu two-level-collapse">
<a class="two-level-collapse" id="sub-sub-a" href="javascript:void(0);">
<i></i><span>global</span><i class="arrow fa fa-angle-right pull-right"></i></a>
</li>
</ul>
</li>
It expands all sub-level of $(this).next()
Like that: demo
How can I slide down just one level of element 's children, not sub-levels?
Thank you in advanced!

ahh.. now I get it.
is it that what you want?
https://www.w3schools.com/code/tryit.asp?filename=FMWU6SGV4H8C
basically i added that menu are initially hidden:
<style>
ul.two-level-collapse {
display:none
}
</style>

How can I slide down just one level of element 's children, not
sub-levels?
You mean only direct descendants should slide-down, then make it
$(this).next().find( "> ul.children" ).slideDown();
Demo
$( "a" ).click( function(e){
$(this).next().find( "> ul.children" ).slideToggle(); //using slideToggle since slideDown is not available with jquery.
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Clinical/Laboratory
<li class="page_item page-item-29 current_page_item parent">Clinical/Laboratory
<ul class="children" style="display: none;">
<li class="page_item page-item-40 parent">Histopathology
<ul class="children" style="display: none;">
<li class="page_item page-item-99">Test page</li>
</ul>
</li>
<li class="page_item page-item-42">Bacteriology</li>
<li class="page_item page-item-46">Packaging Guidelines</li>
<li class="page_item page-item-44">Water Quality Analysis</li>
</ul>
</li>

From Your question i understand that you want to get direct children on li element, if so you might use following line
$(this).next().firstElementChild
this will give you direct child on which you can use slideDown() method.

JQuery display menu items one at a time

I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.
What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is
under the menu item clicked. Is there any way to do that without having to specify id?
Below is my menu:
$('.menu-item').on('click', function() {
$('.dropdown-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

you need to use children() function to toggle the children of particular DOM
so use $(this).children("ul").toggle(); to accomplish what you are looking for
$('.menu-item').on('click', function() {
$(this).children("ul").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'>
<span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.
$('.menu-item').on('click', function() {
$(this).find(".dropdown-content").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>

jQuery slideToggle doubling up..?

I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});

First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you

<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/

Zurb Foundation dropdown position to very first parent

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

Categories

Resources