Trying to create a menu toggle

Trying to create a menu toggle - javascript

I am trying to create a menu toggle like on mobile for the desktop also with hide and show functionality but I am not able to do so.
$(document).ready(function() {
$("#menuMobileToggle").click(function() {
$(".CategoryList").slideToggle(700);
});
});
<div id="top-nav">
<div class="CategoryList" id="TopCategoryList">
<div class="SideCategoryListClassic">
<nav>
<ul class="category-list" style="padding-top: 3px;">
<li class="">MOTO-D Tire Warmers</li>
<li class="">MOTO-D Stands</li>
<li class="">Bonamici Rearsets</li>
<li class="">MOTO-D "Next" GPS Lap Timer</li>
<li class="">MOTO-D Undersuit</li>
<li class="">Spark Italy Exhausts</li>
<li class="">Accessories</li>
</ul>
</nav>
</div>
</div>
<div class="clear"></div>
<a href="#" id="menuMobileToggle">

Seems like your code is incomplete and you must include jquery library. check below snippet.
$(document).ready(function() {
$("#menuMobileToggle").click(function() {
$(".CategoryList").slideToggle(700);
});
});
.CategoryList {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-nav">
Menu
<div class="clear"></div>
<div class="CategoryList" id="TopCategoryList">
<div class="SideCategoryListClassic">
<nav>
<ul class="category-list" style="padding-top: 3px;">
<li class="">MOTO-D Tire Warmers</li>
<li class="">MOTO-D Stands</li>
<li class="">Bonamici Rearsets</li>
<li class="">MOTO-D "Next" GPS Lap Timer</li>
<li class="">MOTO-D Undersuit</li>
<li class="">Spark Italy Exhausts</li>
<li class="">Accessories</li>
</ul>
</nav>
</div>
</div>
</div>

Related

Dropdown menu with hover/mouseover event in jQuery

I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.

Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.

Bootstrap droppable Navigation menu

I create this navigation menu with Bootstrap ..
How to make it display the dropdown menu on click for small devices but display on hover large ones?
Also whats the way to keep the menu (with burger) of small devices, on tablets as well?
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub
</li>
<li>Sub2
</li>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<ul class="col-sm-4">
<li>Cat</li>
<ul class="thirdmenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub
<ul class="thirdmenu">
<li>SubSub</li>
<li>SubSub</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub</li>
<li>Sub</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Css and Js are applied by Bootstrap... Not changes yet

To make work on hover on larger screens you can use this plugin.
If you want a hamburger menu, you should place it in Bootstrap .navbar as in official documentation

How to make slide effect for Sidebar

guys I need your assistance in my current project.
I want to give for my img button a "side effect" , which should be interactive.
For instance, it must listen an event on click and should be opened and closed by clicking on img. I was to hardly trying to make this thing happened. Unfortunately, something wrong in my coding. And it should hide all div id="left"elements, since I'm doing responsive design for this project.
Please guys I need your help. I might assume my approach is totally wrong maybe you have some another recommendations.
Here is my HTML code:
<div id="main">
<!-- This img "button" should do slide effect to the right side -->
<img class="door_open" src="/templates/shablon/images/door_open.png">
<div id="left">
<div class="moduletable">
<div class=" modtit">По материалу</div>
<ul class="nav menu">
<li class="item-118">Металлические двери</li>
<li class="item-119">Клееный брус</li>
<li class="item-121">Пластиковые двери</li>
<li class="item-122">Шпонированные двери</li>
<li class="item-157">Массив древесины</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">Фурнитура</div>
<ul class="nav menu">
<li class="item-163">Каталог дверных ручек</li>
<li class="item-164">Замки и защелки</li>
<li class="item-165">Наличники и короба</li>
<li class="item-166">Арки</li>
<li class="item-167">Лестницы</li>
</ul>
</div>
<div class="moduletable diz">
<div class=" modtit">По дизайну</div>
<ul class="nav menu">
<li class="item-136">Барокко</li>
<li class="item-137">Классика</li>
<li class="item-158">Ампир</li>
<li class="item-159">Минимализм</li>
<li class="item-160">Поп-арт</li>
<li class="item-161">Эклектика</li>
<li class="item-162">Модерн</li>
</ul>
</div>
<div class="moduletable">
<div class=" modtit">По производителю</div>
<ul class="nav menu">
<li class="item-156">Бульдорс</li>
</ul>
</div>
</div>
and here is my jQuery:
$('#left').on('click', function(){
$('.moduletable').toggle('slide', { direction: 'left' }, 1000);
$('#main-content').animate({
'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
}, 1000);
});
Here is how it's supposed to look like
enter image description here

How to remove li tag by data attribute using jquery

I want to remove li tag by data attribute.
I want to remove 1st ul of child li which has class name like second Base when click.
My code looks like as below
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base">
<span data-addedname="SignatureBread" class="close-btn">Signature Bread</span>
<span data-addedname="Lettuce" class="close-btn">Lettuce</span>
</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces">
<span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span>
<span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>
I want to like this output. Here remove li of first ul.
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses">
<span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients">
<span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span>
<span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>

https://jsfiddle.net/926vogLk/
$('li.second.Base').click(function() {
$(this).remove();
});
or
if you want to remove first li of ul
$('li.second.Base').click(function() {
$(this).prev().remove();
});

If you want to remove only first ul then try #Akhsay mentioned solution. Or if you want to remove any ul with specific class or data attribute then do this.
$("ul[data-id=Base]").find("li.base").remove()
Or
$("li.Base").remove()

I am not sure if I hunderstood right but:
$("li.second.Base").parent().remove()
might help you

$('.second').on('click',function(){
$(this).fadeOut(300,function(){$(this).remove() });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base"><span data-addedname="SignatureBread" class="close-btn">Signature Bread</span><span data-addedname="Lettuce" class="close-btn">Lettuce</span></li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling"><span data-addedname="Steak" class="close-btn">Steak</span><span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span></li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span><span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span></li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span><span data-addedname="Pickles" class="close-btn">Pickles</span></li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients"><span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span></li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span></li>
</ul>
</div>

$(function() {
$('body').on('click', function() {
$('.box-ul').find('ul').find('li.Base:first').remove();
});
});

Zurb Foundation 6: the topbar doesn´t collapse

I'm having problemas with Foundation 6, I'm a somplete beginner and I'm trying to apply it to a webpage I'm developing for a project at university. I've directly made a copypaste of the topbar code from the Zurb web page and applied to my project and it doesn't work at all.
Here's the code I´ve applied:
<div class="title-bar" data-responsive-toggle="example-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="example-menu">
<div class="top-bar-left">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>Asesoreo</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Log in</li>
<li>Sign Up</li>
</ul>
</div>
</div>
The problem is that the menu never collapses and the topbar, which is expected to be hiden while the menu is shown unless the device screen it's small, it's always on sight.
Thanks in advance!
The Pc screen
The mobile screen

here works fine
http://codepen.io/fabiovaz/pen/zrwvjq
please check your js/css path and if you starting foundation
$(document).foundation();

This should fix it:
<div class="title-bar" data-responsive-toggle="example-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="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Trying to create a menu toggle - javascript

Related

Dropdown menu with hover/mouseover event in jQuery

Bootstrap droppable Navigation menu

How to make slide effect for Sidebar

How to remove li tag by data attribute using jquery

Zurb Foundation 6: the topbar doesn´t collapse

Categories

Resources