I have the following fiddle demo of a working sidenav menu with sliding sub menu contents. I followed the same demo without using Jquery (actually first using plain JS and then via CSS hover selector instead of click) and in my case sub menu doesn't slides/animates in the same way.
.submenu {
display: none;
}
.parent:hover .submenu,.submeun:hover {
display: block;
}
Is that animation due to Jquery toggle method?
$(document).ready(function() {
$('.parent').click(function() {
$('.submenu').toggle('visible');
});
});
How can I replicate the same approach without using jquery, via css or plain JS as I don't want to use jquery just for one simple sliding animation.
JSFIDDLE
This way ?
document.getElementById('home').addEventListener('click', function(e) {
var nextEl = e.target.nextElementSibling;
if(!nextEl.classList.contains('submenu')) {
return false;
}
if(nextEl.classList.contains('show')) {
nextEl.classList.remove('show')
}
else {
nextEl.classList.add('show');
}
});
.submenu {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.submenu.show {
max-height: 300px;
}
<div id="sidebar">
<ul>
<li id="home" class="parent">Home</li>
<li class="submenu"><ul >
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul> </li>
<li>Explore</li>
</ul>
</div>
You could use slideToggle() and so avoid changing classes . This is just an option
Also , keep in mind that a submenu must be inside the parent li, for example <li>Home<ul><li>Sub link</li></ul></li> . I changed your HTML accordingly
see snippet below
$(document).ready(function() {
$('.parent').click(function() {
$(this).children(".submenu").slideToggle()
});
});
body, html {
height: 100%;
margin: 0;
overflow:hidden;
}
#sidebar {
background: #DF314D;
width: 240px;
height: 100%;
}
#sidebar ul {
padding: 0;
list-style: none;
}
#sidebar ul li {
padding: 15px 20px 15px 35px;
color: white;
}
#sidebar li:hover {
background: #C9223D;
}
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="parent">Home
<ul class="submenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>Explore</li>
</ul>
</div>
Related
I've gotten my drop down working fine, however on click I would like to add a transition but I read that transitions cannot be added to display properties
Secondly, I would like to rotate the font awesome carat -180deg upon clicking my dropdown list
This is what I have got so far:
const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.fas fa-angle-down');
dropdown.addEventListener('click', function() {
options.classList.toggle('active');
});
li {
background: red;
list-style-type: none;
}
.options {
padding-left: 0;
margin-bottom: 0;
height: 100%;
}
.options li {
display: none;
padding: 10px;
transition: 350ms ease;
margin-bottom: 15px;
}
.rotate-carat {
transform: rotate(-180px);
}
.options.active li {
display: block;
opacity: 1;
transition: 350ms all;
font-size: 0.875rem;
}
<li>
<a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;"></i>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>
First, I would fix your html - your options ul should be inside the li
Then I would toggle the class on the clicked button and change your css to use the adjacent child selector.
For the options transition, I would change it from using display to using opacity, this way you can hide your ul using height and then transition the opacity of the li once your change the height back to auto
For the rotation, you need to use deg instead of px
I have commented the code below
const dropdown = document.querySelector('.dropdown-btn');
dropdown.addEventListener('click', function(event) { // pass the event into the function
// toggle the class on the clicked button
event.currentTarget.classList.toggle('active');
});
li {
background: red;
list-style-type: none;
}
.options {
display: block;
height: 0; /* height 0 to start off hidden */
overflow: hidden;
padding-left: 0;
margin-bottom: 0;
}
.options li {
display: block;
opacity: 0;
padding: 10px;
transition: opacity 0.5s ease; /* transition opacity instead of display */
margin-bottom: 15px;
font-size: 0.875rem;
}
/* add a rotation to your icon */
.fa-angle-down {
transition: transform 350ms ease;
}
.active .fa-angle-down {
transform: rotate(-180deg); /* use deg instead of px */
}
/* change your active options selector to use the adjacent sibling selector */
.active+.options {
height: auto; /* this will show the list before the opacity transitions */
}
.active+.options li {
opacity: 1;
}
<ul>
<li>
<a href="#" class="dropdown-btn">
<i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;">test</i>
</a>
<!-- fix your html and move your options ul here -->
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>
check this out!
const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.rotate-carat');
dropdown.addEventListener('click', function() {
options.classList.toggle('active');
rotate.classList.toggle('active');
});
li {
background: red;
list-style-type: none;
}
.options {
padding-left: 0;
margin-bottom: 0;
transition: 350ms all linear;
transform: scaleY(0);
/*height: 0;*/
overflow: hidden;
opacity: 0;
transform-origin: top;
}
.options li {
display: block;
padding: 10px;
margin-bottom: 15px;
font-size: 0.875rem;
}
.rotate-carat {
display: inline-block;
float: right;
transition: all 300ms linear;
}
.rotate-carat.active {
transform: rotate(180deg);
}
.options.active {
opacity: 1;
transform: scaleY(1);
/*height: 10rem;*/
/*animation: 1s height 350ms forwards;*/
}
#keyframe height {
from {
height: 10rem;
} to {
height: auto;
}
}
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<li>
<a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<span class="rotate-carat">
<i class="fas fa-angle-down"></i>
</span>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>
An easy way to add a nice transition that you see on many websites is to use translateX().
So, the menu is displayed, but outside the viewport, so you don't see it. And when it is toggled, it slides in and out.
const list = document.querySelector('ul');
const toggle = document.querySelector('#menu-toggle');
toggle.addEventListener('click', (e) => {
list.classList.toggle('active');
});
ul{
transform: translateX(-100%);
transition: transform .3s;
}
ul.active{
transform: translateX(0);
}
<button id='menu-toggle'>Show Menu</button>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
Else, i'd recommend watching this video: Kevin Powell - Animating from display none.
i refer to this thread: JS using onclick event on li to display block
From desktop is ok but how do i do the same thing but that from the mobile you can touch the "disappearing" menu and make sure that it remains visible until the next touch?
I'm currently using this code here:
function dropdown() {
document.getElementById("Menuitems").style.display = "block";
}
#dropdown ul {
display: block;
transition-duration: 1s;
}
#dropdown ul li {
display: block;
background-color: #212121;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover>ul {
/*this is what the onclick event should do*/
display: block;
}
<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</li>
</ul>
</div>
I just added an active class onclick .. the active class toggles on every click. and just add the same hover effect to active class
function dropdown() {
document.getElementById("Menuitems").classList.toggle("active");
}
#dropdown ul {
display: block;
transition-duration: 1s;
}
#dropdown ul li {
display: block;
background-color: #212121;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover>ul,
#dropdown ul li>ul.active{
/*this is what the onclick event should do*/
display: block;
}
<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</li>
</ul>
</div>
Is it possible to make multiple buttons which will show different menu's but with the same jquery script, as shown as below?
So simply said, this effect but with multiple buttons each showing their own push-menu
Could this be possible with this code as shown below?
(I see this code snippet doesn't work because of coffeescript but it's the same as this https://codepen.io/danjuls/pen/lefcG )
button = $('.mobile-menu')
container = $('.container')
body = $('body')
bodyClick = (event) ->
if not $(event.target).closest('.menu').length
body.off('click')
container.toggleClass('menu-open')
button.on 'click', (event) ->
event.stopPropagation()
event.preventDefault()
setTimeout (->
container.toggleClass('menu-open')
return
), 25
body.on 'click', (event) ->
if container.hasClass('menu-open')
bodyClick(event)
#import compass
#import url(http://fonts.googleapis.com/css?family=Open+Sans)
*,
*:after,
*::before
box-sizing: border-box
html,
body,
.container,
.pusher,
.content
height: 100%
body
background: #444
color: fab
font-weight: 300
font-family: 'Open Sans', sans-serif
a
text-decoration: none
color: #fff
outline: none
ul
list-style: none
margin: 0
padding: 0
button
border: none
padding: 0.5rem 1.2rem
background: #388a5a
color: #fff
font-family: 'Open Sans', sans-serif
font-size: 1rem
text-transform: uppercase
cursor: pointer
display: inline-block
margin: 1rem
border-radius: .3rem
button:hover
background: #2c774b
.content
overflow-y: scroll
background: #f3efe0
.content,
.content-inner
position: relative
.container
position: relative
overflow: hidden
.pusher
position: relative
left: 0
z-index: 99
height: 100%
transition: transform 0.5s
.pusher::after
position: absolute
top: 0
right: 0
width: 0
height: 0
background: rgba(0,0,0,0.2)
content: ''
opacity: 0
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s
.menu-open .pusher::after
width: 100%
height: 100%
opacity: 1
transition: opacity 0.5s
.panel
position: absolute
top: 0
left: 0
z-index: 100
visibility: hidden
width: 300px
height: 100%
background: fab
transition: all 0.5s
.panel::after
position: absolute
top: 0
right: 0
width: 100%
height: 100%
background: rgba(0,0,0,0.2)
content: ''
opacity: 1
transition: opacity 0.5s
.menu-open .panel::after
width: 0
height: 0
opacity: 0
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s
.menu-open .pusher
transform: translate3d(300px, 0, 0)
.panel
transform: translate3d(-100%, 0, 0)
.menu-open .panel
visibility: visible
transition: transform 0.5s
.panel::after
display: none
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
<div class="pusher">
<div class="panel">
<h2>Sidebar</h2>
<nav class="menu">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
<li>Data 4</li>
<li>Data 5</li>
</ul>
</nav>
</div>
<div class="content">
<div class="content-inner">
<h1>Testing a push menu</h1>
<button class="mobile-menu">Push</button>
</div>
</div>
</div>
</div>
What you could do is to link the buttons to different menu's e.g. by tagging the buttons with data-menu="menu-1" attributes and giving corresponding class to the menu inside the panel.
Then toggle the visibility of the menus inside the panel, by hiding all menus and showing the menu with the corresponding value of the button's data attribute.
I made a working fork of your demo and it is available at;
https://codepen.io/anon/pen/OmJgbm
JS:
button = $('.mobile-menu')
container = $('.container')
body = $('body')
bodyClick = (event) ->
if not $(event.target).closest('.menu').length
body.off('click')
container.toggleClass('menu-open')
button.on 'click', (event) ->
event.stopPropagation()
event.preventDefault()
$('.js-menu').hide();
menu = $(this).data('menu');
$('.' + menu).show();
setTimeout (->
container.toggleClass('menu-open')
return
), 25
body.on 'click', (event) ->
if container.hasClass('menu-open')
bodyClick(event)
HTML
<div class="container">
<div class="pusher">
<div class="panel">
<div class="js-menu menu-1" style="display:none;">
<h2>Sidebar 1</h2>
<nav class="menu">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
<li>Data 4</li>
<li>Data 5</li>
</ul>
</nav>
</div>
<div class="js-menu menu-2" style="display:none;">
<h2>Sidebar 2</h2>
<nav class="menu">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
<li>Data 4</li>
<li>Data 5</li>
</ul>
</nav>
</div>
</div>
<div class="content">
<div class="content-inner">
<h1>Testing a push menu</h1>
<button class="mobile-menu" data-menu="menu-1">Open menu 1</button>
<button class="mobile-menu" data-menu="menu-2">Open menu 2</button>
</div>
</div>
</div>
</div>
Hopefully this was what you were looking for.
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 want to create a tab and when someone hover on that tab someway below a new ul items should display with fade in and fade out effect. Till now I have used mouseenter and the new diplay items should stay there to choose other options.
HTML
<ul class="sector-nav">
<li>Residential</li>
<li>Commerical</li>
<li>Private</li>
</ul>
<ul class="res-pro residential-pro">
<li>rProject 1</li>
<li>rProject 2</li>
<li>rProject 3</li>
</ul>
<ul class="com-pro commercial-pro">
<li>cProject 1</li>
<li>cProject 2</li>
<li>cProject 3</li>
</ul>
JS
$(document).ready(function() { $('.residential-main').mouseenter(function() { $('.residential-pro').show(); }); $('.residential-main').mouseleave(function () { $('.residential-pro').hide(); }); });
$(document).ready(function() { $('.commercial-main').mouseenter(function() { $('.commercial-pro').show(); }); $('.commercial-main').mouseleave(function () { $('.commercial-pro').hide(); }); });
See jsFiddle
You don't need javascript for this as you can do it using CSS only with the :hover psuedo selector.
First you need to make the related ul elements children of their parent li:
<ul class="sector-nav">
<li>
Residential
<ul class="res-pro residential-pro">
<li>rProject 1</li>
<li>rProject 2</li>
<li>rProject 3</li>
</ul>
</li>
<li>
Commerical
<ul class="com-pro commercial-pro">
<li>cProject 1</li>
<li>cProject 2</li>
<li>cProject 3</li>
</ul>
</li>
<li>Private</li>
</ul>
Then amend the following selectors to hide/show the relevant ul elements on hover:
.sector-nav > li {
display: inline;
padding-right: 20px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-left: 20px;
position: relative;
}
.sector-nav li > ul {
display: none;
position: absolute;
}
.sector-nav > li:hover > ul {
display: block;
}
Example fiddle
The better way would be to use CSS. Here is fiddle a with fadeIn animation example.
.fadeIn {
border: 1px solid #48484A;
font-size: 18px;
opacity:0;
-webkit-transition : all 2s ease-out;
-moz-transition : all 2s ease-out;
-o-transition : all 2s ease-out;
transition : all 2s ease-out;
}
.thisText:hover .fadeIn {
opacity: 1;
}
But since your are using JQuery, you can also use his fadein function which provide animation.
Here is an example from the JQuery documentation:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeIn demo</title>
<style>
p {
position: relative;
width: 400px;
height: 90px;
}
div {
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: yellow;
background: red;
padding-top: 25px;
top: 0;
left: 0;
display: none;
}
span {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (click!)
<div><span>CENSORED!</span></div>
</p>
<script>
$( "a" ).click(function() {
$( "div" ).fadeIn( 3000, function() {
$( "span" ).fadeIn( 100 );
});
return false;
});
</script>
</body>
</html>
See the doc for more examples (JQuery doc)
If you want to use js, your solution is very close.
Just replace jquery show,hide with fadeIn and fadeOut respectively and initially hide the elements from css. However you also need to modify your html, so that children are presented under their parents.
HTML
<ul class="sector-nav">
<li class="residential-main">Residential<ul class="res-pro residential-pro">
<li>rProject 1
</li>
<li>rProject 2
</li>
<li>rProject 3
</li>
</ul>
</li>
<li class="commercial-main"><a href="#" >Commerical</a>
<ul class="com-pro commercial-pro">
<li>cProject 1
</li>
<li>cProject 2
</li>
<li>cProject 3
</li>
</ul>
</li>
<li>Private
</li>
</ul>
CSS
.sector-nav li {
display: inline;
}
.residential-pro , .commercial-pro{
display:none;
position:absolute;
padding:0;
}
.residential-pro li, .commercial-pro li{
display:block;
}
JS
$(document).ready(function () {
$('.residential-main,.residential-pro').mouseenter(function () {
$('.residential-pro').stop(false,true).offset({left:$('.residential-main').offset().left}).fadeIn();
});
$('.residential-main').mouseleave(function () {
$('.residential-pro').stop(false,true).fadeOut();
});
});
$(document).ready(function () {
$('.commercial-main,.commercial-pro').mouseenter(function () {
$('.commercial-pro').stop(false,true).offset({left:$('.commercial-main').offset().left}).fadeIn();
});
$('.commercial-main').mouseleave(function () {
$('.commercial-pro').stop(false,true).fadeOut();
});
});
http://jsfiddle.net/tEMQj/7/