Доброго всем время провождения..)
Хочу реализовать такое же меню как в римские-каникулы29.рф. Чтобы оно выдвигалось при наведении мышки и при клике закрывалось и переходило на выбранную ссылку.
Делаю как там:
HTML:
<menu>
<ul>
<li><a href="#aboutus" class="menuabout white myriadpro">История</a></li>
<li><a href="#rimsterms" class="menurimsterms white myriadpro">Римские термы</a></li>
<li><a href="#spa-capsul" class="menuspa-capsul white myriadpro">Sра-капсула</a></li>
<li><a href="#masage" class="menumasage white myriadpro">Массаж</a></li>
<li><a href="#obertivanie" class="menuobertivanie white myriadpro">Обертывание</a></li>
<li><a href="#vizage" class="menuvizage white myriadpro">Визаж</a></li>
<li><a href="#manikure" class="menumanikure white myriadpro">Маникюр</a></li>
<li><a href="#pedikure" class="menupedikure white myriadpro">Педикюр</a></li>
<li><a href="#solarij" class="menusolarij white myriadpro">Солярий</a></li>
<li><a href="#usgellery" class="menuusgellery white myriadpro">Галерея</a></li>
<li><a href="#contactus" class="menucontactus white myriadpro">Контакты</a></li>
</ul>
<img src="images/hrwhite.gif" class="hrwhite">
<div class="menu_info">
<img src="images/logosmall.png" class="logo">
<p class="menu_text">SPA-Салон “Римские Каникулы”<br />Тел.: 8 (8182) 44-00-90<br />Romanholidays@mail.ru</p>
</div>
<div class="tab">
<a href="#" class="opentab">
<table>
<tr>
<td><span></span></td>
</td>
</table>
</a>
</div>
</menu>
CSS:
/* menu */
menu {display:none; position:fixed; width:675px; height:100%; background:#eec254; z-index:1000; left:-655px; margin-top:0px}
menu ul {float:left; width:530px; margin-top:30px; margin-left:40px !important; }
menu ul li {clear:left !important; width:675px !important; margin-left:0px !important; line-height:34px;}
menu ul li a {font-size:36px; color:#fff; font-weight:bold;}
menu ul li a:hover {background-color:#fff;color:#000;}
menu ul li a.black {color:#000 !important}
menu img.hrwhite {float:left; margin-left:40px; margin-top:15px;}
menu a.login {float:left; width:500px; margin-left:40px; font-size:44px; color:#fff}
menu .menu_info {float:left;clear:both; width:675px;}
menu .menu_text {margin-top:29px;color:#fff;font-family:Tahoma, Geneva, sans-serif;font-size:11px;}
menu img.logo {float:left; margin-left:40px; margin-top:16px; margin-right:13px;}
menu div.tab {position:absolute; right:0px; width:60px; height:100%; background-color:#eec254;}
menu div.tab a {display:block; float:left; width:60px; height:100%; background:#eec254;}
menu div.tab a table {height:100%}
menu div.tab a table tr td {height:100%; vertical-align:middle}
menu div.tab a table tr td span {float:left; width:18px; height:75px; margin-left:20px; background: url(../images/menuright.gif) no-repeat top left}
menu div.tab a table tr td span.right {background:url(../images/menuright.gif) no-repeat bottom left;}
menu div.tab a table tr td span.left {background:url(../images/menuleft.gif) no-repeat bottom left;}
javascript
// menu expand
$('menu').hover(function() {
$(this).parents().find('menu').delay(300).stop(true, true).animate({'left' : "-40px" }, 500);
$(this).find('span').addClass('left');
}, function() {
$(this).parents().find('menu').stop(true, true).animate({'left' : "-655px" });
$(this).find('span').addClass('right');
$(this).find('span').removeClass('left');
});
// close left menu on click
$('menu ul li a').click(function () {
$(this).parents().find('menu').stop(true, true).animate({'left' : "-655px" });
})
// menu scroll
$('menu ul li a, a[class$=next], ul.submenu li a').click(function () {
var target = $(this).attr('href');
$.scrollTo(target, 1000);
$('ul.submenu li a').removeClass('active').filter('a[href='+target+']').addClass('active');
if ($('menu span').is('.left'))
$('a.opentab').click(); // Close the open menu.
var currentx = $(window).scrollLeft();
var target = $(target).offset().left;
if (currentx > target) {
var change = '+=100px';
} else if (currentx == target) {
var change = '=0px';
}
else
var change = '-=100px';
$('ul.main').animate({'backgroundPosition': change }, 1000);
return false;
});
Так не работает.. (
Помогите разобраться.
