Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.03.2012, 13:55
Новичок на форуме
Отправить личное сообщение для nStyle Посмотреть профиль Найти все сообщения от nStyle
 
Регистрация: 10.03.2012
Сообщений: 7

Как выделить активный пункт меню в моём случаи? может кто помочь?
Ситуация довольно простая, но не могу никак разобраться.
Есть скрипт менюшки, пункт меню синего цвета, при наведении на него он меняет цвет на зелёный (+ закруглённые края у каждого пункта меню).
Когда мышку убираем с пункта меню, оно плавно становится опять синим. Нужно сделать чтобы например при нажатии на пункт ПРОДУКЦИЯ (для примера) при переходе в раздел ПРОДУКЦИЯ этот пункт оставался зелёным (чтобы человек мог видеть в какой части сайта сейчас находится) и чтобы пункт был с теми же закруглёнными краями.
Надеюсь кто то сможет помочь разобраться, уже неделю парюсь с этой фигнёй.

Вот скрипт менюшки:

<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>


Чтобы именно этот пункт оставался зелёным с закруглёнными краями.
Буду очень благодарен если кто то сможет помочь.
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2012, 15:01
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

Это реализуется на серверной части приложения, либо, если страницы статические, то - вручную.
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2012, 15:23
Новичок на форуме
Отправить личное сообщение для nStyle Посмотреть профиль Найти все сообщения от nStyle
 
Регистрация: 10.03.2012
Сообщений: 7

Страницы статичные (обычный HTML). Просто не могу понять как добавить вручную например class="active" чтобы выделялось так-же как при наведении (только оставалось таковым во время нахождения на данной странице.
Ответить с цитированием
  #4 (permalink)  
Старый 10.03.2012, 15:30
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Можно проверить адрес страницы, и добавить нужному элементу класс
if(window.location.pathname.search('index.html') != -1) {
    $('#nav li:first').addClass('current');
}
// else if() ....
Ответить с цитированием
  #5 (permalink)  
Старый 10.03.2012, 16:24
Новичок на форуме
Отправить личное сообщение для nStyle Посмотреть профиль Найти все сообщения от nStyle
 
Регистрация: 10.03.2012
Сообщений: 7

Не получилось таким методом. Куда именно вставлять код? Может просто не правильно делаю что-то.
Ответить с цитированием
  #6 (permalink)  
Старый 10.03.2012, 17:20
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Это пример кода. Вставлять в $(document).ready
Ответить с цитированием
  #7 (permalink)  
Старый 10.03.2012, 19:54
Новичок на форуме
Отправить личное сообщение для nStyle Посмотреть профиль Найти все сообщения от nStyle
 
Регистрация: 10.03.2012
Сообщений: 7

Всё равно зелёным не подсвечивается.

<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin);
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(){
	if(window.location.pathname.search('index.html') != -1) {
$('#nav li:first').addClass('current');
}
	$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 class="current"><a href="index.html">Главная</a></li>
        <li><a href="products.html">Продукция</a></li>
        <li><a href="articles.html">Статьи</a></li>
        <li><a href="video.html">Видео</a></li>
        <li><a href="patents.html">Патенты</a></li>
        <li><a href="results.html">Результаты</a></li>
        <li><a href="contacts.html">Контакты</a></li>
    </ul>
</div>



Где может быть теперь косяк? Извиняюсь заранее за глупые вопросы, просто с явой не работаю.
Ответить с цитированием
  #8 (permalink)  
Старый 10.03.2012, 20:33
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Так в css нету класса current.
Ответить с цитированием
  #9 (permalink)  
Старый 11.03.2012, 01:36
Новичок на форуме
Отправить личное сообщение для nStyle Посмотреть профиль Найти все сообщения от nStyle
 
Регистрация: 10.03.2012
Сообщений: 7

И как его туда прописать? У меня получается прописать только чтобы цветом выделяло. А хотелось бы чтобы как и при наведении на него чтобы было выделено зелёным цветом и с закруглёнными углами. Этого у меня как то не получилось.
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2012, 01:45
Новичок на форуме
Отправить личное сообщение для nStyle Посмотреть профиль Найти все сообщения от nStyle
 
Регистрация: 10.03.2012
Сообщений: 7

Разобрался с закруглёнными углами, теперь не понимаю почему он выделяет только часть кнопки, по середине зелёное (с закруглёнными краями) а с права и с лева всёравно куски синего цвета кнопки. Как это можно поправить? Вот из css:

#header div ul li.current a {
	background:#9dd12e;
	 -moz-border-radius:5px; 
	 -khtml-border-radius:5px; 
	 -webkit-border-radius:5px; 
	 border-radius:5px;
}


В таком виде во всяком случаи добавляет цвет на кнопку активную, но почему не полностью её заполняет (пробывал и длинну регулировать, всёравно без результативно).
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выделить активный пункт? dididima Общие вопросы Javascript 2 03.01.2011 01:29
Меню на дивах Golovastik (X)HTML/CSS 38 13.09.2010 09:10
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Может кто подсказать как можно сделать submit из левого фрейма в правый maxander Internet Explorer 1 28.11.2008 10:15
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 15:56