Как создать Push / Slide Menu

Question

Как создать Push / Slide Menu

0

Я пытаюсь создать систему меню Push/Slide Out на моем сайте, как, например, www.squarespace.com, однако я не знаю, как это сделать.

Мой сайт является сайтом Squarespace и использует html, json и less (вы также можете создавать файлы.js): splitblog.squarespace.com/

Мой файл site.region для навигации:

<squarespace:navigation navigationId="mainNav" template="navigation" />

Которая извлекает информацию из navigation.block, которая такова:

<nav id="main-navigation" class="main-navigation" data-content-field="navigation-mainNav">
  <ul>
    {.repeated section items}

        <li class="{.section active} active-link{.end}{.if folderActive} active-folder{.end}">
          {.folder?}
            <!--FOLDER-->
              <a href="{collection.fullUrl}">{collection.navigationTitle}</a>
              <ul>
                {.repeated section items}
                  <!--COLLECTION IN A FOLDER-->
                  {.collection?}
                    <li class="{.section active} active-link{.end}">
                      <a href="{collection.fullUrl}">
                        {collection.navigationTitle}
                      </a>
                    </li>
                  {.end}
                  <!--EXTERNAL LINK IN A FOLDER-->
                  {.section externalLink}
                    <li>
                      <a href="{url}"{.section newWindow} target="_blank"{.end}>
                        {title}
                      </a>
                    </li>
                  {.end}
                {.end}
              </ul>
          {.or}
            <!--COLLECTION-->
            {.section collection}
              <a href="{fullUrl}">{navigationTitle}</a>
            {.end}
            <!--EXTERNAL LINK-->
            {.section externalLink}
              <a href="{url}"{.section newWindow} target="_blank"{.end}>
                {title}
              </a>
            {.end}
          {.end}
        </li>
    {.end}
  </ul>
</nav>

Тогда безлимитный стиль для меню:

.main-navigation {
  ul {  
    padding-left: 0;
    li {
      display: inline-block;
      ul {
        display: none;
      }
      &:not(:last-child) {
        margin-right: .5em;
      }
      &:hover > ul {
        display: inline-block;
      }
      &.active-link > a {
        color: salmon;
      }
      &.active-folder > a {
        color: orange;
      }
    }
  }
}

Любая помощь будет оценена по достоинству. Не стесняйтесь предлагать решения css и js. Благодарю!

редактировать

Вот пример того, что я хочу использовать: codepen

user3370902 13 март 2014, в 20:37

Источник

0

Я использовал pushy в прошлом, и он прекрасно работает: github.com/christophery/pushy . По крайней мере, это даст вам представление о том, как решить проблему.
Lowkase 13 март 2014, в 19:01
0

Можете ли вы предоставить JSFiddle .. будет легко помочь вам
A J 13 март 2014, в 19:02
0

Вот пример того, что я хочу сделать: codepen.io/jetpacmonkey/pen/ktIJz
user3370902 13 март 2014, в 19:05
0

Итак, вы хотите панель с прокруткой, а другую - без прокрутки?
A J 13 март 2014, в 19:24
0

Я хочу добавить это к правой стороне моего шаблона. Я хочу, чтобы иконка гамбургера была в правом верхнем углу. Я хочу, чтобы это было так же, как система меню squarespace.com. Да, я бы хотел, чтобы меню можно было прокручивать, если в нем много пунктов.
user3370902 13 март 2014, в 19:27
0

Вы можете проверить это: jsfiddle.net/borglinm/sp3ju/3 . Менять код, чтобы скользить справа?
Si8 13 март 2014, в 20:17

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

less

2 ответа

Ещё вопросы

Я использовал pushy в прошлом, и он прекрасно работает: github.com/christophery/pushy . По крайней мере, это даст вам представление о том, как решить проблему.
Можете ли вы предоставить JSFiddle .. будет легко помочь вам
Вот пример того, что я хочу сделать: codepen.io/jetpacmonkey/pen/ktIJz
Итак, вы хотите панель с прокруткой, а другую - без прокрутки?
Я хочу добавить это к правой стороне моего шаблона. Я хочу, чтобы иконка гамбургера была в правом верхнем углу. Я хочу, чтобы это было так же, как система меню squarespace.com. Да, я бы хотел, чтобы меню можно было прокручивать, если в нем много пунктов.
Вы можете проверить это: jsfiddle.net/borglinm/sp3ju/3 . Менять код, чтобы скользить справа?

Ty T. · Answer 1 · 2014-03-13T18-57-00.000Z

Это может дать вам представление о том, как достичь этого.

http://thecodeplayer.com/walkthrough/off-canvas-menu-animated-links

Также в фундаменте есть меню offcanvas, в котором вы можете посмотреть и посмотреть, как они это создали.

http://foundation.zurb.com/docs/components/offcanvas.html

A J · Answer 2 · 2014-03-13T18-03-00.000Z

Проверьте эту скрипку.

Это должно дать вам представление о том, как это может быть достигнуто.

$(document).on("click","#button", function(){

    $('#div2').animate({ width:"20%" }, 200);
    $('#div1').animate({width:"80%" }, 200);

});

$(document).on("click","#close", function(){

    $('#div2').animate({visibility:"hidden" , width:"0%" }, 200); 
    $('#div1').animate({width:"100%" }, 200);

});


#div1
{
    height:100%;
    width:100%;
    float:left;
    position:fixed;
}
#div2
{
    height:100%;
    width:0%;
    float:right;

}

#button
{
    margin-top:20px;
    margin-right:20px;
    float:right;
}

Не то, что я пытаюсь сделать. Извините, если мне не ясно. Я пытаюсь создать ту же систему меню / навигации, что и www.squarespace.com - там, где вы нажимаете на значок меню, и меню выдвигается справа.
обновил скрипку .. заменим фиктивные данные элементами требования
Хм ... Я пытался реализовать код, но похоже, что js не активирует меню ... Не могли бы вы взглянуть? splitblog.squarespace.com