Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Помогите с хитрым меню (https://javascript.ru/forum/events/14010-pomogite-s-khitrym-menyu.html)

MiHALbI4 24.12.2010 01:17
Помогите с хитрым меню
 
В общем я с таким сталкиваюсь впервые, так что прошу вашей помощи. Есть горизонтальное меню, пункты которого (тег li) не фиксированы по ширине и зависят от текста в них. Хитрость в том, что по бокам у этого пункта есть картинки и при наведении они должны меняться. Долго ломал голову и сделал через JavaScript. Но вот косяк из-за использования id:


Дальше меня не хватило :)

Вот ту выкладываю архив с данным меню: http://rghost.ru/3728840

Если кто знает как помочь, то можете править прямо в указанном мной шаблоне. Заранее спасибо!

Aetae 24.12.2010 01:54
Это делается элементарно через hover. Даже смотреть лень.

Gvozd 24.12.2010 02:31
Если вы не хотите изучать основы, и вам не подходит предыдущий овтет, то для вас более подойдет следующее

Цитата:
Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

ksa 24.12.2010 10:41
Цитата:
Сообщение от MiHALbI4
Вот ту выкладываю архив с данным меню
Если сделаешь тут простой тестовый пример - можно будет показать чего и как...

MiHALbI4 24.12.2010 12:00
Ну как тогда через ховер заменить не только бэкграунд, но и две боковые картинки?

dmitriymar 24.12.2010 13:29
Цитата:
Сообщение от MiHALbI4
Ну как тогда через ховер заменить не только бэкграунд, но и две боковые картинки?
мож стоит сначала почитать что такое ховер прежде чем картинки им менять?:yes:смысл? сделай две картинки нажатая и нет и взамо меняй их-чем работать с 6ю элементами проще с двумя

ksa 24.12.2010 14:12
Цитата:
Сообщение от MiHALbI4
как тогда через ховер заменить не только бэкграунд, но и две боковые картинки?
Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style-type: none;
}
li {
	float: left;
	height: 20px;
	margin-right: 10px;
	background-color: silver;
}
li:hover {
	background-color: blue;
}
li * {
	float: left;
}
li div {
	height: 100%;
	width: 20px;
	background-color: orange;
}
li:hover div {
	background-color: green;
}
</style>
<script>
</script>
</head>
<body>
<ul>
	<li>
		<div class='left'></div>
		<p>Item 1</p>
		<div class='right'></div>
	</li>
	<li>
		<div class='left'></div>
		<p>Item 2</p>
		<div class='right'></div>
	</li>
	<li>
		<div class='left'></div>
		<p>Item 3</p>
		<div class='right'></div>
	</li>
</ul>
</body>
</html>

Aetae 25.12.2010 03:04
Вложений: 1
!6! картинок на кнопку это бред.
На самом деле это делается примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<style type="text/css">
	* {margin:0;padding:0}
	.m,.m li,.m a,.m span {display:block;float:left}
	.m a,.m span {height:38px;background-image:url('http://javascript.ru/forum/attachment.php?attachmentid=610&stc=1&d=1293235420')}
	.m li {padding-right:25px}
	.m a {padding-left:25px;background-position:-25px 0;position:relative}
	.m span {width:25px;right:-25px;position:absolute}
	.m a:hover {background-position:-25px 38px}
	.m a:hover span {background-position:0 38px}
	</style>
</head>
<body>
	<ul class="m">
		<li><a href="#"><span></span>Пункт</a></li>
		<li><a href="#"><span></span>Пункт номер два</a></li>
	</ul>
</body>
</html>

dmitriymar 25.12.2010 08:38
Aetae,
посчитай сам.в том варианте что он представил первый раз. 2 боковые секции одного окраса+2 бок секции другого окраса-это 4 общих элемента для двух кнопок+2 тела 2х кнопок-итого 6 элементов. а по поводу 6 картинок -я не писал-там чётко написано-6 ЭЛЕМЕНТОВ!! ты ведь сам сделал через смену картинок-и не важно бекграунд или прямо имидж вязать

Aetae 25.12.2010 08:49
0_o? У него в архивчике 6 пнг картинок.


Часовой пояс GMT +3, время: 03:59.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице