Форум

dimitriosrus · #1 (**permalink**) 07.02.2018, 21:38

Суть проблемы такова: есть горизонтальное меню, в котором будет много пунктов, они не будут помещаться в экране.

<div class="collapse navbar-collapse">
			  <!-- ========================== Пункты меню ===========================-->
				<div class="nav-block">
					<a class="menu-text" href="index.html">ГЛАВНАЯ</a>
					<a class="menu-text" href="news.html">НОВОСТИ</a>
					<a class="menu-text" href="calendar.html">РАСПИСАНИЕ</a>
					<a class="menu-text" href="zapiska.html">ЗАПИСКИ</a>
					<a class="menu-text" href="foto.html">ФОТО</a>
					<a class="menu-text" href="video.html">ВИДЕО</a>
					<a class="menu-text" href="donate.html">ДОНАТ</a>
					<a class="menu-text" href="contacts.html">КОНТАКТЫ</a>
				</div>
			</div>

хочу, чтоб при движении мышкой по меню(вправо , влево), пункты , не поместившиеся в экран плавно выезжали .
вот пример.
Jquery изучаю всего неделю.
помогите вырезать этот скрипт и приклеить к моему меню.
А, может, если есть способ проще, подскажите.
Спасибо!

PS: сайт собрал на bootstrap

рони · #2 (**permalink**) 07.02.2018, 22:31

Сообщение от dimitriosrus

вот пример.

и как он связан с

Сообщение от dimitriosrus

хочу, чтоб при движении мышкой по меню(вправо , влево), пункты , не поместившиеся в экран плавно выезжали

???

Сообщение от dimitriosrus

помогите вырезать этот скрипт

там есть кнопка скачать Download source и обьяснение
https://tympanus.net/codrops/2010/07...ation-gallery/

dimitriosrus · #3 (**permalink**) 07.02.2018, 23:03

Там в примере двигаются рисунки и всякие эффекты затемнения и т.п. это все лишнее. У меня же меню в виде текста. Хотелось бы, чтоб передвигались текстовые ссылки. Пробую удалять все лишнее, скрипт перестает работать. Вот и прошу помощи, может кто поможет адаптировать этот скрипт под мое меню. Знаний самому пока не хватает.

рони · #4 (**permalink**) 08.02.2018, 00:27

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      .navbar-collapse{
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 32px;
      }

      .nav-block {
        display: flex;
         position: absolute;
         left : 0px;
      }
      .nav-block a{
         min-width: 240px;
         border-right: #FF0000 solid 1px;
         text-align: center;
         font-size: 32px;
      }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  $(".navbar-collapse").mousemove(function(e) {
    var zip = 300;
    var Width = $(this).width();
    var container = $(".nav-block");
    var containerWidth = container.width();
    var left = 0;
    if (e.pageX > zip) {
      left = (Width - containerWidth) * ((e.pageX - zip) / (Width - 2 * zip));
    }
    if (e.pageX > Width - zip) {
      left = Width - containerWidth;
    }
    container.css("left", left + "px");
  });
});
  </script>
</head>

<body>
<div class="collapse navbar-collapse">
        <!-- ========================== Пункты меню ===========================-->
        <div class="nav-block">
          <a class="menu-text" href="index.html">ГЛАВНАЯ</a>
          <a class="menu-text" href="news.html">НОВОСТИ</a>
          <a class="menu-text" href="calendar.html">РАСПИСАНИЕ</a>
          <a class="menu-text" href="zapiska.html">ЗАПИСКИ</a>
          <a class="menu-text" href="foto.html">ФОТО</a>
          <a class="menu-text" href="video.html">ВИДЕО</a>
          <a class="menu-text" href="donate.html">ДОНАТ</a>
          <a class="menu-text" href="contacts.html">КОНТАКТЫ</a>
        </div>
      </div>


</body>
</html>

dimitriosrus · #5 (**permalink**) 08.02.2018, 09:34

Вау!! Ты волшебник! Спасибище огромное! То, что надо.

Форум

Справочник

Discord чат

Курсы javascript