Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2017, 15:40
Новичок на форуме
Отправить личное сообщение для AlexBes89 Посмотреть профиль Найти все сообщения от AlexBes89
 
Регистрация: 11.03.2015
Сообщений: 6

Нестандартное главное меню
Как сделать чтобы пункт меню с классом active был по центру страницы, при этом соседние пункты меню смещались по горизонтали ?
Тут пример страницы: https://jsfiddle.net/Alexbes89/mdaqwfLm/
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2017, 16:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от AlexBes89
Как сделать чтобы пункт меню с классом active был по центру страницы, при этом соседние пункты меню смещались по горизонтали ?
Ну они у тебя и так двигаются... Осталось только правильно считать тот отступ.

Узнай размер активного элемента и родителя... Т.о. ты узнаешь координаты для его центрирования... По текущему положению активного элемента можно будет определить на сколько менять текущий отступ.
Т.о. можно будет даже анимацию наладить!
Ответить с цитированием
  #3 (permalink)  
Старый 16.10.2017, 18:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

выбранный пункт меню по середине
AlexBes89,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">body{
  padding: 15px 0;
}
li{
  list-style-type: none;
}
a{
  text-decoration: none;
}
.logo_text{
  text-align: center;
  font-weight: bold;
  font-size: 28px;
}
.main_menu{
  width: 100%;
  display: block;
  overflow: hidden;
  margin: 30px 0;
}
.align{
  width: 200%;
  text-align: center;
  position: relative;
  left: -50%;
}
ul{
  display: inline-block;
  margin: 0;
  padding: 0;
  transition: 1s;
}
li{
  display: inline-block;
}
.main_menu a{
  padding: 5px;
  display: inline-block;
  transition: 1s ;
  border-bottom: 3px solid  transparent;
}
.main_menu a.active{
  border-bottom: 3px solid blue;
  transition-delay: .4s;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $("ul").each(function(indx, ul) {
        var lis = $("li", ul),
            width = $(ul).width();
        lis.each(function(indx, li) {
            width -= $(li).width();
            var left = width;
            width -= $(li).width();
            $(li).on("click", function(event) {
                event.preventDefault();
                $("a", lis).not($("a", li).addClass("active")).removeClass("active");
                $(ul).css("margin-left", left + "px")
            });
            $("a", li).is(".active") && $(li).click()
        })
    })
});
  </script>
</head>

<body>
<div class="wrapper">
  <div class="logo_text">INVESTMENT VIEWS</div>
  <div class="main_menu">
    <div class="align">
      <ul>
        <li>
          <a href="index.html" class="active">HIGHLIGHTS</a>
        </li>
        <li>
          <a href="story.html">WHAT'S THE STORY?</a>
        </li>
        <li>
          <a href="table.html">INVESTMENT SOLUTIONS</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="main_menu">
    <div class="align">
      <ul>
        <li>
          <a href="index.html">HIGHLIGHTS</a>
        </li>
        <li>
          <a href="story.html" class="active">WHAT'S THE STORY?</a>
        </li>
        <li>
          <a href="table.html">INVESTMENT SOLUTIONS</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="main_menu">
    <div class="align">
      <ul>
        <li>
          <a href="index.html">HIGHLIGHTS</a>
        </li>
        <li>
          <a href="story.html">WHAT'S THE STORY?</a>
        </li>
        <li>
          <a href="table.html" class="active">INVESTMENT SOLUTIONS</a>
        </li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.10.2017, 20:47
Новичок на форуме
Отправить личное сообщение для AlexBes89 Посмотреть профиль Найти все сообщения от AlexBes89
 
Регистрация: 11.03.2015
Сообщений: 6

рони, спасибо большое за помощь =) , но есть один баг в твоем решении, например, если ширина экрана 375px и первый пункт активен, то меню становится в 2 ряда, и не центрируется, сейчас попробую разобраться..
Ответить с цитированием
  #5 (permalink)  
Старый 16.10.2017, 20:50
Новичок на форуме
Отправить личное сообщение для AlexBes89 Посмотреть профиль Найти все сообщения от AlexBes89
 
Регистрация: 11.03.2015
Сообщений: 6

Рони, решил вопрос таким образом:
.align{
  width: 400%;
  text-align: center;
  position: relative;
  left: -150%;
}

Еще раз огромное спасибо=)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Алгоритм работы интересного меню qesplu Общие вопросы Javascript 14 17.07.2015 10:15
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36