Перейти к содержимому



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

#1 WebMaster

WebMaster
  • Пользователь
  • 97 сообщений
  • Репутация: 3
0

Отправлено 21 Сентябрь 2012 - 15:09

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

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

 

 

  • 0

#2 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 21 Сентябрь 2012 - 16:20

тебя не поймешь, то ты знаток html5, то уже не программист,
это вполне реализуется и без js погугли решений валом.
  • 0

#3 WebMaster

WebMaster
    Topic Starter
  • Пользователь
  • 97 сообщений
  • Репутация: 3

Отправлено 21 Сентябрь 2012 - 20:33

не, я потом еще анимацию добавлю... HTML5 знаю, JS нет.
  • 0

#4 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 22 Сентябрь 2012 - 01:43

а причем здесь анимация? ТЫЦ
  • 0

#5 WebMaster

WebMaster
    Topic Starter
  • Пользователь
  • 97 сообщений
  • Репутация: 3

Отправлено 22 Сентябрь 2012 - 04:34

Чтобы плавно появлялась картинка при наведении а не просто резко выскакивала...
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 22 Сентябрь 2012 - 19:33

Для смены изображения на кнопках меню 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) — menu1.png
  • 1

#7 leonid

leonid
  • Пользователь
  • 16 сообщений
  • Репутация: 0

Отправлено 24 Сентябрь 2012 - 22:49

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


Оформление форума – IPBSkins.ru