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



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

#1

Поделиться сообщением #1



WebMaster

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

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

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

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. CMS для новичка
  2. Выпадающее меню на JavaScript
  3. Удобное меню для многостраничного сайта
  4. Создание меню для Html, которое будет обновляться на всех страницах сайта...
  5. Как сделать меню без перезагрузки контента?

#2

Поделиться сообщением #2



surfer

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

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

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

#3

Поделиться сообщением #3



WebMaster

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

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

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

#4

Поделиться сообщением #4



surfer

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

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

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

#5

Поделиться сообщением #5



WebMaster

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

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

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

#6

Поделиться сообщением #6



yury

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

Отправлено 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

Поделиться сообщением #7



leonid

leonid
  • Неактивные
  • 16 сообщений
  • Репутация: 0

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

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


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