Вход • Регистрация

Программеры и Кодеры, помогите с созданием меню!

  •
  • 15 октября 2015 г. , редакция: 15 октября 2015 г.
  • Люди добрые, помогите доделать Правильное вертикальное многоуровневое меню!!
    Сейчас при наведении на пункт меню → справа выводится подменю.
    Выводится с помощью CSS так:
    Код
    .menu_kategorii:hover .menu_podpunkt{
    background:#000;
    display:block;
    left:237px;
    position:absolute;
    }

    .menu_podpunkt {
    display: none;
    z-index:100;
    }



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

    Как сделать так, что бы подменю выравнивалось по видимой части экрана (как на рисунке 2.2)?
    •
    • 15 октября 2015 г.
    • Абсолютное позиционирование (position:absolute; можно попробовать и relative) блока с подменю и назначит что-то типа top:значение_с_минусом
      •
      • 15 октября 2015 г.
      • Если поставить relative то выбранный пункт меню растягивается на высоту подпунктов.
      •
      • 15 октября 2015 г. , редакция: 15 октября 2015 г.
      • А если поставить ТОП с минусом, то будет закрываться экраном верхняя часть.
        Нужно что-бы выравнивалось.
        Вот пример:
        http://www.krasotkapro.ru/delivery/
        •
        • 15 октября 2015 г.
        • Там у вложенного:
          Код
          ul.left-menu li.parent ul {
          background-color: #536e67;
          border-left: 1px solid #fff;
          display: none;
          margin: 0;
          padding: 0;
          position: absolute;
          right: -238px;
          top: 0;
          width: 237px;
          }

          а у родителя:
          Код
          ul.left-menu li {
          display: block;
          margin: 0 0 3px;
          overflow: visible;
          padding: 0;
          position: relative;
          }


          Возможно Вам поможет padding: 0; чтобы не расширялось как не надо
          •
          • 15 октября 2015 г. , редакция: 15 октября 2015 г.
          • Судя по примеру, надо, если выпадающее левое меню влезает до низу. то надо его вверх направлять. Думаю надо корвырять в районе:

            Надо определить расположение нижнего края меню относительно области экрана.

            Надо вычислить:
            1. высоту экрана
            2. положение элемента от края документа
            3. высоту выподающего списка
            может еще чего-то

            ссылка в тему: http://javascript.ru/forum/showthread.php?p=369699
  • 15 октября 2015 г.
  • Спасибо Будем проверять ))
  • 15 октября 2015 г.
  • Думаю так:

    1. вычисдяем высоту смого подменю. $(this).find("ul.dop_menu").height(); // this тут Li
    2. вычисляем его расположение относительно верха $(this).find("ul.dop_menu").offset.top();
    3. вычисляем сколько прокрути экран $(window).scrollTop();
    4. высоту окна браузера. $(window).height()

    Т.е вычисляем нижнюю границу меню

    $(window).scrollTop() - $(this).find("ul.dop_menu").offset.top() = высота элемента от начала окна браузера, назовем его H_TOP

    затем если то H_TOP+$(this).find("ul.dop_menu").height() < $(window).height(), то ка бы все ок. если больше то класс присываиваем, чтоб вверх направить


Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум