Develop Reference

How do I change the opacity of the background content when the hamburger menu is open?

I have a working hamburger menu but I want to change the opacity of the background, in this example the div with the class "container" to 0.5(which represents future content aka the whole website content). I searched everywhere but it's hard for me to add it to my code since I'm just starting out JS.
Thank you.
html
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
početna
</li>
<li class="nav-item">
o brendu
</li>
<li class="nav-item">
doniraj kupovinom
</li>
<li class="nav-item">
doniraj uplatom
</li>
<li class="nav-item">
tvoj superhero nalog
</li>
<li class="nav-item">
plaćanje i dostava
</li>
<li class="nav-item">
nasi superheroji
</li>
<div class="lang">
<li class="nav-item">
srb
</li>
<li class="nav-item">
eng
</li>
</div>
</ul>
</nav>
<div class="container">
<p>text</p>
</div>
<script src="script.js"></script>
css (If needed?)
.hamburger-menu {
width:2.1rem;
height:2.1rem;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:space-around;
position:fixed;
left:2.1rem;
}
.line {
width:100%;
height:3px;
background-color:#000;
transition: all 0.8s;
}
.navbar {
width:25vw;
height:100%;
background-color:#F0F0F0;
box-shadow:1px 0px 10rem #B0B0B0;
padding-top:1rem;
padding-left:2rem;
position:fixed;
left:-50rem;
transition: left 0.8s cubic-bezier(.25,.75,.5,1.25);
font-size:1.4rem;
}
.change {
left:0;
}
.nav-item {
list-style:none;
margin:1rem 0;
}
.nav-list {
margin-top:3rem;
}
.nav-link {
text-decoration:none;
text-transform:uppercase;
color:#424242;
font-weight:bold;
transition:300ms ease;
position:relative;
padding:0.1rem 0;
}
.lang {
display:flex;
width:22%;
justify-content:space-between;
}
.nav-list>.nav-item > .nav-link::after {
content:"";
width:100%;
height:0.11rem;
background-color:#424242;
position:absolute;
left:0;
bottom:0;
transform: scaleX(0);
transition:transform 700ms ease;
transform-origin:left;
}
.nav-list>.nav-item > .nav-link:hover::after {
transform: scaleX(1);
}
.nav-list>.nav-item > .nav-link:active {
color:#949494;
}
.nav-list>.nav-item > .nav-link:active::after {
background-color:#949494;
}
.change .line-1 {
transform: rotateZ(-405deg) translate(-8px, 7px);
}
.change .line-3 {
transform: rotateZ(405deg) translate(-8px, -8.5px);
}
.change .line-2 {
opacity:0;
}
js
const menuIcon = document.querySelector (".hamburger-menu");
const navbar = document.querySelector('.navbar');
menuIcon.addEventListener('click' , () => {
navbar.classList.toggle('change');
});

You are already toggling a class on your menu click, you could toggle another class, on the body, that change the background opacity. Here, i've added a menu-open class on the body when the menu is open, and i've changed the background color.
I used the body because it showed more than the content div. but you could select whatever element you'd like.
const menuIcon = document.querySelector (".hamburger-menu");
const navbar = document.querySelector('.navbar');
const container = document.querySelector('body');
menuIcon.addEventListener('click' , () => {
navbar.classList.toggle('change');
container.classList.toggle('menu-open');
});
.hamburger-menu {
width:2.1rem;
height:2.1rem;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:space-around;
position:fixed;
left:2.1rem;
}
.line {
width:100%;
height:3px;
background-color:#000;
transition: all 0.8s;
}
.navbar {
width:25vw;
height:100%;
background-color:#F0F0F0;
box-shadow:1px 0px 10rem #B0B0B0;
padding-top:1rem;
padding-left:2rem;
position:fixed;
left:-50rem;
transition: left 0.8s cubic-bezier(.25,.75,.5,1.25);
font-size:1.4rem;
}
.change {
left:0;
}
.nav-item {
list-style:none;
margin:1rem 0;
}
.nav-list {
margin-top:3rem;
}
.nav-link {
text-decoration:none;
text-transform:uppercase;
color:#424242;
font-weight:bold;
transition:300ms ease;
position:relative;
padding:0.1rem 0;
}
.lang {
display:flex;
width:22%;
justify-content:space-between;
}
.nav-list>.nav-item > .nav-link::after {
content:"";
width:100%;
height:0.11rem;
background-color:#424242;
position:absolute;
left:0;
bottom:0;
transform: scaleX(0);
transition:transform 700ms ease;
transform-origin:left;
}
.nav-list>.nav-item > .nav-link:hover::after {
transform: scaleX(1);
}
.nav-list>.nav-item > .nav-link:active {
color:#949494;
}
.nav-list>.nav-item > .nav-link:active::after {
background-color:#949494;
}
.change .line-1 {
transform: rotateZ(-405deg) translate(-8px, 7px);
}
.change .line-3 {
transform: rotateZ(405deg) translate(-8px, -8.5px);
}
.change .line-2 {
opacity:0;
}
.menu-open {
background-color: rgba(0,0,0,0.3)
}
<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">
početna
</li>
<li class="nav-item">
o brendu
</li>
<li class="nav-item">
doniraj kupovinom
</li>
<li class="nav-item">
doniraj uplatom
</li>
<li class="nav-item">
tvoj superhero nalog
</li>
<li class="nav-item">
plaćanje i dostava
</li>
<li class="nav-item">
nasi superheroji
</li>
<div class="lang">
<li class="nav-item">
srb
</li>
<li class="nav-item">
eng
</li>
</div>
</ul>
</nav>
<div class="container">
<p>text</p>
</div>

Open div on mouse enter and keep it open

I'm trying to make a div open when you hover a link. Which is simple enough and I'm doing fine. But I also want to be able to access the div without it closing. So if I hover over the newly opened div it will stay open. But If I hover out of the div I want it to close.
I also want to make sure that if I hover out of the link that the div closes. I have done this a few times before but for the life of me I cant sort it back out. I remember using setTimeout previously but my mind has went to mush and it's late so thought I might as well ask for some help.
I'm also aware that mouseenter and mouseleave would be far better than hover in this situation I just typed it up as hover for speed.
UPDATE
Changing the HTML is not an option this is a jquery question not an html or CSS one.
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(
function() {
$(this).show();
}, function() {
$(this).fadeOut(1000);
}
);
});
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
background-color: red;
width: 100%;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true"><a>true</a>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
<div class="open"></div>

Move the div with the class open to the li as child element. The JS is now also simpler for your case. You can find the fiddle here: https://jsfiddle.net/ej5gkgat/.
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true">
<a>true</a>
<div class="open"></div>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
New CSS:
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
position: absolute;
background-color: red;
width: 300px;
height: 300px;
display: none;
}
New JS:
jQuery(document).ready(function($) {
"use strict";
$("li.true").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
});

Simple solution is not to use both parameters of hover in jquery.
when hover on "li.true a" simply ignore the second parameter, which hides your div. use null to skip on div.open's hover.
but if you ask for the right way. use CSS for these type of interactions. there is no need for JS to do this.
Edit: If you need to hide it when on siblings of "li.true a"'s hover.
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}
);
$("li:not(.true) a").hover(
function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(null, function() {
$(this).fadeOut(1000);
}
);
});
ul,
li {
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
background-color: black;
color: white;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: pointer;
}
a:hover {
color: black;
background-color: white;
}
li.true a {
background-color: green;
}
li.true a:hover {
background-color: blue;
color: green;
}
div.open {
background-color: red;
width: 100%;
height: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true"><a>true</a>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
<div class="open"></div>

Use this js it uses timeout
jQuery(document).ready(function($) {
"use strict";
var t;
$("li.true a, .open").hover( function() {
clearTimeout (t);
$(".open").fadeIn(1000);
}, function() {
clearTimeout (t);
t = setTimeout(function(){
$(".open").fadeOut(1000);
},1000);
} );
});

You can do this with only css:
body{ font-family:sans-serif; }
nav {
background:blue;
padding:12px;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
padding:6px;
border:1px inset white;
cursor:pointer;
transition:all .5s;
background:red;
}
ul li:hover {
background:white;
color:black;
}
ul ul {
display:none;
}
ul li:hover > ul {
display:inherit;
position:absolute;
top:68px;
float:none;
}
ul ul li {
display:inherit;
float:none;
position:relative;
left:-47px;
}
HTML:
<nav>
<ul>
<li> Example.com </li>
<li> Languages
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Javascript </li>
</ul>
</li>
<li> Something
<ul>
<li> Something </li>
</ul>
</li>
</ul>
</nav>

You can try doing it without timeout (not a big fan of), but with fadeTo() and stop()
Opacity is used to check visibility and calculate estimate remaining fade time.
JSFiddle example
jQuery(document).ready(function($) {
"use strict";
var fadeout = 1000;
var fadein = 800;
$("li.true a").hover(function() {
var opacity = $(".open").css("opacity");
opacity = opacity && opacity < 0.8 ? opacity : 0;
$(".open").stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
var opacity = $(".open").css("opacity");
if (opacity > 0) $(".open").fadeTo(fadeout, 0);
});
$(".open").hover(function() {
var opacity = $(this).css("opacity");
if (opacity > 0) $(this).stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
$(this).fadeTo(fadeout, 0);
});
});

Jquery hide show specific div element on mouseover

I am struggling a bit with this, I can hide/show/fadin/fadout all day long but I am trying to get my head round the logic of targetting an element in my and pulling its specific description on mouseover, I have come close to getting this but feel like im missing something, below is my HTML:
<ul id="menu" class="menu">
<li>Home</li>
<li id="menu1" class="menu-link">LINK1</li>
<li id="menu2" class="menu-link">LINK2</li>
<li id="menu3" class="menu-link">LINK3</li>
<li id="menu4" class="menu-link">LINK4</li>
</ul>
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
and here is my CSS, the idea is to position the description just above its corresponding element btw:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
display:inline;
clear:both;
position:relative;
overflow:hidden;
}
.menu li a{
float:left;
width:6em;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
position: absolute;
right: 407px;
margin-left: 5px;
top: 15px;
}
and finally here is the jquery:
$(document).ready(function() {
$('div.menuDescription').hide();
$('li.menu-link').bind('mouseover', function() {
$('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
})
.mouseout(function() {
$('#' + $(this).attr('id') + 'content').fadeOut();
});
});

WHen you have a one-to-one relationship between 2 sets of elements and their order in each set matches, is generally easier to use indexing rather than parsing ID
var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
/* "this" is element being hovered*/
var index= $links.index(this);
$content.stop().hide().eq(index).fadeIn();
},function(){
/* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})
DEMO

I have updated and simplified your fiddle to make it work: Working Fiddle. Here is the simplified code without any JS:
HTML:
<ul id="menu" class="menu">
<li>
Home
</li>
<li id="menu1" class="menu-link">
LINK1
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
LINK2
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
LINK3
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
LINK4
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}
Let me know if you need any explanations and I'll edit my answer.

How to zoom out Html element?

I am trying to create cloud tags in html.I am able to create them using ul tag and applying css on them.Following is my cloud tag image:
Now i want effects like that, when i move my mouse to any of the text(i.e any cloud tag),say "Learn java" tag it should zoom out and when i move my mouse out of it it should go back to its place. I have seen this functionality on many websites.
following is my code in HTML file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#java").hover(function(){
alert("You entered on java cloud tag!");
},function);
});
</script>
<title>Css Globe: tag clouds</title>
<style>
body {
margin:0;
padding:0;
background:#e1e1e1;
font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
a{color:#3c70d0;}
h1{
font-size:180%;
font-weight:normal;
margin:0 20px;
padding:1em 0;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:500px;
}
#container{
margin:0 auto;
text-align:left;
width:700px;
background:#fff;
}
#main{
float:right;
display:inline;
width:380px;
margin-left:20px;
}
#side{
float:left;
display:inline;
width:260px;
margin-left:20px;
}
#footer{
clear:both;
padding:1em 0;
margin:0 20px;
}
/* Tag cloud */
.tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:center;
background:#71b5e9 url(bg_tags.gif) repeat-x;
}
.cld{
height:100px;
width:400px;
}
.tags li{
margin:0;
padding:0;
list-style:none;
display:inline;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
}
.tag1{font-size:100%;}
.tag2{font-size:120%;}
.tag3{font-size:140%;}
.tag4{font-size:160%;}
.tag5{font-size:180%;}
/* alternative layout */
.tags .alt{
text-align:left;
padding:0;
background:none;
}
.tags .alt li{
padding:2px 10px;
background:#efefef;
display:block;
}
.tags .alt .tag1,
.tags .alt .tag2,
.tags .alt .tag3,
.tags .alt .tag4,
.tags .alt .tag5{font-size:100%;}
.tags .alt .tag1{background:#7cc0f4;}
.tags .alt .tag2{background:#67abe0;}
.tags .alt .tag3{background:#4d92c7;}
.tags .alt .tag4{background:#3277ad;}
.tags .alt .tag5{background:#266ca2;}
/* // Tag cloud */
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body> <!--******************************************************************************-->>
<div id="container">
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
<div id="side">
<h2>Side column (Tag Cloud)</h2>
<div class="tags">
<ul class="cld">
<li class="tag1" id="java">Learn java</li>
<li class="tag2">Find Markets</li>
<li class="tag3">sitemap</li>
<li class="tag2">Sales</li>
<li class="tag4">Gohome</li>
<li class="tag1">Movies</li>
<li class="tag1">It Jobz</li>
<li class="tag5">Gym</li>
<li class="tag2">Sea food</li>
<li class="tag1">Hospital</li>
<li class="tag3">Smart phone</li>
<li class="tag4">Pizza </li>
<li class="tag1">Aerobics</li>
<li class="tag5">Electronics</li>
<li class="tag1">Anti-Virus</li>
<li class="tag2">Travel</li>
</ul>
</div>
</div>
</div>
</body>
</html>
,So please give some solution to achive this.
Thank you in advance.

just use css3 transform scale property
.element{
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.element:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}
demo:http://jsfiddle.net/raJwX/
**
Update:
**
Demo: http://jsfiddle.net/raJwX/1/
.tags li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}

This is what you want. - JS Fiddle
Add to CSS:
.tags ul li {
-moz-transition: font-size 0.2s;
-webkit-transition: font-size 0.2s;
transition: font-size 0.2s;
}
Replace jQuery with:
$(document).ready(function(){
$("#java").hover(function(){
$(this).css({'fontSize': '150%'});
}, function(){
$(this).css({'fontSize': '100%'});
});
});
Adjust sizes/timings/etc as appropriate.
Cheers.

CSS "transform" property is what you are looking for that this will help you out to achieve this.
However I just took your code and made changes in two CSS classes
.tags li a{
text-decoration:none;
display:inline-block;
-webkit-transition: all .2s ease-in-out;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
-webkit-transform: scale(1.3);
}
For reference http://jsfiddle.net/yNt6X/3/
Hope you gets what you are looking for.
P.S. I have just added css for webkit browser.

Animate method can be used with best effect as used in following link
$(this).animate({width: "500px"}, 'slow');
Above method is called on mouseover and mouseout function on html element.
http://jsfiddle.net/jquerybyexample/nPeaV/

Using jQuery .css() property you can change font size to smaller which make an effect of "zoom out" but actually the font is only smaller.
Example
<script>
$(document).ready(function(){
$("#java").hover(function(){
$("#java").css('font-size', "10px");
});
});
</script>
Also, when you out of hovering "Learn Java" you can use the event onMouseOut to return the font to his normal font size.
Example
<script>
$(document).ready(function(){
$("#java").mouseout(function(){
$("#java").css('font-size', "18px"); // Assuming that normal font is 18px.
});
});
</script>
Fiddle

highlight menu on hover using css/javascript

I want to highlight (transparent color with border smaller than the image tab) my menu items using hover through javascript. But, I can't seem to get it right. As an dded effect, when the menu tab is clicked, I want to have a bouncing animation for my image tab. Can this be done?
Here's my javascript code.
<script type="text/javascript">
$(function () {
$("img").hover(
function () {
$(this).addClass('highlight');
},
function () {
$(this).removeClass('highlight');
});
});
HTML:
<ul class="menu_tab">
<li><img src="images/top_menu_tabs/kaiiki.jpg" alt="tab1" />
<div class="highlight"></div>
</li>
</ul>
CSS:
ul.menu-tab
{
z-index:0;
list-style:none;
overflow:hidden;
margin:0px;
padding:0px 0px 0px 10px;
}
ul.menu-tab li
{
display:block;
color:#ffffff;
margin-right:0px;
margin-bottom:0px;
position:relative;
overflow:hidden;
cursor:pointer;
}
ul.menu-tab a
{
display:block;
width:60px;
height:50px;
overflow:hidden;
border:0;
}
ul.menu-tab a:hover
{
color:green;
background-color:#ccffcc;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
width:50px;
border:20px solid green;
}
.highlight
{
color:Green;
width:auto;
width:auto;
padding:0;
}
The image I want to achieve is something like this: http://www4.kaiho.mlit.go.jp/CeisNetWebGIS/

Here are some more examples brainjar Demo More from Brainjar