Делаем top menu на jquery

Satan · 22 Июн 2013

Top menu - плавно появляющееся меню на jquery.

Собственно вот такое меню как на скриншоте ниже, при наведении курсора, плавно выдвигается сверху и также плавно уезжает назад, когда указатель мыши отводится

Добавляем в начало страницы, обычно между тегами <HEAD></HEAD>

1.<script type="text/javascript" src="jquery-1.4.3.min.<acronym title="JavaScript">js</acronym>"></script>
2.<script type="text/javascript" src="top_menu.<acronym title="JavaScript">js</acronym>"></script>

Далее CSS стиль

01.<style type="text/css">
02./* ***** menu ***** */
03.ul#navigation {
04.position: fixed;
05.margin: 0px;
06.padding: 0px;
07.top: 0px;
08.right: 10px;
09.list-style: none;
10.z-index:999999;
11.width:550px;
12.}
13.ul#navigation li {
14.width: 103px;
15.display:inline;
16.float:left;
17.}
18.ul#navigation li a {
19.display: block;
20.float:left;
21.margin-top: -2px;
22.width: 100px;
23.height: 17px;
24.background-color:#E7F2F9;
25.background-repeat:no-repeat;
26.background-position:50% 10px;
27.border:1px solid #BDDCEF;
28.text-decoration:none;
29.text-align:center;
30.padding-top:80px;
31.opacity: 0.7;
32.filter<img src="http://pcvector.ru/images/caprice/smilies/10.gif" border="0" alt="" title="Язычок" class="inlineimg">rogid<img src="http://pcvector.ru/images/caprice/smilies/24.gif" border="0" alt="" title="Смех" class="inlineimg">XImageTransform.Microsoft.Alpha(opacity=70);
33.}
34.ul#navigation li a:hover{
35.background-color:#CAE3F2;
36.}
37.ul#navigation li a span{
38.letter-spacing:2px;
39.font-size:12px;
40.color:#60ACD8;
41.text-shadow: 0 -1px 1px #fff;
42.
43.}
44.ul#navigation .bazar a{
45.background-image: url(bazar.png);
46.}
47.ul#navigation .hal a {
48.background-image: url(halyava.png);
49.}
50.ul#navigation .for a {
51.background-image: url(forum.png);
52.}
53.ul#navigation .chatib a {
54.background-image: url(chat.png);
55.}
56.ul#navigation .sms a {
57.background-image: url(icqsms.png);
58.}
59.</style>

И помещаем на страницу следующий код, в любое место:

1.<ul id="navigation">
2.<li class="bazar"><a href="#" target ="_blank"><span>ICQ базар</span></a></li>
3.<li class="hal"><a href="#" target ="_blank"><span>ICQ халява</span></a></li>
4.<li class="for"><a href="#" target ="_blank"><span>Форум</span></a></li>
5.<li class="chatib"><a href="#" target ="_blank"><span>Чат</span></a></li>
6.<li class="sms"><a href="#" target ="_blank"><span>ICQ за смс</span></a></li>
7.</ul>

Ссылки href корректируете сами и также изменяете пути до файлов и картинок (srс="" в script и url вCSS)

Elena.F · 26 Июн 2013

Буду все что здесь на форуме есть читать!НЕплохо было бы всё это понять и научиться!

Satan · 26 Июн 2013

Elena.F написал(а):
НЕплохо было бы всё это понять и научиться!

Пробуйте, читайте. Получиться обязательно и научитесь, главное вникнуть в то, что хочется и терпение и усидчивость. Все у Вас получиться.

Собянин А. · 16 Фев 2016

Jquery неактуально. Сейчас огромное количество эффектов можно получить с помощью CSS

Поиск

Поиск

Делаем top menu на jquery

Satan

Elena.F

Satan

Собянин А.