Форум

progressive · #1 (**permalink**) 26.03.2010, 16:25

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

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

Код:

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

Нужно чтобы вместо надписи "Главный модуль" над меню при наведении на ссылку отображалось название раздела. Это вообще реально или все переделывать?

Shaci · #2 (**permalink**) 26.03.2010, 22:11

Прикольная менюха.

Цитата:

Это вообще реально или все переделывать?

Это реально

progressive · #3 (**permalink**) 26.03.2010, 22:26

Сообщение от Shaci

Прикольная менюха.

Это реально

Тогда подскажите как?

progressive · #4 (**permalink**) 26.03.2010, 22:35

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

Код:

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

как работает посмотреть можно тамже.

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

Shaci · #5 (**permalink**) 27.03.2010, 02:41

Цитата:

Как сделать так, чтобы с картинок текст убрать, а в верху выводился.

Попробуйте так, текст из ссылок запихнуть в 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'));
                })

progressive · #6 (**permalink**) 27.03.2010, 08:42

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

А как будет выглядеть скрипт, если вместо надписей с названиями раздел мне захочется выводить картинки?

subzey · #7 (**permalink**) 28.03.2010, 16:09

Shaci,
А зачем именно id? У всех элементов есть замечательный аттрибут title.

Shaci · #8 (**permalink**) 29.03.2010, 00:47

subzey,
угу.

Форум

Справочник

Discord чат

Курсы javascript