Онлайн всего: 1
Гостей: 1
Пользователей: 0


ДЕМО Скачать исходники



Это красивое меню находится на странице с выбором продукции Apple. Выполнено очень красиво. Чем то даже похоже на слайдер.

И так начнем установку:

1. Для начала скачайте приложенный архив и загрузите себе в Файловый менеджер.

2. Вставьте этот код в свой CSS:
Code
* {
  font-family: Arial, "Free Sans";
}
.container {
  border: 5px solid #0099cc;
  width: 700px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 50px;
  padding: 10px 0;
  -webkit-border-radius: .3em .3em 0 0;
  -moz-border-radius: .3em .3em 0 0;
  border-radius: .3em .3em 0 0;
}
#container_wide {
  width: 2800px;position: relative;
}
.product_container {
  text-align: center;
  width: 700px;
  float: left;
  position: relative;
}
.product_container a {
  margin: 0 12px;
  position: relative;
}
.nav {
  width: 700px;
  background: #0099cc;
  margin: 0 auto;
  text-align: center;
  border: 5px solid #0099cc;
  border-bottom-width: 10px;
  -webkit-border-radius: 0 0 .3em .3em;
  -moz-border-radius: 0 0 .3em .3em;
  border-radius: 0 0 .3em .3em;
}
.nav a {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  margin-right: 10px;
  font-weight: bold;
  text-decoration: none;
}
.nav a:hover {
  color: #e3e3e3;
}


3. Следующий код вставьте там где будет это меню:
Code
<div class="container">
  <div id="container_wide">
  <div class="product_container" id="product_browser">
  <a href="#"><img src="img/browser/Chrome.png"></a>
  <a href="#"><img src="img/browser/Safari.png"></a>
  <a href="#"><img src="img/browser/Firefox.png"></a>
  <a href="#"><img src="img/browser/IE.png"></a>
  <a href="#"><img src="img/browser/Maxthon.png"></a>
  <a href="#"><img src="img/browser/Opera.png"></a>
  </div>
  <div class="product_container" id="product_apple">
  <a href="#"><img src="img/apple/iMac.png"></a>
  <a href="#"><img src="img/apple/MacBook.png"></a>
  <a href="#"><img src="img/apple/MacMini.png"></a>
  <a href="#"><img src="img/apple/iPhone.png"></a>
  <a href="#"><img src="img/apple/Macpro.png"></a>
  </div>
  <div class="product_container" id="product_construction">
  <a href="#"><img src="img/construction/01.png"></a>
  <a href="#"><img src="img/construction/02.png"></a>
  <a href="#"><img src="img/construction/03.png"></a>
  <a href="#"><img src="img/construction/04.png"></a>
  </div>
  <div class="product_container" id="product_cake">
  <a href="#"><img src="img/cake/01.png"></a>
  <a href="#"><img src="img/cake/02.png"></a>
  <a href="#"><img src="img/cake/03.png"></a>
  <a href="#"><img src="img/cake/04.png"></a>
  <a href="#"><img src="img/cake/05.png"></a>
  <a href="#"><img src="img/cake/06.png"></a>
  </div>
  <div style="clear:both"></div>
  </div>
</div>
<div class="nav">
  <a href="#" class="product_nav" id="nav_browser">Браузер</a>
  <a href="#" class="product_nav" id="nav_apple">Apple</a>
  <a href="#" class="product_nav" id="nav_construction">Стройка</a>
  <a href="#" class="product_nav" id="nav_cake">Пироги</a>
</div>


4. Далее перед </head> вставьте этот код:
Code
<script type="text/javascript" src="/jquery-1.6.min.js"></script>
  <script type="text/javascript" src="/jquery.easing.1.3.js"></script>


5. И последнее вставьте этот код перед </body>:
Code
<script>
  $(document).ready(function() {
  var displayed = "product_browser";
  var cindex = 0; // Текущий индекс (выводимый раздел)

  function loopMoveLeft(el, move) {
  if (el.length == 1) {
  setTimeout(function() {
  el.animate({ left: move }, {
  duration: 'slow',
  easing: 'easeOutBounce'
  });
  loopMoveLeft(el.next(), move);
  }, 100);
  }
  }

  function loopMoveRight(el, move) {
  if (el.length == 1) {
  setTimeout(function() {
  el.animate({ left: move }, {
  duration: 'slow',
  easing: 'easeOutBounce'
  });
  loopMoveRight(el.prev(), move);
  }, 100);
  }
  }

  function slideItem(obj_el) {
  var product = $(obj_el).attr("id").replace("nav_", "");
  var contid = 'product_' + product;

  // Текущий отображаемый элемент
  var elFirst = $("#"+displayed+" a:first-child");
  var elLast = $("#"+displayed+" a:last-child");
  var total_el = $("#"+displayed).children().length;

  var index = $(obj_el).index();

  // Новый элемент для вывода
  var el_f = $("#"+contid+" a:first-child");
  var el_l = $("#"+contid+" a:last-child");
  var total_new = $("#"+contid).children().length;

  var movement = -700 * index;

  if (cindex > index) {
  loopMoveRight(elLast, movement);  
  setTimeout(function() {
  loopMoveRight(el_l, movement)  
  }, (total_el + 1) * 100);
  } else if (cindex < index) {
  loopMoveLeft(elFirst, movement);  
  setTimeout(function() {
  loopMoveLeft(el_f, movement)
  }, (total_el + 1) * 100);
  }  

  cindex = index;
  displayed = contid;

  return (total_el + 5 + total_new) * 100;
  }

  var timeout;

  $(".product_nav").click(function() {
  $(".product_nav").unbind('click');
  timeout = slideItem(this);

  // Защита от дурака
  setTimeout(function() {
  $(".product_nav").bind('click', function() {
  timeout = slideItem(this);
  });
  }, timeout);
  });
  });
  </script>





e>.securityCode { width:135px; height:35px; font-size:14pt; position:absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }

| Комментарий № 1 | Дата: 22.09.2013

A wonderful job. Super helpful inoanmftior.

Создать бесплатный сайт с uCoz