Javascript.RU

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

Меню на jquery, как доделать?
Доброго времени суток. Помогите доделать меню. Сейчас все выглядит так

Вот исходный текст

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Михаил Раскат - Искуство без права на ошибку.</title>
<style type="text/css">
	h2	{clear:both;padding-top:20px;}
	ul {list-style:none;margin:0;padding:0;}
	li {float:left;width:100px; height: 584px;margin:0;padding:0;text-align:center;}
	li a {display:block;height:100%;color:#FFF;text-decoration:none;}
	li a:hover, li a:focus, li a:active {background-position:-100px 0;}
	#k a {background:url(img/menu_painting.jpg) repeat 0 0;}
	#b a {background:url(img/menu_photo.jpg) repeat 0 0;}
	#c a {background:url(img/menu_glas.jpg) repeat 0 0;}
	#d a {background:url(img/menu_museum.jpg) repeat 0 0;}
	#e a {background:url(img/menu_exgibition.jpg) repeat 0 0;}
	#f a {background:url(img/menu_about.jpg) repeat 0 0;}
	#g a {background:url(img/menu_blog.jpg) repeat 0 0;}
	#h a {background:url(img/menu_feedback.jpg) repeat 0 0;}
</style>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(function(){
	$('#sl a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(-200px 0)"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "0 0"})
			}})
		})
});
</script>
</head>
<body>

<h2>Главный модуль</h2>
	<ul id="sl">
		<li id="k"><a href="#">Painting</a></li>
        <li id="b"><a href="#">Photo</a></li>
        <li id="c"><a href="#">Glas</a></li>
        <li id="d"><a href="#">Museum</a></li>
        <li id="e"><a href="#">Exgibition</a></li>
        <li id="f"><a href="#">About</a></li>
        <li id="g"><a href="#">Blog</a></li>
        <li id="h"><a href="#">Feedback</a></li>
	</ul>
</body>
</html>
Нужно чтобы вместо надписи "Главный модуль" над меню при наведении на ссылку отображалось название раздела. Это вообще реально или все переделывать?
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2010, 22:11
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Прикольная менюха.
Цитата:
Это вообще реально или все переделывать?
Это реально
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2010, 22:26
Интересующийся
Отправить личное сообщение для progressive Посмотреть профиль Найти все сообщения от progressive
 
Регистрация: 26.03.2010
Сообщений: 11

Сообщение от Shaci Посмотреть сообщение
Прикольная менюха.

Это реально
Тогда подскажите как?
Ответить с цитированием
  #4 (permalink)  
Старый 26.03.2010, 22:35
Интересующийся
Отправить личное сообщение для progressive Посмотреть профиль Найти все сообщения от progressive
 
Регистрация: 26.03.2010
Сообщений: 11

Теперь исходный текст такой

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Михаил Раскат - Искуство без права на ошибку.</title>
<style type="text/css">
        h2      {clear:both;padding-top:20px;}
        ul {list-style:none;margin:0;padding:0;}
        li {float:left;width:100px; height: 584px;margin:0;padding:0;text-align:center;}
        li a {display:block;height:100%;color:#FFF;text-decoration:none;}
        li a:hover, li a:focus, li a:active {background-position:-100px 0;}
        #k a {background:url(img/menu_painting.jpg) repeat 0 0;}
        #b a {background:url(img/menu_photo.jpg) repeat 0 0;}
        #c a {background:url(img/menu_glas.jpg) repeat 0 0;}
        #d a {background:url(img/menu_museum.jpg) repeat 0 0;}
        #e a {background:url(img/menu_exgibition.jpg) repeat 0 0;}
        #f a {background:url(img/menu_about.jpg) repeat 0 0;}
        #g a {background:url(img/menu_blog.jpg) repeat 0 0;}
        #h a {background:url(img/menu_feedback.jpg) repeat 0 0;}
</style>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(function(){
        $('#sl a')
                .css( {backgroundPosition: "0 0"} )
                .mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})
                        $("#h2").html($(this).html());
                })
                .mouseout(function(){
                        $(this).stop().animate({backgroundPosition:"(-200px 0)"}, {duration:200, complete:function(){
                                $(this).css({backgroundPosition: "0 0"})                                
                        }})
                        $("#h2").html("Главный модуль");
                })
});
</script>
</head>
<body>
<h2 id="h2">Главный модуль</h2>
        <ul id="sl">
        <li id="k"><a href="#">Painting</a></li>
        <li id="b"><a href="#">Photo</a></li>
        <li id="c"><a href="#">Glas</a></li>
        <li id="d"><a href="#">Museum</a></li>
        <li id="e"><a href="#">Exgibition</a></li>
        <li id="f"><a href="#">About</a></li>
        <li id="g"><a href="#">Blog</a></li>
        <li id="h"><a href="#">Feedback</a></li>
        </ul>
</body>
</html>
как работает посмотреть можно тамже.

Как сделать так, чтобы с картинок текст убрать, а в верху выводился. Или в верху вообще картинки другие выводились (вместо надписей с названием раздела)?

Последний раз редактировалось progressive, 26.03.2010 в 22:37.
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2010, 02:41
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Цитата:
Как сделать так, чтобы с картинок текст убрать, а в верху выводился.
Попробуйте так, текст из ссылок запихнуть в id, и:
<ul id="sl">
        <li id="k"><a id="Painting" href="#"></a></li>
        <li id="b"><a id="Photo" href="#"></a></li>
        <li id="c"><a id="Glas" href="#"></a></li>
        <li id="d"><a id="Museum" href="#"></a></li>
        <li id="e"><a id="Exgibition" href="#"></a></li>

        <li id="f"><a id="About"href="#"></a></li>
        <li id="g"><a id="Blog" href="#"></a></li>
        <li id="h"><a id="Feedback" href="#"></a></li>
        </ul>


и здесь одну строку заменить $("#h2").html($(this).html()); на $("#h2").html($(this).attr('id'));

.mouseover(function(){
                        $(this).stop().animate({backgroundPosition:"(-100px 0)"}, {duration:500})
                        $("#h2").html($(this).attr('id'));
                })
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2010, 08:42
Интересующийся
Отправить личное сообщение для progressive Посмотреть профиль Найти все сообщения от progressive
 
Регистрация: 26.03.2010
Сообщений: 11

Вау! Все работает как надо. Спасибо!

А как будет выглядеть скрипт, если вместо надписей с названиями раздел мне захочется выводить картинки?
Ответить с цитированием
  #7 (permalink)  
Старый 28.03.2010, 16:09
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Shaci,
А зачем именно id? У всех элементов есть замечательный аттрибут title.
Ответить с цитированием
  #8 (permalink)  
Старый 29.03.2010, 00:47
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

subzey,
угу.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 17:30
Подскажите как в superfish.js меню SAA jQuery 5 20.12.2009 21:54
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49