Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2018, 21:38
Новичок на форуме
Отправить личное сообщение для dimitriosrus Посмотреть профиль Найти все сообщения от dimitriosrus
 
Регистрация: 07.02.2018
Сообщений: 3

Плавающее горизонтальное меню
Суть проблемы такова: есть горизонтальное меню, в котором будет много пунктов, они не будут помещаться в экране.
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от dimitriosrus
вот пример.
и как он связан с
Сообщение от dimitriosrus
хочу, чтоб при движении мышкой по меню(вправо , влево), пункты , не поместившиеся в экран плавно выезжали
???
Сообщение от dimitriosrus
помогите вырезать этот скрипт
там есть кнопка скачать Download source и обьяснение
https://tympanus.net/codrops/2010/07...ation-gallery/
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2018, 23:03
Новичок на форуме
Отправить личное сообщение для dimitriosrus Посмотреть профиль Найти все сообщения от dimitriosrus
 
Регистрация: 07.02.2018
Сообщений: 3

Там в примере двигаются рисунки и всякие эффекты затемнения и т.п. это все лишнее. У меня же меню в виде текста. Хотелось бы, чтоб передвигались текстовые ссылки. Пробую удалять все лишнее, скрипт перестает работать. Вот и прошу помощи, может кто поможет адаптировать этот скрипт под мое меню. Знаний самому пока не хватает.
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2018, 00:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Плавающее горизонтальное меню
<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2018, 09:34
Новичок на форуме
Отправить личное сообщение для dimitriosrus Посмотреть профиль Найти все сообщения от dimitriosrus
 
Регистрация: 07.02.2018
Сообщений: 3

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавающее меню внутри iframe _Alex9_ Общие вопросы Javascript 2 22.11.2015 11:14
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Горизонтальное меню с отображение нажатого подменю javascript jQuery 1 18.11.2010 23:44