Name: Прикольные менюшки с эфектами JS анимация...
Item: Прикольные менюшки с эфектами JS анимация...
Author: Dastyle

Меню сайта

Форма входа

Категории раздела

скрипты для ucoz сайта [3099]

шаблоны для ucoz скачать [2660]

Иконки групп для форума [25]

Графика для сайта [1953]

шаблоны psd для фотошопа [27]

кисти для фотошопа [39]

уроки фотошопа на русском языке [4]

стили для фотошопа [3]

шрифты для фотошопа cs4 [12]

Web-master [3058]

Поиск

Календарь

Наш опрос

Мини-чат

Друзья сайта

Статистика

Онлайн всего: 1

Гостей: 1

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

Главная » » Прикольные менюшки с эфектами JS анимация...

16:15

Прикольные менюшки с эфектами JS анимация...

Меню 1 установка смотрим демо пример

Для размещения в теле страницы

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css" media="screen">
  
  
  </style>
  <script type="text/javascript" src="jquery-1.js"></script>
  <script type="text/javascript" src="bg_pos.js" charset="utf-8"></script>
  <script type="text/javascript" src="functions.js"></script>
</head><body>
<div class="main_nav">
  <ul>
  <li id="home"><a style="background-position: 0pt 0pt;" href="#">Home</a></li>
  <li id="work"><a style="background-position: 0px 0px;" href="#">Work</a></li>
  <li id="blog" class="current"><a style="background-position: 0px 0px;" href="#">Blog</a></li>
  <li id="faq"><a style="background-position: 0px 0px;" href="#">FAQ</a></li>
  <li id="contact"><a style="background-position: 0pt 0pt;" href="#">Contact</a></li>
  </ul>
</div>
</body></html>

Меню 2 установка и демо
смотрим Демо пример

В тело вашей страницы

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" media="screen,projection" href="styles.css">
<script src="cappuccino.js" type="text/javascript"></script>
<script src="latte.js" type="text/javascript"></script>

</head><body class="portfolio projects professor mocha">



<div id="navigation">

<ul class="level_0">
<li class="home"><a href="#" class="main"><span>Home</span><span style="opacity: 0;" class="hover"></span></a></li>

<li class="services stingray">
  <a href="#services/identity/" class="main"><span>Services</span><span style="opacity: 0;" class="hover"></span></a>

  <ul style="opacity: 0;" class="level_1">

  
  <li><a href="#services/identity/">Identity Package</a></li>

  <li><a href="#services/design/">Design Package</a></li>
  <li><a href="#services/coding/">Coding Package</a></li>

  </ul></li>

<li class="portfolio stingray">
  <a href="#portfolio/" class="main"><span>Portfolio</span><span style="opacity: 0;" class="hover"></span></a>

  <ul style="opacity: 0;" class="level_1">

  <li class="loaded project">

  <a href="#portfolio">By Project</a>
  <ul class="level_2">

  <li><a href="#portfolio/bullspot">Bullspot</a></li>
  <li><a href="#portfolio/girlgamer">Girl Gamer</a></li>
  <li><a href="#portfolio/thf">The Hosting Factory</a></li>
  <li><a href="#portfolio/aprilzero">Apri1 Zero</a></li>

  <li><a href="#portfolio/amadeus">Amadeus</a></li>
  </ul>
  </li>

  <li class="loaded type">
  <a href="#portfolio/type/logos/">By Type</a>
  <ul class="level_2">

  <li><a href="#portfolio/type/logos">Logos</a></li>

  <li><a href="#portfolio/type/cards">Business Cards</a></li>
  <li><a href="#portfolio/type/design">Interface Design</a></li>
  <li><a href="#portfolio/type/code">Coded Pages</a></li>
  <li><a href="#portfolio/type/final">Final Sites</a></li>
  </ul>
  </li>

  </ul></li>

<li class="about stingray">
  <a href="#about/company/" class="main"><span>About</span><span style="opacity: 0;" class="hover"></span></a>

  <ul style="opacity: 0;" class="level_1">
  <li><a href="#about/company/">Company</a></li>
  <li><a href="#about/history/">History</a></li>
  <li><a href="#about/availability/">Availability & Timeline</a></li>


  </ul></li>

</ul>

</div>

</body></html>

Меню номер три тут есть и вертикальное и горизонтальное и есть возможность замедления меню, но я убрал у себя когда делал

Смотрим живой пример у меня на сайте в самом верху страницы

Меню 4
установка и демо
Пример
это в тело вашей страницы

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Animated Menu Demo</title>

<style>
  body {
  background-color:#333333;
  margin:0;
  }

  /* Firefox Dotted Outline Fix */
  a:active {
  outline: none;
  }

  /* Firefox Dotted Outline Fix */
  a:focus {
  -moz-outline-style: none;
  }

  /* Menu Body */
  ul#menu {
  width:80%;
  height:102px;
  background:url(bg.png) repeat-x;
  list-style:none;
  margin:0;
  padding:0;
  padding-top:20px;
  padding-left:20%;
  }

  /* Float LI Elements - horizontal display */
  ul#menu li {
  float:left;
  }

  /* Link - common attributes */
  ul#menu li a {
  background:url(sprite.png) no-repeat scroll top left;
  display:block;
  height:81px;
  position:relative;
  }

  /* Specify width and background position attributes specifically for the class: "home" */
  ul#menu li a.home {
  width:159px;
  }

  /* Specify width and background position attributes specifically for the class: "portfolio" */
  ul#menu li a.portfolio {
  width:157px;
  background-position:-159px 0px;
  }

  /* Span (on hover) - common attributes */
  ul#menu li a span {
  background:url(sprite.png) no-repeat scroll bottom left;
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:100;
  }

  /* Span (on hover) - display pointer */
  ul#menu li a span:hover {
  cursor:pointer;
  }

  /* Shift background position on hover for the class: "home" */
  ul#menu li a.home span {
  background-position:0px -81px;
  }

  /* Shift background position on hover for the class: "portfolio" */
  ul#menu li a.portfolio span {
  background-position:-159px -81px;
  }
</style>


<script src="jquery-1.js" type="text/javascript"></script>


<script type="text/javascript">
  $(function() {
  // set opacity to nill on page load
  $("ul#menu span").css("opacity","0");
  // on mouse over
  $("ul#menu span").hover(function () {
  // animate opacity to full
  $(this).stop().animate({
  opacity: 1
  }, 'slow');
  },
  // on mouse out
  function () {
  // animate opacity to nill
  $(this).stop().animate({
  opacity: 0
  }, 'slow');
  });
  });
</script>
</head><body>
  <ul id="menu">
  <li><a href="#" class="home"><span style="opacity: 0;"></span></a></li>
  <li><a href="#" class="portfolio"><span style="opacity: 0;"></span></a></li>
  </ul>
</body></html>

Вроде все, если чего не понятно пишите в коментариях, объясню

Категория: скрипты для ucoz сайта | Просмотров: 1084 | Добавил: B-look | Рейтинг: 0.0/0

Всего комментариев: 12

1 2 »

Порядок вывода комментариев:

12 Dastyle (09.07.2009 20:28)

а что тут не понятно все предельно просто

11 Harakiri_4203 (09.07.2009 18:41)

Блин а поподробнее объяснить? что на что заменять. вот теперь сам разбирайся сиди dry

10 MaX6589 (09.07.2009 17:18)

па моему ти лучий админ : )

9 vladko95 (09.07.2009 16:59)

поисковики их не любят

7 B-look (09.07.2009 16:39)

manu
меню номер три как раз в архиве
оранжевое с белым
а настроить в css

8 manu (09.07.2009 16:41)

ooo da to chto nado cool

6 B-look (09.07.2009 16:37)

vladko95 почему лучше не ставить?

5 manu (09.07.2009 16:37)

а не можете Горизонтальный орaнжевое Меню сдeлaт?

4 vladko95 (09.07.2009 16:30)

меню на JS лучше не ставить

3 B-look (09.07.2009 16:27)

Вот это в принципе можно убрать
Так как это уже на странице

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

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

2 manu (09.07.2009 16:23)

a gde eto В тело вашей страницы?

1-10 11-11

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]