Following is my code. I am trying for a simple drop down when clicking on to li and slideup when clicking li back again. But it's not working. I don't know whats wrong. Can anyone comment on this? On top, I am trying to click on the body to get the menu slide back up again. But not when clicking inside the actual menu box (in green).
$(document).ready(function(){
let list = $('ul li');
let mega = $('.megamenu');
list.click(function(e){
e.preventDefault();
mega.slideDown(400);
if((e.target) == list){
mega.slideUp(400);
}
})
});
li{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.megamenu{
background:green;
padding:5rem;
color:white;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Page 1
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
<li>Page 2
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
Could you change like this for click to li to dropdown and click li slideup again
$(document).ready(function(){
let list = $('.menu');
let mega = $('.submenu');
list.click(function(e){
e.preventDefault();
var menuDisplay = mega.css('display');
if(menuDisplay == 'block') {
mega.slideUp(400);
} else {
mega.slideDown(400);
}
})
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class='menu'>Page 1
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
<li class='menu'>Page 2
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
CSS
.menu{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.submenu{
background:green;
padding:5rem;
color:white;
display:none;
}
And click Page1 or Page2 to see slideUp and slideDown
Related
There is a button table and list. Click on table items are displayed in a table. If you click on list - items are displayed in a list.
Сondition (list or table) is remembered using cookies
But when the cookie is empty, the default active button list, and the product is displayed in the table.
I need to display the products table and, by default, set the active button table.
And I do not understand where is the value active for the button list
To make the button value table active by default using js and only for first press.
erb:
<ul class="ctf--b-view-nav">
<li class="<%= 'active' if cookies['filter-product-views'] != 'buble' %>">
<a class="ctf--b-view-nav-list" href="">item</a>
</li>
<li class="<%= 'active' if cookies['filter-product-views'] == 'buble' %>">
<a class="ctf--b-view-nav-cols" href="">table</a>
</li>
</ul>
<!-- container with items -->
<div class="infinite-table">
<ul class="ctf--b-product-list <%= 'ctf--b-product-list-buble' unless cookies['filter-product-views'] == 'buble' %>">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
js:
$(document).ready(function(event){
$('.ctf--b-view-nav a').click(function() {
if (!($(this).parent().hasClass('active')))
{
$('.ctf--b-view-nav li').removeClass('active');
$(this).parent().addClass('active');
if ($(this).hasClass('ctf--b-view-nav-cols'))
{
$.cookie('filter-product-views', 'buble');
$('.ctf--b-product-list').addClass('ctf--b-product-list-buble');
}
else{
$('.ctf--b-product-list').removeClass('ctf--b-product-list-buble');
$.cookie('filter-product-views', 'non-buble');
}
return false;
}
else {
return false;
}
});
});
css: (for buttons use a sprite)
.ctf--b-view-nav { list-style:none; vertical-align:top; right:0; top:-50px; position:absolute; }
.ctf--b-view-nav li { float: left; padding:0 0 0 10px; }
.ctf--b-view-nav a { width:18px; height:18px; font-size:2em; line-height:0; display:block; }
.ctf--b-view-nav .active .ctf--b-view-nav-list { background-position:0 bottom; }
.ctf--b-view-nav .ctf--b-view-nav-cols { background-position:right 0; }
.ctf--b-view-nav .active .ctf--b-view-nav-cols { background-position:right bottom; }
HTML:
<div class="selectContainer">
<ul>
<li class="init">Select</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
</ul>
</div>
CSS:
.selectcontainer ul li
{
border:1px solid green;
width:100%;
cursor:pointer;
}
.selectcontainer ul li:not(.init){
display:none;
float:left;
}
li.init{cursor:pointer; background:url("../images/arrow-down.png") right no-repeat;}
li.init1 { cursor: pointer; background:url("../images/arrow-up.png") right no-repeat;}
JQuery:
jQuery(document).ready(function () {
$( "ul" ).click(function() {
$(this).closest("ul").children('li:not(.init)').slideToggle(200);
});
$( "li" ).click(function() {
$("li .init").addClass("li .init1");
});
});
Hi I just have to change my image when dropdown is open up arrow and when close down arrow.
This code is not working please help.
Solved:
You were not toggling "init1" class (first <li>) on click of <ul>, so your arrows were not changing on click.
$("ul").click(function () {
$(this).children('li:not(.init)').slideToggle(200);
$(this).find("li.init").toggleClass("init1");
});
Below is the JS fiddle working example, i have used special characters and :after pseudo class for up/down arrows , you can change as it suits you.
http://jsfiddle.net/4C5ND/
SO simple .U could use transform:rotate(180deg); CSS on click.
You could try:
if($(this).hasClass("class1")){
$(this).removeClass("class1").addClass("class2");
}else{
$(this).removeClass("class2").addClass("class1");
}
<html>
<ul>
<li>Blocks</li>
<li>Tools</li>
<li>Weapons</li>
<li>Armour</li>
<li>Mobs</li>
<li>Food</li>
</ul>
<img onclick="SomeJavaScriptCode" src="button.png">
</html>
Above is a simple naviagtion bar and an image with and incomplete onclick function.
<style>
ul
{
list-style-type:none;
margin:auto;
padding:0;
float: left;
height:10%;
width:10%;
margin-left: -999px;
}
</style>
Above you can see i moved the UL of the page so i does not effect the rest of my code.
How can i make it so that when the button is clicked on the "margin-left: -999px;" changes to "margin-left: 0px;" or any other value.
This should work:
<ul id="myul">
...
</ul>
<img onclick="changeMargin()" src="button.png">
<script>
function changeMargin ()
{
document.getElementById("myul").style.marginLeft="0px";
}
</script>
or the jQuery way
<ul id="myul">
...
</ul>
<img id="img" src="button.png">
<script>
$(function() {
$('#img').click(function(){
$('#myul').css('marginLeft','0px')
})
});
</script>
I am trying to create a menu system where when a list anchor is clicked, a div below the ul list is shown. but the system is not working and i can't control if the user is over the displayed div.
Here below is the code where
I created UL list to create tabs
I created DIVs as pages to be displayed
I created jquery mouseenter event to display the div with same class as of the link's ID
I used mouseleave function to hide the displayed div.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; display:inline; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear:both; position:absolute; }
.tab_pages div{display:none;width:200px; height:200px; background- color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseenter(function(e) {
var tid=this.id;
$(".tab_pages div").hide();
$(".tab_pages ."+tid).show();
});
$(".tabs_button a").mouseleave(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).hide();
});
});
</script>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
Here the main part i am having problem is to keep div showing if the user is hovering over the div.
Edit: Fiddle
I have created complete code bin for above issue on http://codebins.com/bin/4ldqpam
So, Try on it.
To Solve this follow below steps:
1) Include latest jQuery.js javascript file on html header tag first.
2) HTML (Little bit Changes)
<div class="tabs_button">
<ul>
<li id="page1">
<a href="#">
Cars
</a>
</li>
<li id="page2">
<a href="#">
Price & Offers
</a>
</li>
<li id="page3">
<a href="#">
Chevy Experience
</a>
</li>
<li id="page4">
<a href="#">
Service
</a>
</li>
<li id="page5">
<a href="#">
Contact Us
</a>
</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
3) CSS (Add Few More Styles):
body{
background-color:#000;
}
.tabs_button{
width:950px;
}
.tabs_button ul {
list-style:none;
margin:0px;
padding:0px;
}
.tabs_button ul li {
width:120px;
float:left;
display:inline;
margin-left:10px;
margin-right:10px;
text-align:center:
}
.tabs_button ul li:hover a{
color:#FFC222;
}
.tabs_button ul li:hover{
background-color:#445566;
}
.tabs_button ul li a{
color:#FFF;
text-decoration:none;
}
.tabs_button ul li a:hover{
color:#FFC222;
}
.tabs_button ul li.selected a{
color:#FFC222;
}
.tabs_button ul li.selected{
background-color:#445566;
}
.tab_pages{
clear:both;
position:absolute;
}
.tab_pages div{
display:none;
width:120px;
height:200px;
color:#fff;
background-color:#445566;
margin-top:27px;
position:absolute;
}
4) JQuery for Menu Navigation:
$(".tabs_button li,.tab_pages div").mouseenter(function() {
var className = $(this).attr('id');
$(".tabs_button #" + className).removeClass("selected");
if (typeof(className) == "undefined" || className == null) {
className = $(this).attr('class');
$(".tabs_button li").removeClass("selected");
$(".tabs_button #" + className).addClass("selected");
}
$(".tab_pages div").hide();
var offset = $(".tabs_button li#" + className).offset();
$(".tab_pages ." + className).css({
'left': offset.left - 8
});
$(".tab_pages ." + className).show();
});
Try using the mousover event instead, like:
$(".tabs_button a,.tab_pages").mouseover(function() {
});
Remove the (".tab_pages div").hide(); from your mouseenter() event. Also, in the .tab_pages style, change position:absolute to float:left. If you were to use absolute positioning, you would need to specify either a top or bottom position and a left or right position, for example - top:0px; left:0px. But since you are specifying a top-margin of 30px, use float - absolutely positioned divs cannot have margins added to them. Lastly, in your .tabs_button ul li style, the display:inline does not do anything - calling float:left changes the li to a block element - which is what you want. I have copied the code with the changes below - should work for you.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear: both; float: left; }
.tab_pages div{display:none;width:200px; height:200px; background-color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseover(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().show();
});
$(".tabs_button a").mouseout(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().hide();
});
});
</script>
<body>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
I am trying to link to a div that is in a separate tab. Currently the side navigation link is like this:
var loc = window.location.hash;
if (loc == "#bargain") {
jQuery('.tab-2').click();
App.SetBaseLine();
jQuery('#bargain').addClass('activeListColor');
};
<li>Bargain Packages</li>
<!-- start of tabHolder -->
<div id="tabHolder">
<ul class="tabs_new buttons">
<li class="liOuter" id="tab1">Buyers' Guide</li>
<li class="liInner" id="tab2">Pricing Guide</li>
</ul>
Unfortunately, this does not take me under the second tab. I am trying to have a user click the link, and it opens the tab and anchors down to the div location.
I am open to suggestions.
You can do this way:
<ul class="tab">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="tabs">
<div id="tab1">Content 1</div>
<div id="tab2">Something here</div>
<div id="tab3">Omg! Three</div>
</div>
And the script as:
$(document).ready(function(){
$(".tab > li > a").click(function(){
var tab = $(this).attr('href');
$(".tab > li > a").removeAttr("style");
$(this).css("background-color", "#ccc");
$('.tabs > div:visible').hide(function(){
$(tab).show();
});
return false;
});
$('.tabs > div').hide();
$('.tabs > div:first-child').show();
});
CSS:
body {overflow: hidden;}
ul li {display: inline-block; *display: inline; *zoom: 1;}
a {text-decoration: none; color: #f60; border-radius: 5px; padding: 5px; display: inline-block; *display: inline; *zoom: 1;}
div {padding: 5px;}
Fiddle! Hope this is a best way to use tabs. :)
You can use the following jQuery to achieve a 'tab' like effect
$('a').click(function() {
$('div').hide();
var destination = '#' + $(this).attr('data-tab');
$(destination).toggle();
});
See this live example
Here is an updated example with the divs wrapped in an unordered list
Alternatively, you can use a 'current' class and toggle that on click using the following code:
$('a').click(function() {
$('.tabs div').removeClass('current');
var destination = '#' + $(this).attr('data-tab');
$(destination).toggleClass('current');
});
Another live example here