Меню для сайта и операторы выбора на JS

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Меню для сайта и операторы выбора на JS

Опции

WebMasterOleg

Topic Starter сообщение

21.9.2012, 16:09; Ответить: WebMasterOleg

Сообщение #1

Участник

Группа: User
Сообщений: 101
Регистрация: 14.5.2012
Поблагодарили: 0 раз
Репутация:

Всем привет! Кто не помнит, я не программист! Поэтому снова к Вам за помощью! В общем есть горизонтальное меню. Есть кнопки по умолчанию. Есть нарезанные картинки кнопок, которые должны появляться при наведении. Хотелось бы узнать как это реализовать на JS. У меня установлен и настроен JQuery.

Мне необходимо чтобы при наведении мыши на какой либо пункт меню вылазила другая картинка. Изначально установлена обычная горизонтальная полоса градиента. Потом при наведении на страницу, например, Главная, подключается изображение с вдавленым градиентом, например. И получается динамическое меню. Какой пример подскажите?

Ответить с цитированием данного сообщения

sc2r2bey sc2r2bey 21.9.2012, 17:20; Сообщений: 2596 Поблагодарили: 10 раз Репутация: 73 Просмотр профиля	21.9.2012, 17:20; Ответить: sc2r2bey Сообщение #2
Топовый постер Группа: User Сообщений: 2596 Регистрация: 22.8.2010 Поблагодарили: 10 раз Репутация: 73	тебя не поймешь, то ты знаток html5, то уже не программист, это вполне реализуется и без js погугли решений валом. -------------------- Заметки о разработке и не только программирую web и для we

WebMasterOleg Topic Starter WebMasterOlegTopic Starter 21.9.2012, 21:33; Сообщений: 101 Поблагодарили: 0 раз Репутация: 2 Просмотр профиля	Topic Starter 21.9.2012, 21:33; Ответить: WebMasterOleg Сообщение #3
Участник Группа: User Сообщений: 101 Регистрация: 14.5.2012 Поблагодарили: 0 раз Репутация: 2	не, я потом еще анимацию добавлю... HTML5 знаю, JS нет.

sc2r2bey sc2r2bey 22.9.2012, 2:43; Сообщений: 2596 Поблагодарили: 10 раз Репутация: 73 Просмотр профиля	22.9.2012, 2:43; Ответить: sc2r2bey Сообщение #4
Топовый постер Группа: User Сообщений: 2596 Регистрация: 22.8.2010 Поблагодарили: 10 раз Репутация: 73	а причем здесь анимация? ТЫЦ -------------------- Заметки о разработке и не только программирую web и для we

WebMasterOleg Topic Starter WebMasterOlegTopic Starter 22.9.2012, 5:34; Сообщений: 101 Поблагодарили: 0 раз Репутация: 2 Просмотр профиля	Topic Starter 22.9.2012, 5:34; Ответить: WebMasterOleg Сообщение #5
Участник Группа: User Сообщений: 101 Регистрация: 14.5.2012 Поблагодарили: 0 раз Репутация: 2	Чтобы плавно появлялась картинка при наведении а не просто резко выскакивала...

yury_mw

22.9.2012, 20:33; Ответить: yury_mw

Сообщение #6

Завсегдатай

Группа: User
Сообщений: 648
Регистрация: 13.5.2009
Поблагодарили: 0 раз
Репутация:

195

Для смены изображения на кнопках меню JS не требуется.
Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>tst</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul#menu{
list-style: none;
width: 1000px;
height: 36px;
background: url(menu1.png) 0 0 repeat-x;
}
ul#menu li{
float: left;
padding-left: 1px;
font: normal 12px/38px Verdana, Geneva, "DejaVu Sans", sans-serif;
height: 36px;
background: url(menu1.png) 0 -36px no-repeat;
}
ul#menu li a{
float: left;
padding: 0 14px;
height: 36px;
color: #333;
text-decoration: none;
text-transform: uppercase;
}
ul#menu li a:hover,
ul#menu li a#cur{
color: #90f;
background: url(menu1.png) 0 -72px repeat-x;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Наши преимущества</a></li>
<li><a href="#">Прайс-лист и каталог</a></li>
<li><a href="#" id="cur">Контакты</a></li>
<li><a href="#">Регистрация продукта</a></li>
</ul>
</body>
</html>

Картинка, используемая в примере (menu1.png размером 1 на 108 px) —

leonid_mw

24.9.2012, 23:49; Ответить: leonid_mw

Сообщение #7

Новичок

Группа: User
Сообщений: 16
Регистрация: 24.9.2012
Поблагодарили: 0 раз
Репутация:

Меня как раз такая же проблема волновала, так что спасибо Постояльцу за детальный код, просто можно и знать какой то язык программирования, но клеманет и не можешь из памяти вытянуть нужный код.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Посоветуйте массажер для спины и шеи	11	Boymaster	920	Сегодня, 18:24 автор: Arsenwenger
⭕Антидетект браузер AdsPower для эффективной работы с мультиаккаунтами!	84	AdsPower	24574	Сегодня, 16:35 автор: AdsPower
Betatransfer.net - прием платежей для HIGH RISK проектов, интернет эквайринг и мерчант онлайн оплат	55	arendator	35104	Сегодня, 2:12 автор: arendator
Rebex.io – Ваша инновационная платформа для обмена криптовалюты!	3	Rebex	973	Вчера, 20:50 автор: Rebex
Обучение Email Рассылкам + Софт Для Автоматизации (100к в сутки с сервера)	10	zennoboss	4664	Вчера, 5:20 автор: Skyworker

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 25.4.2024, 20:25

Дизайн