I want to use jQuery hover()+toggle() for my "mega menu"
there are my basic structure
I feel the toggle to hidden too fast?
because I can't click the google like in the demo "A content"
**
$(function() {
$(".sub_menu").hide();
$("#menuA").hover(function() {
$("#menuA_submenu").toggle();
});
});
.menu{
display:flex;
list-style:none;
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
}
.content{
display:none;
background:#fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
**
What is your ultimate goal? How do you hope to present the picture?
Hover $("#menuA") than $("#menuA_submenu") will be displayed.
The cursor has left $("#menuA") before entering $("#menuA_submenu"), so it is no longer hovered.
Suggest a few solutions:
Submenu must be seamless with the menu item.
$(function() {
$(".sub_menu").hide();
$("#menuA, #menuA_submenu").hover(function() {
$("#menuA_submenu").toggle();
});
});
.menu{
display:flex;
list-style:none;
margin-bottom: 0; /*new*/
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
margin-bottom: 0; /*new*/
}
.content{
display:none;
background:#fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google
</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
Change hover to click trigger.
$(function() {
$(".sub_menu").hide();
$("#menuA").click(function() {
$("#menuA_submenu").toggle();
});
});
When hover, display the corresponding submenu until hover to other buttons. (Each hover behavior can be merged into one.)
$(function() {
$(".sub_menu").hide();
$("#menuA").mouseenter(function() {
$(".content").hide();
$("#menuA_submenu").show();
});
$("#menuB").mouseenter(function() {
$(".content").hide();
$("#menuB_submenu").show();
});
});
Maybe try add param to toggle function
$("#menuA_submenu").toggle(1000);
You can simply use this :
$(function() {
$(".sub_menu").hide();
$("#menuA , .content").hover(function() {
$("#menuA_submenu").toggle();
});
});
.menu{
display:flex;
list-style:none;
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
}
.content{
display:none;
background:#fcc;
margin-top:-32px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
use slideToggle('slow') like this,
$(function() {
$(".sub_menu").hide();
$("#menuA").hover(function() {
$("#menuA_submenu").slideToggle('slow');
});
});
.menu{
display:flex;
list-style:none;
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
}
.content{
display:none;
background:#fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
$(document).ready(function() {
var thetimeout;
$('#menuA,.content').mouseover(function() {
clearTimeout(thetimeout);
$('#menuA_submenu').slideDown();
});
$('#menuA,.content').mouseleave(function() {
thetimeout = setTimeout(function() {
$('#menuA_submenu').slideUp();
}, 1000);
});
});
.menu {
display: flex;
list-style: none;
}
.menu li {
flex: 1;
background: #f35;
padding: 1rem;
margin: 1rem;
}
.content {
display: none;
background: #fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google
</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
Related
i'm trying to change the active class to the selected item but i could not did it right i've searched on google and here on stack overflow as well and i found the toggle() method so i give it a go on my code but i think i didn't use it right
here is my code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item active" onclick="active()">home</li>
<li class="main-nav-item active" onclick="active()">contact</li>
<li class="main-nav-item active" onclick="active()">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
.main-nav{
display: flex;
align-items: center;
}
.main-nav-items{
display: flex;
width: 1200px;
list-style-type: none;
justify-content: flex-end;
align-items: center;
font-size: 18px;
padding: 10px;
}
.main-nav-item{
font-size: 18px;
padding: 10px;
border-radius: 10px;
}
.main-nav li.active{
background-color: #542188;
padding: 10px;
border-radius: 10px;
color: white;
}
.main-nav-item:hover{
background-color: #ddd;
color: white;
}
JS:
function active(){
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList=items[i].classList.replace("active","")
}
document.querySelector(".main-nav-item").classList.toggle("active");
}
thank you in advance
first add Jquery to your html doc like this
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item" onclick="active(1)" id="1">home</li>
<li class="main-nav-item" onclick="active(2)" id="2">contact</li>
<li class="main-nav-item" onclick="active(3)" id="3">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- here is jquery plugin -->
<script>
function active(id){
$("#"+id).on("click",function(){
$(this).toggleClass("active");
});
}
</script>
</body>
</html>
<li class="main-nav-item active" onclick="active(this)">home</li>
<li class="main-nav-item active" onclick="active(this)">contact</li>
<li class="main-nav-item active" onclick="active(this)">about</li>
you need to pass the element that was clicked, to get a reference on which element would remain to be active.
function active(target){
/* this block is to remove all the active class on all main-nav-item
* [if this scenario is the one you really needed to do
* else remove this part]
*/
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
/* use the parameter "target" on which you passed using the html code
* "onclick(this)" and toggle the class "active"
*/
target.classList.toggle("active");
}
PS.
if all your main-nav-item has the same flow,
you could use, "querySelectorAll" to get all the main-nav-item and from there, add an event listener for click, and you remove all the "onclick" on your HTML
<ul class="main-nav-items">
<li class="main-nav-item active">home</li>
<li class="main-nav-item active">contact</li>
<li class="main-nav-item active">about</li>
</ul>
var mainNavItems = document.querySelectorAll(".main-nav-item");
Array.forEach(mainNavItems, function( navItem ) {
navItem.addEventListener("click", function(){
/* again, you could remove this block of codes, if you
* just intend to toggle the active class */
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
this.classList.toggle("active");
});
});
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
What i want is that if element has class icon-change, that class can get effect something like my css effects.
In other words, What i want to know is how can i change that element's background color when mouse is on that element, or when mouse over that element.
For more example,
when mouse is in the class icon-change, i want icon-change's background color be 'red'.
when mouse is over the class icon-change, i want icon-change's color be 'blue'.
when i mouse click on the class icon-change, i want icon-change's color be 'pink', and it's last until i re-click the class icon-change. In this re-clicked moment, re-clicked class icon-change is returned to fist status like there's nothing happened yet.
How can i do this through jQuery?
You can use .on() see reference here to attach an event handler function
then use mouseenter - use when mouse enter the object
mouseeleave - use when mouse leave the object
click- use when click on the object
$('.icon-change').on('mouseenter',function(){
$('.icon-change').css("background-color","red");
});
$('.icon-change').on('mouseleave',function(){
$('.icon-change').css("background-color","blue");
})
$('.icon-change').on('click',function(){
$('.icon-change').css("background-color","pink");
});
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
keep using css, just add a class like 'selected' with background-color: pink and toggle it on click
$('.icon-change').click((e) => { e.target.toggleClass('selected'); }
you can handle mouse effect via jquery.
$(selector).on('mouseover mouseleave', function(e){
console.log(e.type)
})
check the console.
you use this methods to achieve
$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});
similarly you can use other methods.
Try this :
var flag = true;
$(".icon-change").mouseover(function(){
if(flag) {
$(".icon-color").css("color", "blue");
}
});
$(".icon-change").mouseleave(function(){
if(flag) {
$(".icon-color").css("color", "#282828");
}
});
$(".icon-change").click(function(){
if(flag) {
$(".icon-color").css("color", "pink");
flag = false;
} else {
$(".icon-color").css("color", "#282828");
flag = true;
}
});
On responsive menu bar I have close and open menu when page is less than 1120px. When I click on the close width of the primary-nav turn to 0 px.
and not coming to its previous size on page resizing.
The html and css code are as given below.
.primary-nav li a{
color:black;
font-size:15px;
font-family:sans-serif;
}
.primary-nav .clickhere a{
font-weight:bold;
color:red;
}
header a img{
padding:10px;
}
.opennav{
display:none;
}
.primary-nav{
width:80%;
}
#media only screen and (max-width: 1100px) {
.primary-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 5px;
right: -0%;
background-color: #111;
overflow-x: hidden;
transition: .5s;
}
.primary-nav li .closenav{
color:white;
width:250px;
text-align:right;
padding-right:40px;
margin-top:10px;
cursor: default;
}
.primary-nav li a{
width:220px;
color:wheat;
}
.opennav{
display:block;
position:fixed;
left:91.3%;
top:-1%;
}
}
<!doctype html>
<html>
<head>
<title>bloodropes</title>
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
<meta name="title" content="Bloodropes | Homepage" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/stylesheet/home.css" rel="stylesheet" type="text/css">
<script>
function openNav() {
document.getElementById("primary-nav").style.width = "250px";
}
function closeNav() {
document.getElementById("primary-nav").style.width = "0px";
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<header>
<a href="/">
<img src="https://www.google.co.in/logos/doodles/2017/indias-independence-day-2017-6586914957164544-s.png" alt="bloodropes">
</a>
</header>
</div>
<div class="col-md-10">
<h1 onclick="openNav()" class="opennav">☰</h1>
<nav class="navbar">
<ul class="nav navbar-nav primary-nav " id="primary-nav" >
<li>
<h1 onclick="closeNav()" class="closenav">☰</h1>
</li>
<li>
Giving blood
</li>
<li>
about blood
</li>
<li>
Amazing stories
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="clickhere">
click here to give Blood
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
I want to change to width of primary as it was before the click on close.
You could look at using jQuery, and using the resize function to check if the browser is below 1120px, something similar to...
$(document).ready(function(){
$(window).on("load resize",function(e){
docWidth = $( document ).width();
if(docWidth >= 1120) {
$( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
}
else {
$( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
}
});
});
I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');
I have a <div> element, containing a <ul> with four <li> elements. What I need to do is set the <li> to display in horizontal orientation, and within the <div>. When I apply the JTouch class=toolbar to my <div>, what I see happening however is the the <li> elements do not even appear within the perimeter of the <ul> and both the <ul> and <li> seem to move outside of the parent <div>. How can I fix this situation please?
Image of problem (Bottom right are the list elements instead of appearing within the div and ul)
<html>
<head>
<style type="text/css" media="screen">
#import "../../jqtouch/jqtouch.css";
</style>
<style type="text/css" media="screen">
#import "../../themes/apple/theme.css";
</style>
<script src="../../jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<!--
Tweet consumption in progress:
-->
<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
<!--
Initialization:
-->
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'icon.png',
startupScreen: 'img/startup.png'
});
</script>
<style type="text/css">
.toolbar2
{
background: green;
height: 30;
}
#toolbarbottom ul li
{
display:inline;
float: left;
padding: 3px 5px;
}
#toolbarbottom ul
{
background-color: Green;
background-color: Purple;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var ulhtml = "<ul>";
$.getJSON("http://twitter.com/status/user_timeline/AJEnglish.json?count=20&include_entities=true&callback=?", function (data) {
$.each(data, function (i, item) {
ulhtml += "<li class='arrow'>" + item.text + "</li>";
});
ulhtml += "</ul>";
$("#tweets").html(ulhtml);
});
});
</script>
</head>
<body>
<div id="jqt">
<div id="home">
<div id="toolbartop" class="toolbar">
<h2>
Tweet </h2>
+
</div>
<h2>
Most Recent Tweet</h2>
<div id="tweets">
</div>
<div id="toolbarbottom" class="toolbar" style="position: fixed; bottom: 0px; left: 0px;
width: 100%;">
<div style="background-color:Black;">
<ul >
<li id="active"><a id="current" href="#add" class="button">News</a></li>
<li>Updates </li>
<li>Contact Us</li>
<li>Website </li>
</ul>
</div>
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
<div id="info">
<div class="toolbar">
<h1>
About</h1>
Cancel
</div>
<div class="info">
This is a demo for jQTouch.
</div>
</div>
</div>
</body>
</html>
Float all li to left and give padding to them.
I implement it in html. Have a look and change accordingly in your code.
<style type="text/css">
.toolbar ul li{float:left; padding:3px 5px;}
.toolbar ul {list-style-type:none;
</style>
Try:
.toolbar ul{
display: inline;
list-style-type: none;
}