We Keep Coding

Simple jQuery left/right slide toggle animation for mobile menu

I'm trying to create a menu that slides in and out from the right hand side of the screen for a mobile version of a site.
I have a 'ul' that starts off screen on page load due to its large margin. The plan is to have a button that will toggle that margin back and forth with '.animate' in order to hide and reveal the 'ul'.
The first chunk of code below works but won't repeat. So, on 'click', the menu appears, hides and then appears once more before it stops responding. This confused me so I tried a different route and went with an 'if' statement but now it just keeps sliding left despite the class definitely changing (i've checked it in the console).
Now i'm stumped! Can anyone help?
// MOBILE MENU
$(function() {
// create identical menu buttons with different classes
var $active = $("<div class='mm-active'><hr><hr><hr></div>");
var $inactive = $("<div class='mm-inactive'><hr><hr><hr></div>");
// append 'inactive' menu button to menu div
$(".mobile-menu").prepend($inactive);
$($inactive).click(function() {
$($inactive).hide();
$(this).next("ul").animate({'margin-left': '-='+90}, 1000);
$(".mobile-menu").prepend($active);
});
$($active).click(function() {
$(this).nextAll("ul").animate({'margin-left': '+='+90}, 1000);
$($active).remove();
$($inactive).show();
});
});
//And here with the 'if' statement...
$(function() {
// create identical menu buttons with different classes
var $mm_btn = $("<div><hr><hr><hr></div>");
var $classname = ($mm_btn).attr("class");
// append mobile menu button to menu div
$(".mobile-menu").prepend($mm_btn);
$($mm_btn).click(function() {
$($mm_btn).toggleClass('active');
if($classname === 'active') {
$(this).next("ul").animate({'margin-left': '+='+90}, 1000);
} else {
$(this).next("ul").animate({'margin-left': '-='+90}, 1000);
}
});
});
.mobile-menu {
position: absolute;
top: 5px;
right: 0;
width: 25px;
margin: 0 25px 0 0;
padding: 5px 0 8px 5px;
z-index: 1;
}
.mobile-menu hr {
border: 0;
height: 2px;
background: black;
}
.mobile-menu ul {
position: relative;
z-index: -1;
display: inline-block;
text-align: right;
margin-left: 50px;
margin-top: -50px;
padding: 50px 25px 5px 5px;
list-style: none;
}
.mobile-menu ul li {
padding: 3px;
}
<div class="mobile-menu">
<ul>
<li class="projects">projects</li>
<li>about</li>
<li>contact</li>
</ul>
</div>

In first case, when you are removing element all events are also removed: .remove()
In second case: $classname was set to empty string on page load and is never changed this is why only else is executed.
// MOBILE MENU
$(function() {
// create identical menu buttons with different classes
var $active = $("<div class='mm-active'><hr><hr><hr></div>");
// append 'inactive' menu button to menu div
$(".mobile-menu").prepend($active);
$($active).click(function() {
if ($active.hasClass('mm-active')) {
$(this).nextAll("ul").animate({
'margin-left': '-=' + 90
}, 1000);
} else {
$(this).nextAll("ul").animate({
'margin-left': '+=' + 90
}, 1000);
}
$active.toggleClass('mm-active');
});
});
body {
overflow: hidden;
}
.mobile-menu {
position: absolute;
top: 35px;
right: 0;
width: 25px;
margin: 0 25px 0 0;
padding: 5px 0 8px 5px;
z-index: 1;
}
.mobile-menu hr {
border: 0;
height: 2px;
background: black;
}
.mobile-menu ul {
position: relative;
z-index: -1;
display: inline-block;
text-align: right;
margin-left: 50px;
margin-top: -50px;
padding: 50px 25px 5px 5px;
list-style: none;
}
.mobile-menu ul li {
padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-menu">
<ul>
<a href="projects.html">
<li class="projects">projects</li>
</a>
<a href="about.html">
<li>about</li>
</a>
<a href="contact.html">
<li>contact</li>
</a>
</ul>
</div>

Hold ul visible when parent loses hover (pure css if possible)

I'm quite new with css. I want hold the ul visible when hovering from parent to ul. I don't know how do it.
HTML Markup
<drop-down class="dropdown">
<span>Dropdown menu<i class="fa fa-cog"></i></span>
<ul>
<li>
Github<i class="fa fa-github"></i>
</li>
<li>
BitBucket<i class="fa fa-bitbucket"></i>
</li>
<li>
Dropbox<i class="fa fa-dropbox"></i>
</li>
<li>
Google drive<i class="fa fa-google"></i>
</li>
</ul>
</drop-down>
CSS
drop-down {
background-color: #e9e9e9;
border: 1px solid #d2c2c2;
border-radius: 2px;
display: flex;
flex-flow: column nowrap;
height: 40px;
justify-content: center;
position: relative;
width: 160px;
}
drop-down:hover { cursor: pointer; }
drop-down > span {
align-items: center;
color: #555;
display: flex;
font-family: 'segoe ui';
font-size: .9rem;
justify-content: space-between;
padding: 0px .75rem;
pointer-events: none;
}
drop-down > span > i {
color: inherit;
}
drop-down ul {
background-color: #e9e9e9;
border: 1px solid #d2c2c2;
border-radius: 2px;
box-shadow: 0px 2px 5px 1px rgba(0,0,0,.15);
display: block;
right: 10%;
list-style: none;
padding: .5rem 0;
position: absolute;
opacity: 0;
pointer-events: none;
visibility: hidden;
top: 160%;
transition: all .2s ease-out;
width: 100%;
z-index: 999;
}
drop-down ul > li {
color: #555;
display: block;
}
drop-down ul > li:hover {
background-color: #007095;
color: rgba(255,255,255,.9);
}
drop-down ul > li > a {
align-items: center;
color: inherit;
display: flex;
font-family: 'segoe ui';
font-size: .95rem;
justify-content: space-between;
padding: .5rem .75rem;
text-decoration: none;
}
drop-down ul > li > a > i {
color: inherit;
}
drop-down:focus {
outline: none;
}
drop-down:hover ul {
pointer-events: auto;
opacity: 1;
top: 120%;
visibility: visible;
}
You can see it running at this fiddle: http://jsfiddle.net/vt1y9ruo/1/
I can do it with javascript, but I don't want use it for something small.

Here's a working fiddle: http://jsfiddle.net/vt1y9ruo/8/
It works by inserting an invisible bridge between the button and the list.
drop-down:hover ul, #ulwrap:hover ul {
pointer-events: auto;
opacity: 1;
top:120%;
visibility: visible;
}
#ulwrap {
display: block;
height:0;
width:100%;
position:absolute;
}
drop-down:hover #ulwrap, #ulwrap:hover {
height:100px;
}

if you want to do this using the hover feature of css, the gap between the button and the list is what's killing you. either remove this gap or use js
on a side note there is no harm in using js for something small, this is what its used for, just make it nice and reusable

Well, pure css solution (many thanks #JBux) is a little dirty (mark up). I finally go for JS solution and for this, created a custom tag:
const helper = new Helper(); // helper functions
var ddProto = Object.create(HTMLElement.prototype);
ddProto.properties = {
list: null,
options: null,
value: null,
icon: null,
index: -1,
};
ddProto.initEvents = function() {
var self = this;
// mouse over button
this.addEventListener('mouseover', function(e) {
if(!helper.hasClass(this, 'dropdown-active'))
helper.addClass(this, 'dropdown-active');
});
// mouseleave over button
this.addEventListener('mouseleave', function(e){
var rect = this.getBoundingClientRect();
var left = e.pageX;
var bottom = e.pageY;
// if mouse is out of X axis of button and if mouse is
// out (only of top) of Y axis of button, hide ul
if(left < rect.left || left >= rect.right || bottom < rect.top) {
helper.delClass(this, 'dropdown-active');
}
});
// list loses hover
this.properties.list.addEventListener('mouseleave', function(e) {
if(helper.hasClass(self, 'dropdown-active'))
helper.delClass(self, 'dropdown-active');
});
// elements click
[].forEach.call(this.properties.options, function(e) {
e.addEventListener('click', function(event){
event.preventDefault();
// set the text of selected value to button
helper.text(self.properties.value, e.innerText);
// set the position of selected value
self.properties.index = helper.position(e.parentNode);
// set the <i> class name to the button (fontawesome)
self.properties.icon.className = this.children[0].className;
// hide ul
helper.delClass(self,'dropdown-active');
},true);
});
};
ddProto.value = function() {
return this.properties.value;
};
ddProto.index = function() {
return this.properties.index;
}
ddProto.createdCallback = function() {
this.properties.list = this.querySelector('ul');
this.properties.options = this.querySelectorAll('ul > li > a');
this.properties.value = this.querySelector('span');
this.properties.icon = this.querySelector('span > i');
this.initEvents();
};
document.registerElement('drop-down', {prototype: ddProto});
Working fiddle: http://jsfiddle.net/m2dtmr24/2/
Thank you so much.

The thing you could check is the + selector (more here)
In short it lets you add styles to elements right next to each other. The actual css might look something like this:
.dropdown{
display: none;
}
.button:hover+.dropdown{
display: block;
}
This will only work when .dropdown is directly below .button in the DOM
The animation might be harder, but you could achieve something similar by for example using transition on opacity, and toggle opacity instead of display

adding more button for list in responsive navigation

I have a navigation of lets say 12 items, and when resolution gets smaller items drop in a new line. I need to make that when an item doesn't fit on a navigation anymore it should put a "MORE" dropdown button on the right side of nav. and put that item that doesn't fit in a dropdown.
If you don't understand me there is image below.
But the problem is that navigation items aren't always the same width because navigation items are generated from REST api.
I tryed to make jQuery script for calculating items width and adding them to navigation.
Here is the script I created, I made it in a hurry so it's really bad.
I need to help on how to properly calculate items witdh and navigation width and calculating when to add items to navigation or remove items from navigation.
Here is image if you don't get it: http://img.hr/aagV
/*
* Here we check how many items can we put on the navigation bar
* If item doesn't fit we clone it on the more dropdown button
*/
function removeMany() {
var i = $items.length - 1;
if (itemsWidth > navWidth) {
while (itemsWidth > navWidth) {
$($items[i]).removeClass('first-level-item').addClass('second-level-item');
dropdownItems.push($items[i]);
$($items[i]).removeClass('showed');
$items.pop();
i--;
getItemsWidth();
}
$nav.append($navMore);
dropdownItems.reverse().forEach(function (element, index, array) {
$('ul.second-level').append(element);
});
getItems();
}
}
//If window is resized to bigger resolution we need to put back items on the navbar
function addMany() {
var i = dropdownItems.length - 1;
if (dropdownItems.length != 0) {
do {
$('ul.first-level').append(dropdownItems.reverse()[i]);
$items.push(dropdownItems[i]);
dropdownItems.pop();
i--;
getItemsWidth();
} while (itemsWidth < navWidth);
$navMore.remove();
$items.each(function (i) {
$(this).addClass('first-level-item showed').removeClass('second-level-item');
});
if (!(dropdownItems != 0)) {
return;
} else {
$nav.append($navMore);
}
}
}
body {
margin: 0;
padding: 0;
border: 0; }
ul, li {
margin: 0;
padding: 0;
list-style: none; }
ul.second-level li {
display: block !important; }
ul.second-level li > a {
color: black; }
a {
color: #fff;
text-decoration: none;
text-transform: uppercase; }
.second-level-item a {
color: #333 !important; }
.navigation {
width: 960px;
max-width: 100%;
background: #211;
color: #aaa;
margin: 0 auto; }
.first-level .first-level-item {
display: inline-block;
padding: 10px; }
.first-level .item-more {
display: inline-block; }
.first-level .item-more .second-level-item {
display: inline-block; }
.second-level {
position: absolute;
top: 100%;
right: 0;
width: 200px;
background: #fff;
padding: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
.has-second-level {
position: relative; }
.has-second-level .second-level {
display: none; }
.has-second-level:hover {
background: #fff;
color: #000; }
.has-second-level:hover .second-level {
display: block; }
/*# sourceMappingURL=style.css.map */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DropDown</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<nav class="navigation">
<ul class="first-level">
<li class="first-level-item showed">Introduction to Irish Culture</li>
<li class="first-level-item showed">Cellular and Molecular Neurobiology</li>
<li class="first-level-item showed">Guitar foundations</li>
<li class="first-level-item showed">Startup Inovation</li>
<li class="first-level-item showed">Astrophysics</li>
<li class="first-level-item item-more has-second-level">
<span> More </span>
<ul class="second-level">
</ul>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</body>
</html>

If you have fixed-width list-items, then it is simple to collect extra list-items and push them into a separate list. Here is a simple example. Explanation is in the code comments.
View the snippet in full-screen and try changing the window width.
Also a Fiddle: http://jsfiddle.net/abhitalks/860LzgLL/
Full Screen: http://jsfiddle.net/abhitalks/860LzgLL/embedded/result/
Snippet:
var elemWidth, fitCount, fixedWidth = 120,
$menu = $("ul#menu"), $collectedSet;
// Assuming that the list-items are of fixed-width.
collect();
$(window).resize(collect);
function collect() {
// Get the container width
elemWidth = $menu.width();
// Calculate how many list-items can be accomodated in that width
fitCount = Math.floor(elemWidth / fixedWidth) - 1;
// Create a new set of list-items more than the fit count
$collectedSet = $menu.children(":gt(" + fitCount + ")");
// Empty the collection submenu and add the cloned collection set
$("#submenu").empty().append($collectedSet.clone());
}
* { box-sizing: border-box; margin: 0; padding: 0; }
div { position: relative; background-color: #ccc; height: 32px; overflow: visible; }
ul#menu, ol { height: 32px; max-width: 80%; overflow: hidden; }
ul#menu > li, ol > li { display: block; float: left; height: 32px; width: 120px; padding: 4px 8px; }
ol { position: absolute; right: 0; top: 0; overflow: visible; }
ol > li { min-width: 120px; }
ol ul { position: absolute; top: 120%; right: 10%; }
ol li ul > li { list-style: none; background-color: #eee; border: 1px solid gray; padding: 4px 8px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="menu">
<li>Option One</li><li>Option Two</li><li>Option Three</li>
<li>Option Four</li><li>Option Five</li><li>Option Six</li>
</ul>
<ol><li>Collected<ul id="submenu"></ul></li></ol>
</div>
Update:
This is regarding your query on differing / variable widths of list-items. There would be a minor change.
Also a Fiddle: http://jsfiddle.net/abhitalks/tkbmcupt/1/
Full Screen: http://jsfiddle.net/abhitalks/tkbmcupt/1/embedded/result/
Snippet:
var elemWidth, fitCount, varWidth = 0, ctr, $menu = $("ul#menu"), $collectedSet;
// Get static values here first
ctr = $menu.children().length; // number of children will not change
$menu.children().each(function() {
varWidth += $(this).outerWidth(); // widths will not change, so just a total
});
collect(); // fire first collection on page load
$(window).resize(collect); // fire collection on window resize
function collect() {
elemWidth = $menu.width(); // width of menu
// Calculate fitCount on the total width this time
fitCount = Math.floor((elemWidth / varWidth) * ctr) - 1;
// Reset display and width on all list-items
$menu.children().css({"display": "block", "width": "auto"});
// Make a set of collected list-items based on fitCount
$collectedSet = $menu.children(":gt(" + fitCount + ")");
// Empty the more menu and add the collected items
$("#submenu").empty().append($collectedSet.clone());
// Set display to none and width to 0 on collection,
// because they are not visible anyway.
$collectedSet.css({"display": "none", "width": "0"});
}
* { box-sizing: border-box; margin: 0; padding: 0; }
div { position: relative; background-color: #ccc; height: 32px; overflow: visible; }
ul#menu, ol { height: 32px; max-width: 80%; overflow: hidden; }
ul#menu > li, ol > li { display: block; float: left; height: 32px; white-space: nowrap; padding: 4px 8px; }
ol { position: absolute; right: 0; top: 0; overflow: visible; }
ol > li { min-width: 120px; }
ol ul { position: absolute; top: 120%; right: 10%; }
ol li ul > li { list-style: none; background-color: #eee; border: 1px solid gray; padding: 4px 8px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="menu">
<li>Option One</li><li>Option Two</li><li>Option Three</li>
<li>Option Four</li><li>Option Five</li><li>Option Six</li>
</ul>
<ol><li>Collected<ul id="submenu"></ul></li></ol>
</div>

Can and SHOULD be optimised (as it is quite inefficient from what i've tested), but that's up to you.
$(document).ready(function(){
var moreW = $(".more").outerWidth(), //width of your "more" element
totalW = -moreW, //cumulated width of list elements
totalN = $('.nav li').length - 1, //number of elements minus the "more" element
dw = document.documentElement.clientWidth;
$('.nav li').each(function(){
totalW += $(this).outerWidth();
});
function moveToDropdown(){
dw = document.documentElement.clientWidth;
//moves elements into the list
while(totalW > (dw - moreW)){
var temp = $(".nav li:nth-last-child(2)"); //element to be moved
totalW = totalW - temp.outerWidth();
$(".dropdown").append(temp.clone());
temp.remove();
}
//moves elements out of the list
var newList = $('.dropdown li').length; //check if we have elements
if(newList > 0){
var element = $('.dropdown li:last-child'), //element to be moved
elementW = $('.dropdown li:last-child').outerWidth(); //width of element to be moved
if(totalW + elementW < dw - moreW){
while(totalW + elementW < dw - moreW ){
var element = $('.dropdown li:last-child'),
elementW = $('.dropdown li:last-child').outerWidth();
totalW = totalW + elementW;
$(".nav > li:last-child").before(element.clone());
element.remove();
}
}
}
}
moveToDropdown();
$(window).resize(moveToDropdown)
});
.clearfix:after{
display:block;
content:'';
clear:both;
}
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
ul{
list-style:none;
width:100%;
padding:0;
margin:0;
}
ul li{
float:left;
padding:5px;
}
.nav > li {
position:relative;
}
.nav ul{
position:absolute;
top:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav clearfix">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li class="more">
more
<ul class="dropdown">
<!-- we'll add elements here -->
</ul>
</li>
</ul>

This question is too old, but i want to post my answer too. Maybe this is more cleaner and easier way. I have created a pen: https://codepen.io/sergi95/pen/bmNoML
<div id="mainMenu" class="main-menu">
<ul id="autoNav" class="main-nav">
<li>
home
</li>
<li>
about us
</li>
<li>
portfolio
</li>
<li>
team
</li>
<li>
blog
</li>
<li>
contact
</li>
<li id="autoNavMore" class="auto-nav-more">
more
<ul id="autoNavMoreList" class="auto-nav-more-list">
<li>
policy
</li>
</ul>
</li>
</ul>
const $mainMenu = $("#mainMenu");
const $autoNav = $("#autoNav");
const $autoNavMore = $("#autoNavMore");
const $autoNavMoreList = $("#autoNavMoreList");
autoNavMore = () => {
let childNumber = 2;
if($(window).width() >= 320) {
// GET MENU AND NAV WIDTH
const $menuWidth = $mainMenu.width();
const $autoNavWidth = $autoNav.width();
if($autoNavWidth > $menuWidth) {
// CODE FIRES WHEN WINDOW SIZE GOES DOWN
$autoNav.children(`li:nth-last-child(${childNumber})`).prependTo($autoNavMoreList);
autoNavMore();
} else {
// CODE FIRES WHEN WINDOW SIZE GOES UP
const $autoNavMoreFirst = $autoNavMoreList.children('li:first-child').width();
// CHECK IF ITEM HAS ENOUGH SPACE TO PLACE IN MENU
if(($autoNavWidth + $autoNavMoreFirst) < $menuWidth) {
$autoNavMoreList.children('li:first-child').insertBefore($autoNavMore);
}
}
if($autoNavMoreList.children().length > 0) {
$autoNavMore.show();
childNumber = 2;
} else {
$autoNavMore.hide();
childNumber = 1;
}
}
}
// INIT
autoNavMore();
$(window).resize(autoNavMore);
.main-menu {
max-width: 800px;
}
.main-nav {
display: inline-flex;
padding: 0;
list-style: none;
}
.main-nav li a {
padding: 10px;
text-transform: capitalize;
white-space: nowrap;
font-size: 30px;
font-family: sans-serif;
text-decoration: none;
}
.more-btn {
color: red;
}
.auto-nav-more {
position: relative;
}
.auto-nav-more-list {
position: absolute;
right: 0;
opacity: 0;
visibility: hidden;
transition: 0.2s;
text-align: right;
padding: 0;
list-style: none;
background: grey;
border-radius: 4px;
}
.auto-nav-more:hover .auto-nav-more-list {
opacity: 1;
visibility: visible;
}

The script that Abhitalks made did not work properly for different element sizes. I modified the code a little bit do that it does:
$(function() {
function makeMenuFit() {
//Get data
var menuSize = menu.width();
//Determine how many items that fit
var menuTotalWidth = 0;
var itemThatFit = 0;
for(var i = 0; i < menuItems.length; i++) {
menuTotalWidth += menuItems[i];
if(menuTotalWidth <= menuSize) {
itemThatFit++;
continue;
}
break;
}
menu.children().css({"display": "block", "width": "auto"});
var collectedSet = menu.children(":gt(" + (itemThatFit - 1) + ")");
$("#submenu").empty().append(collectedSet.clone());
collectedSet.css({"display": "none", "width": "0"});
}
var menu = $(".tabletNavigation > ul");
var menuItems = [];
menu.children().each(function() {
menuItems.push($(this).outerWidth());
});
$(window).resize(makeMenuFit);
makeMenuFit();
});

with jQuery modify CSS .on mouseenter: for a specific ul li tag

New to jQuery and can't quite figure out how to achieve what I'm trying to do. Server can work only with HTML - no PHP or Ruby available (that and I'm not familiar with those languages yet). I'm also using the latest jQuery 1.10.2
What I have is a menu with tiles that each have a preview picture and a title ribbon (the to be specific), what I want is for the titles ribon background to change the opacity when mouse cursor hovers over tile.
So far I have it so that it sort of works, but the problem is that whenever a mouse cursor hovers over a tile, all the titles change the opacity, and not just the one being hovered over. I tried to get index number of a 'li' element using .index and then return it to be used as a identifier, but that didn't quite work. I also tried to do something like this:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
},
mouseleave: function () {
$(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
}
});
});
</script>
But I couldn't figure out how to continue off of that to modify the $('.tt1').css
So here's the relevant code fragments of what I have so far...
jQuery code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$('.tt1').css('opacity', '1.0');
},
mouseleave: function () {
$('.tt1').css('opacity', '0.6');
}
});
});
</script>
The HTML code:
<menu>
<ul class="collumn-left">
<li><div class="tt1">About</div></li>
<li><div class="tt1">Test</div></li>
</ul>
<ul class="collumn-right">
<li><div class="tt1">Random</div></li>
<li><div class="tt1">More</div></li>
</ul>
</menu>
The CSS code:
/* menu section begin */
menu {
background-color: silver;
box-shadow: 0 5px 10px #6A6A6A;
}
menu li {
margin: 0;
padding: 0;
display: block;
}
.collumn-left,
.collumn-right {
margin: 0;
padding: 0;
float: left;
}
.collumn-left a,
.collumn-right a {
float: left;
border: none;
list-style: none;
color: #000000;
text-decoration: none;
}
.tt1 {
background-color: grey;
opacity: 0.6;
font-weight: bolder;
text-align: center;
}
.tt1:hover {
opacity: 1.0;
}
/* menu section end */
/* Medium display size - Tablet devices & Desktops/Laptops */
#media only screen and (min-width: 1024px) and (max-width: 1280px) {
menu {
min-width: 370px;
width: 1024px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 512px;
}
.collumn-left a,
.collumn-right a {
width: 502px;
height: 502px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 325px 0 102px 0;
font-size: 35px;
line-height: 75px;
}
article {
margin: 0 10% 0 10%;
}
}
/* High Display Resolution Desktops/Laptops */
#media only screen and (min-width: 1281px) {
menu {
min-width: 370px;
width: 1540px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 770px;
}
.collumn-left a,
.collumn-right a {
width: 760px;
height: 760px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 500px 0 160px 0;
font-size: 40px;
line-height: 100px;
}
article {
margin: 0 10% 0 10%;
}
}

Try this javascript code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").css('opacity', '1.0');
},
mouseleave: function () {
$(this).find(".tt1").css('opacity', '0.6');
}
});
});
</script>
edit:
Another, maybe more cleaner way to achieve this would be the following:
CSS
.tt1:hover, .tt1.hover {
opacity: 1.0;
}
Javascript
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").addClass("hover");
},
mouseleave: function () {
$(this).find(".tt1").removeClass("hover");
}
});
});
</script>
You could easily add other features by just editing your css. For example a nice transition or different styles for smaller screens.

No need for javascript just use css
menu ul li .ttl:hover {
opacity:1.0;
}

$(this).find('.tt1').css('opacity', '1.0');
find() will look for a child element of the hovered element with the class tt1.

Lavalamp for jQuery: Can't get first level menu clickable

I am using this version of the lavalamp jquery plugin and I would like the travel link to have a submenu with options like (TRAVEL - >DOMESTIC | INTERNATIONAL | SPACE | DARK AGES | GOLDEN ERA) and also to be able to navigate to the top-level travel.html page.
Travel should link to travel.html and DOMESTIC, INTERNATIONAL, SPACE, DARK AGES, GOLDEN ERA should all be linking to their respective pages.
I felt as though it shouldn't be this difficult but somehow I am not able to get it done.
Many thanks.
EDIT: ADDING CODE
HTML
<ul class="lavaLampWithImage" id="1">
<li>Home</li>
<li><a href="products.html" >Travel</a>
<div>
<ul>
<li>Domestic</li>
<li>International</li>
<li>Space</li>
<li>Dark Ages</li>
<li>Golden Era</li>
</ul>
</div>
</li>
<li>Travel</li>
<li>Ride an elephant</li>
</ul>
<script type="text/javascript">
$(function() {
$("#1").lavaLamp({
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
JAVASCRIPT
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$.dequeue(this, "fx"); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
CSS
.lavaLampWithImage {
position: relative;
height: 29px;
width: 421px;
background: url("bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
What I basically were trying to achieve was to have the Travel first level menu-tab linked to travel.html and to be able to have the lavalamp effect even on travel.html.

A typical HTML widget consists of 3 distinct components when implementing a plug-in, including CSS, HTML layout, and the jQuery plug-in script w/ properties wanted.
Start with the HTML layout:
<ul class="lavaLamp">
<li>Home
</li>
<li>Plant a tree</li>
<li>Travel
<ul> <!-- submenus of travel parent menu -->
<li>Domestic</li>
<li>International</li>
<li>Space</li>
</ul>
</li>
<li>Ride an elephant</li>
</ul>
Note* that the lavalamp plug-in automatically add's a background list item tag that moves the background on hover event
Now let's do some basic styling with CSS::
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
The above CSS should be edited to your liking for styling purposes. Other CSS selections can be added by jQuery $('SELECTOR').addClass('className');
Now for the plug-in. Most of the javascript work is taken care by the Lava Lamp plugin itself, so all you have to do is add the .js files to your project, reference them in the web form you're using them in, or a master page, and add script tags to place the fired events in:
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>
<!-- Place this section in your webform using the lava lamp menu-->
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
Checkout the lava lamp site for the latest code updates, such as object properties for different settings.
Edit1: To fix the sub-menu bugs, visit this site to change code in the plug-in file.
Any questions, feel free to ask!