Ситуация довольно простая, но не могу никак разобраться.
Есть скрипт менюшки, пункт меню синего цвета, при наведении на него он меняет цвет на зелёный (+ закруглённые края у каждого пункта меню).
Когда мышку убираем с пункта меню, оно плавно становится опять синим. Нужно сделать чтобы например при нажатии на пункт ПРОДУКЦИЯ (для примера) при переходе в раздел ПРОДУКЦИЯ этот пункт оставался зелёным (чтобы человек мог видеть в какой части сайта сейчас находится) и чтобы пункт был с теми же закруглёнными краями.
Надеюсь кто то сможет помочь разобраться, уже неделю парюсь с этой фигнёй.
Вот скрипт менюшки:
<style type="text/css">
<!--
@import url([url]http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin);[/url]
body {margin:0; padding:0; background:#5d802c;}
#nav li{float:right; margin:5px 10px 5px 0; background:#4DA4D1; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!-- rounded corners for IE -->
<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>
<script>
$(document).ready(function(){
$nav_li=$("#nav li");
$nav_li_a=$("#nav li a");
var animSpeed=450; //Скорость затемнения
var hoverTextColor="#fff"; //Цвет текста при наведении мыши
var hoverBackgroundColor="#9dd12e"; //Цвет фона при наведении мыши
var textColor=$nav_li_a.css("color");
var backgroundColor=$nav_li.css("background-color");
//анимация цвета текста
$nav_li_a.hover(function() {
var $this=$(this);
$this.stop().animate({ color: hoverTextColor }, animSpeed);
},function() {
var $this=$(this);
$this.stop().animate({ color: textColor }, animSpeed);
});
//анимация цвета фона
$nav_li.hover(function() {
var $this=$(this);
$this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
},function() {
var $this=$(this);
$this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
});
});
</script>
А вот соответственно и сама менюшка:
<div id="nav">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="#">Продукция</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Видео</a></li>
<li><a href="#">Патенты</a></li>
<li><a href="#">Результаты</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
Надо сделать чтото вроде того:
<li class="current"><a href="#">Продукция</a></li>
Чтобы именно этот пункт оставался зелёным с закруглёнными краями.
Буду очень благодарен если кто то сможет помочь.
