Огромная просьба помочь
нужно сделать такое меню
Я пока четвертый день в jQuery, так что вот сварганил
http://test-my-test.ucoz.com/menu/index.html
Являясь конченым педантом хочу сделать скрипт кроссбраузерным
скрипт слишком повторяем
и не работает в
IE <9
JS
$(document).ready(function(){
var link = window.location.pathname;
$('.menu_top ul a[href="'+link+'"]').parent().parent().addClass('active');
});
$(document).ready(function() {
$('.in_menu_h').mouseenter(function() {
$('.menu_top .active').children('.me_d7').css('height',($('.active').children('.me_d7').height()+5)).css('width',($('.active').children('.me_d7').width()+2));
});
$('.in_menu_h').mouseleave(function() {
$('.menu_top .active').children('.me_d7').css('height',($('.active').children('.me_d7').height()-5)).css('width',($('.active').children('.me_d7').width()-2));
$('.menu_top .active').children('.me_d7').css('border-radius', '10px 10px 0px 0px');
$('.menu_top .active').prev('li').children('.me_d7').css('border-radius', '0px 0px 6px 0px');
$('.menu_top .active').next('li').children('.me_d7').css('border-radius', '0px 0px 0px 6px');
$('.menu_top .active').children('.me_d7').css({"background-color":"#e61b23","border-bottom":"1px solid #e61b23","border-top":"1px solid #000000","border-right":"1px solid #000000","border-left":"1px solid #000000","box-shadow":"none"});
if ($.browser.msie && $.browser.version < 9){
$(this).children('.me_d7').css('height',($(this).children('.me_d7').height()-5));
};
});
$('.menu_top .active').each(function() {
$(this).children('.me_d7').css('border-radius', '10px 10px 0px 0px');
$(this).prev('li').children('.me_d7').css('border-radius', '0px 0px 5px 0px');
$(this).next('li').children('.me_d7').css('border-radius', '0px 0px 0px 5px');
$(this).children('.me_d7').css({"background-color":"#e61b23","border-bottom":"1px solid #e61b23","border-top":"1px solid #000000","border-right":"1px solid #000000","border-left":"1px solid #000000","box-shadow":"none"});
$(this).children('.me_d7').css('width',($(this).children('.me_d7').width()-2)).css('height',($(this).children('.me_d7').height()-5));
if ($.browser.msie && $.browser.version < 9){
$(this).children('.me_d7').css('height',($(this).children('.me_d7').height()+5));
};
});
$('.in_menu_h li').mouseenter(function() {
$('.in_menu_h li .me_d7').css('border-radius', '0px 0px 0px 0px');
$('.in_menu_h li .me_d7').css('border-radius', '0px 0px 0px 0px');
$('.in_menu_h li .me_d7').css({"background-color":"#636262","border-bottom":"1px solid #000000","border-top":"0px solid #000000","border-right":"0px solid #000000","border-left":"0px solid #000000","box-shadow":"inset 0 -9px 10px -10px #000"});
$(this).children('.me_d7').css('border-radius', '10px 10px 0px 0px');
$(this).prev('li').children('.me_d7').css('border-radius', '0px 0px 5px 0px');
$(this).next('li').children('.me_d7').css('border-radius', '0px 0px 0px 5px');
$(this).children('.me_d7').css({"background-color":"#e61b23","border-bottom":"1px solid #e61b23","border-top":"1px solid #000000","border-right":"1px solid #000000","border-left":"1px solid #000000","box-shadow":"none"});
$(this).children('.me_d7').css('width',($(this).children('.me_d7').width()-2)).css('height',($(this).children('.me_d7').height()-5));
if ($.browser.msie && $.browser.version < 9){
$(this).children('.me_d7').css('height',($(this).children('.me_d7').height()+5));
};
});
$('.in_menu_h li').mouseleave(function() {
$(this).children('.me_d7').css({"background-color":"#636262","border-bottom":"1px solid #000000","border-top":"0px solid #000000","border-right":"0px solid #000000","border-left":"0px solid #000000","box-shadow":"inset 0 -9px 10px -10px #000"});
$(this).prev('li').children('.me_d7').css('border-radius', '0px 0px 0px 0px');
$(this).next('li').children('.me_d7').css('border-radius', '0px 0px 0px 0px');
$(this).children('.me_d7').css('border-radius', '0px 0px 0px 0px');
$(this).children('.me_d7').css('width',($(this).children('.me_d7').width()+2)).css('height',($(this).children('.me_d7').height()+5));
if ($.browser.msie && $.browser.version < 9){
$(this).children('.me_d7').css('height',($(this).children('.me_d7').height()-5));
};
});
});
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="admin" />
<title>Меню</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<link href="reset.css" type="text/css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="menu_top">
<div class="menu_h">
<div class="menu_1h"></div>
<ul class="in_menu_h">
<li class="me_l1"><div class="me_d7"><a href="/menu/index.html"><div id="menu1_in"></div></a></div></li>
<li class="me_l2"><div class="me_d7"><a href="/menu/1.html">бла</a></div></li>
<li class="me_l3"><div class="me_d7"><a href="/menu/2.html">бла</a></div></li>
<li class="me_l4"><div class="me_d7"><a href="/menu/3.html">бла</a></div></li>
<li class="me_l5"><div class="me_d7"><a href="/menu/4.html">бла</a></div></li>
<li class="me_l6"><div class="me_d7"><a href="/menu/5.html"><div id="_online_b">бла</div></a></div></li>
<li class="me_l7"><div class="me_d7"><a href="/menu/6.html">бла</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
.menu_top{
height: 58px;
width: 1010px;
margin: 20px auto;
}
.menu_h{
overflow: hidden;
z-index: 55;
position: absolute;
background-color: #e61b23;
height: 58px;
width: 1010px;
background: #e61b23;
font:16px myriad pro, tahoma;
border-radius: 10px 10px 0px 0px;
behavior: url(/PIE/PIE.php);
}
.menu_1h{
background-color: #636262;
width: 980px;
height: 10px;
margin: 0px 20px;
position: absolute;
}
.in_menu_h{
overflow: hidden;
z-index: 2;
width: 1012px;
position: absolute;
height: 55px;
background: transparent;
border-radius: 10px 10px 0px 0px;
}
.in_menu_h li{
background-color: transparent!important;
float:left;
height: 60px;
}
.in_menu_h li .me_d7{
background-color: #636262;
height: 54px;
border-bottom: 1px solid #000000;
box-shadow: inset 0 -9px 10px -10px #000;
overflow: hidden;
}
.in_menu_h li .me_d7:hover{
background-color: #e61b23;
border-bottom:1px solid #e61b23;
}
.in_menu_h a{
height: 37px;width: 100%;
display: block;
text-align: center;padding-top: 18px;
text-decoration: none;
color:#000000;
cursor: pointer;
}
#head_tbl td{
vertical-align: top!important;
}
#menu1_in{
margin: auto;
width: 29px;
height: 22px;
background-image: url(/images/mmm_l.png);
background-repeat: no-repeat;
}
.me_l1 .me_d7{
border-top-left-radius: 10px!important;
width: 85px;
}
.active .me_d7{
background-image: none;
}
.me_l2 .me_d7{
width: 190px;
}
.me_l3 .me_d7{
width: 130px;
}
.me_l4 .me_d7{
width: 115px;
}
.me_l5 .me_d7{
width: 165px;
border-bottom-right-radius: 0px!important;
}
.me_l6 .me_d7{
background-color: #636262!important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
width: 190px!important;
height: 54px!important;
border: none!important;
border-bottom:1px solid #000000!important;
box-shadow:inset 0 -9px 10px -10px #000!important;
}
.me_l6 a{
padding-top: 13px!important;
color: #ffffff!important;
}
#_online_b{
border-radius: 10px;
padding-top: 5px;
background-color: #e61b23;
width: 150px;
height: 25px;
margin: 0 auto;
}
.me_l7 .me_d7{
border-bottom-left-radius: 0px!important;
border-top-right-radius: 10px!important;
width: 135px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Скрипт хреновенький так что дорогие форумчане огромная просьба помочь!!!
