(My java script is under basic, i’m in learning process)
I’m trying to make a menu navigation with some copy-paste from scripts i found here, but the result is not as perfect as i would like.
That’s the point, i want:
Clicking one –div–
Shows the –li– from its –ul–
Others –div– get hidden
Clicking the –li– links doesn’t show others –div–, they keep hidden
Clicking back the same –div–
All –li– get hidden
Show all others –div– and –ul– (not the –li–)
Hope the question is clear, i appreciate any comment.
Thanks!
$(document).ready(function () {
$("ul").click(function (evt) {
if(evt.target.tagName != 'UL')
return;
$("li", this).toggle();
});
});
$(".SHOW").click(function(){
$(this).siblings("div").toggle();
});
ul li{list-style: none;}
a {text-decoration: none;}
ul a {color: black;}
li a {color: #493A3A;; }
.GER, .ARG, .SPAIN {
position: absolute;
width: 200px;
text-align: center;
border: solid 2px gray;
margin: 0;
padding: 0;
font-size: 30px;
line-heigth: 40px;
}
.ARG {left: 220px; top: 8px}
.SPAIN {left: 431px; top: 8px}
.GERLI, .ARGLI, .SPALI {font-size: 18px; height: 35px; line-height:36px; display:none}
.GERLI:nth-child(1) {background-color: yellow;}
.GERLI:nth-child(2) {background-color: Red;}
.GERLI:nth-child(3) {background-color: Black;}
.ARGLI:nth-child(1) {background-color: lightblue;}
.ARGLI:nth-child(2) {background-color: white;}
.ARGLI:nth-child(3) {background-color: lightblue;}
.SPALI:nth-child(1) {background-color: red;}
.SPALI:nth-child(2) {background-color: yellow;}
.SPALI:nth-child(3) {background-color: red;}
.GER:hover, .ARG:hover, .SPAIN:hover{background-color: lightgray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SHOW">
<ul class="GER">Germany
<li class="GERLI">Bratwurst</li>
<li class="GERLI">Chucrut</li>
<li class="GERLI">Ketchup</li>
</ul>
</div>
<div class="SHOW">
<ul class="ARG">Argentina
<li class="ARGLI">Churrasco</li>
<li class="ARGLI">Mate</li>
<li class="ARGLI">Pampa</li>
</ul>
</div>
<div class="SHOW">
<ul class="SPAIN">Spain
<li class="SPALI">Paella</li>
<li class="SPALI">Flamenco</li>
<li class="SPALI">Toros</li>
</ul>
</div>
The jsfiddle:
jsfiddle
You arent thinking of these as boxes, when you click on a li you are actually clicking on the entire ul and the div. You need to not only specify which you are clicking on but you also need to start using IDs, classes can only go so far with javascript. I fixed it in here
$(document).ready(function () {
$("ul").click(function (evt) {
if(evt.target.tagName != 'UL')
return;
$("li", this).toggle();
});
});
$(".GER").click(function(e){
if(e.target.id === "GER")
$(this).parent().siblings("div").toggle();
});
$(".ARG").click(function(e){
if(e.target.id === "ARG")
$(this).parent().siblings("div").toggle();
});
$(".SPAIN").click(function(e){
if(e.target.id === "SPA")
$(this).parent().siblings("div").toggle();
});
ul li{list-style: none;}
a {text-decoration: none;}
ul a {color: black;}
li a {color: #493A3A;; }
.GER, .ARG, .SPAIN {
position: absolute;
width: 200px;
text-align: center;
border: solid 2px gray;
margin: 0;
padding: 0;
font-size: 30px;
line-heigth: 40px;
}
.ARG {left: 220px; top: 8px}
.SPAIN {left: 431px; top: 8px}
.GERLI, .ARGLI, .SPALI {font-size: 18px; height: 35px; line-height:36px; display:none}
.GERLI:nth-child(1) {background-color: yellow;}
.GERLI:nth-child(2) {background-color: Red;}
.GERLI:nth-child(3) {background-color: Black;}
.ARGLI:nth-child(1) {background-color: lightblue;}
.ARGLI:nth-child(2) {background-color: white;}
.ARGLI:nth-child(3) {background-color: lightblue;}
.SPALI:nth-child(1) {background-color: red;}
.SPALI:nth-child(2) {background-color: yellow;}
.SPALI:nth-child(3) {background-color: red;}
.GER:hover, .ARG:hover, .SPAIN:hover{background-color: lightgray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SHOW">
<ul class="GER" id="GER">Germany
<li class="GERLI">Bratwurst</li>
<li class="GERLI">Chucrut</li>
<li class="GERLI">Ketchup</li>
</ul>
</div>
<div class="SHOW">
<ul class="ARG" id="ARG">Argentina
<li class="ARGLI">Churrasco</li>
<li class="ARGLI">Mate</li>
<li class="ARGLI">Pampa</li>
</ul>
</div>
<div class="SHOW">
<ul class="SPAIN" id="SPA">Spain
<li class="SPALI">Paella</li>
<li class="SPALI">Flamenco</li>
<li class="SPALI">Toros</li>
</ul>
</div>
Related
I have this menu inserted into a table and i want that after i click a cell from a table appears the second menu hidden but everytime i click the second menu appears and disapears.
I want that everytime i click "menu1" or "menu" shows the option inside of the "second nav" that is inside the "menu1" or "menu2". Also when it shows i want them to stay there and when i click again it disapears. See snippet to better understand what im trying to accomplish.
$(".menu1").on('click',function () {
$(".second nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 2
$(".menu2").on('click',function () {
$('.nav').$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 3
$(".menu3").on('click',function () {
$(".nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 4
$(".menu4").on('click',function () {
$(".nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
// menu 5
$(".menu5").on('click',function () {
$(".nav").$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
tr{
color: black;
}
* { margin:0;
padding:0;
}
h1{
color:Black;
}
.close{display:none;}
li.menu1{
background-color: orange;
}
li.menu2{
background-color: orange;
}
li.menu3{
background-color: orange;
}
li.menu4{
background-color: orange;
}
li.menu5{
background-color: orange;
}
/* Första boxarna*/
ul.nav {
list-style: none;
display: block;
width: 100%;
position: relative;
z-index:0;
color: orange;
-webkit-background-size: 50% 100%;
display: list-item;
font-family: OpenSans-Regular;
font-size: 18px;
}
li {
margin: 5px 0 0 0;
}
ul.nav li a {
-webkit-transition: all 0.3s ease-out;
color: white;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 5px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px 2px #888;
}
ul.nav li a:hover {
color: #67a5cd;
padding: 9px 15px 7px 30px;
}
ul.nav li ul {
display:none;
}
ul.nav li:active ul {
display:block;
position:relative;
left:3px;
top:0px;
list-style: none;
z-index:999;
background: orange;
}
ul.nav li ul li
{
background:orange;
opacity: 0.5;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<h1 strong>Plataforma de Alocações</h1>
<link rel="stylesheet" href="CSS/menu.css">
<body>
<table width="200px" border="0" align="left" cellpadding="10" cellspacing="5">
<tr>
<td>Sociedade Construções Manuel Moreira Maia LDA</td>
</tr>
<!--menu 1 -->
<tr>
<td>
<ul class="nav">
<li class="menu1">Alocações
<div class="second nav">
<ul>
<li>Nova Alocação</li>
<li>Listar Alocações</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 2 -->
<tr>
<td>
<ul class="nav">
<li class="menu2">Projetos
<div class="second nav">
<ul>
<li>Listar Projetos</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 3 -->
<tr>
<td>
<ul class="nav">
<li class="menu3">Colaborador
<div class="second nav">
<ul>
<li>Adicionar Colaborador</li>
<li>Listar Colaboradores</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 4 -->
<tr>
<td>
<ul class="nav">
<li class="menu4">Meios de Transporte
<div class="second nav">
<ul>
<li>Adicionar veículo</li>
<li>Listar Veículos</li>
</ul></div></li>
</ul>
</td>
</tr>
<!--menu 5 -->
<tr>
<td>
<ul class="nav">
<li class="menu5">Prestadores de Serviçoes
<div class="second nav">
<ul>
<li>Adicionar Novo Prestador</li>
<li>Listar Prestador de Serviços</li>
</ul></div></li>
</ul>
</td>
</tr>
</table>
<script src="JS/jquery-3.3.1.js"></script>
<script src="JS/menu.js"></script>
</body>
</html>
In your javascript code, the class selector is not correct:
$(".second nav").$('li div ul').toggle('');
must be
$(".second.nav").$('li div ul').toggle('');
since the "nav" is a second class of the tag, not the "nav" html component
I created a fiddle with a working example: https://jsfiddle.net/o2gxgz9r/52977/
I'll try to explain it as best as I can. I want to apply this principle to my own.
Tab Add Example
As you can see I'm adding 'tabs' to tab bar. When I add enough tabs to fill the whole tab bar, and I keep adding more, those tabs basically resize to fit the div. I don't want them to expand the div or to use the scroll bar to move among them. I want them to shrink within the div. You can see the exact example on the GIF I linked.
It should also behave the same on window resize.
Window Resize Example
Do you have any ideas on how to achieve this? I tried with JQuery but it was too much 'hard coding', it wouldn't work on resize, nor different screen resolutions.
HTML I want to apply:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
</ul>
</div>
</div>
When I add new tab it adds this
<li class="contentTab"></li>
JSFiddle
Any suggestions?
You can do this with Flexbox, you just need to set flex-basis
$(".add").click(function() {
$(".tabs").append('<li class="tab">Lorem ipsum</li>');
})
$('.remove').click(function() {
$('.tab').last().remove();
})
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
border: 1px solid black;
flex-basis: 200px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>
You can use display: table and display: table-cell for this:
$("#add").click(function() {
$("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs");
});
$("#del").click(function() {
$(".tab").last().remove();
});
.tabs {
display: table;
border-collapse: collapse;
padding: 0;
}
.tab {
display: table-cell;
width: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button id="add">Add Tab</button>
<button id="del">Remove Tab</button>
$('.tab-add').click(function() {
$('.tab-add').html('+');
var lastCount = $('#myTab1 li:last-child').html();
var plusOne = parseInt(lastCount) + 1;
$('#myTab1').append('<li class="contentTab">' + plusOne + '</li>');
});
* {
margin: 0; padding: 0;
}
.l_tabs {
width: 100%;
background-color: red;
}
#myTab1 {
display: flex;
list-style-type: none;
}
#myTab1 li {
display: flex;
justify-content: center;
flex: 1;
line-height: 50px;
color: white;
background-color: hsla(0, 0%, 20%, 1);
}
#myTab1 li:nth-child(even) {
background-color: hsla(0, 0%, 40%, 1);
}
.tab-add:hover {
background-color: hsl(0, 55%, 55%)!important;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add">click to add</li>
<li class="contentTab">1</li>
<li class="contentTab">2</li>
<li class="contentTab">3</li>
<li class="contentTab">4</li>
</ul>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/mx2mxgg1/2/
You can use flexbox to do exactly what you want
ul {
display: -webkit-box;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 180px;
min-width: 60px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
I would like to attempt to add functionality to my UL LI list, such that when an LI item is clicked on, the div's text will change to the selected value of the LI click, however, nothing seems to happen.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
Since the target div is at the parent level of the clicked li, you can use .closest() to target the required div element.
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
});
Example : http://jsfiddle.net/DinoMyte/bvtngh57/150/
Try like this
$(".select ul li").on("click", function() {
$(this).closest("div").contents().first().replaceWith($(this).text());
})
DEMO
$(".select ul li").click(function(e) {
$(this).parents('.select').html($(this).html())
});
Please try this instead of
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
This might help you
Use closest() function to get the parent .select, then use filter() function and condition this.nodeType == 3 to select only the text, inside the div. Replace it with value, using following.
$(".select").click(function() {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('.select').contents().filter(function(){
return this.nodeType == 3;
})[0].textContent = $(this).html()
});
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170, 170, 170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br>
<br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br>
<br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
Change
$(this).find('.select').val($(this).html());
to
$(this).parent().parent().html($(this).html());
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
// Remove this code
//$(this).find('.select').val($(this).html());
// Add this line
$(this).parent().parent().html($(this).html());
});
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
You should use extra class hide so you can control the flow of hide/show and try to give your default text a class for example default so you can target it and update it without touching the html of the select with following code :
$(this).parents('.select').find('.default').text( $(this).text() );
Hope this helps.
Snippet
$(function(){
$("body").on('click', '.select',function (e) {
$(this).find('ul li').toggleClass('hide');
});
$("body").on('click', '.select ul li', function(e) {
$(this).parents('.select').find('.default').text( $(this).text() );
});
})
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
padding: 1px;
}
.select ul li.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">
<span class='default'>Select Box1</span>
<ul>
<li class="hide">1234</li>
<li class="hide">5678</li>
<li class="hide">0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">
<span class='default'>Select Box2</span>
<ul>
<li class="hide">abcd</li>
<li class="hide">efgh</li>
<li class="hide">ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">
<span class='default'>Select Box3</span>
<ul>
<li class="hide">apples</li>
<li class="hide">bananas</li>
<li class="hide">oranges</li>
</ul>
</div>
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);
});
});
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.