Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » Красивое выезжающее меню (JQuery)


Красивое выезжающее меню (JQuery)

Сообщений 1 страница 9 из 9

1

Демо

Код:
<script type="text/javascript" src="http://co.forum4.ru/files/0011/88/07/14392.js"></script>
<script>
$(document).ready(function() {
 $("ul#nav li a").addClass("js");
 $("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});
</script>

<style type="text/css">
#container {
 height: 175px;
 background: url(http://uploads.ru/i/Q/N/5/QN5S3.jpg) center top no-repeat;
}
ul#nav {
 width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
 ul#nav li {
  float: left; list-style: none;
 }
  ul#nav li a {
   display: block; width: 97px; height: 77px;
   padding: 72px 0 0 0; margin: 0 32px 0 32px;
   font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
   color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

   background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 -149px no-repeat;
  }
   ul#nav li a:hover {
    background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 0 no-repeat;
    color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
   }

   ul#nav li a.js:hover {
    background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 -149px no-repeat;
   }
</style>
<div id="container">
 <ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</div>
Стиль. html-верх или в свой стиль без тегов.

<style type="text/css">
#container {
height: 175px;
background: url(http://uploads.ru/i/Q/N/5/QN5S3.jpg) center top no-repeat;
}
ul#nav {
width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
ul#nav li {
  float: left; list-style: none;
}
  ul#nav li a {
   display: block; width: 97px; height: 77px;
   padding: 72px 0 0 0; margin: 0 32px 0 32px;
   font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
   color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

   background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 -149px no-repeat;
  }
   ul#nav li a:hover {
    background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 0 no-repeat;
    color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
   }

   ul#nav li a.js:hover {
    background: url(http://uploads.ru/i/U/O/z/UOzRI.png) 0 -149px no-repeat;
   }
</style>

Скрипты. в html-верх или html-низ.

<script type="text/javascript" src="http://co.forum4.ru/files/0011/88/07/14392.js"></script>
<script>
$(document).ready(function() {
$("ul#nav li a").addClass("js");
$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});
</script>

Меню. Туда, где оно должно располагаться.

<div id="container">
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

+3

2

faiko написал(а):

Демо.

Не вижу-уууу... : (

0

3

разноцветная птица;
Потому, что ты зашла ещё до того, как я его доделала. хД

0

4

faiko
Блин, крутая вещь, определенно!
Следующий диз - с ним *О*

0

5

дада, я чайник, но таки спрошу:
- как поменять текст, на пример (с "Home" как в примере, на "Forum" к примеру)?
- и да, как сделать так, чтобы это было как юрл, т.е. кликаешь  и тут же переходишь на нужную страницу?

0

6

loool написал(а):

- как поменять текст, на пример (с "Home" как в примере, на "Forum" к примеру)?

<div id="container">
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

Красное - названия ссылок (замените, например, на "Forum")/
Синее - вместо этого нужно подставить нужный URL.

+1

7

faiko
спасибо)

разобралась

и тогда еще вопрос: как мне увеличить ее в размере? т.е. сделать длиннее или шире?

и да, можно ли добавить еще "вкладок"?

Отредактировано loool (2012-10-30 22:14:42)

0

8

loool
Попробуйте добавить еще одну строку:

<li><a href="#">Name</a></li>

0

9

У меня на сайте почему-то без анимации работает. Как её вернуть?

0


Вы здесь » Кот » Фишки и примочки » Красивое выезжающее меню (JQuery)


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC