Question

我正在JQuery中构建一个可以垂直扩展的小菜单，我需要一些帮助。

我的主要问题是当我点击菜单展开它时，网页不会展开，所以我无法点击最后一个菜单的链接，因为它不在页面之内。所以我认为当点击发生时我需要一些扩展文档正文，但我不知道如何实现这一点。

那么，打开菜单时如何垂直展开“canvas / body / etc ...”？

我的第二个问题是：如果单击链接并从页面更改，菜单怎么办？

谢谢！

我的Jquery：

$(function() {
      var visibleFashion = false;

      $('#menu-fashion').css({'display':'none'});

      //FASHION
      $('#fbtn').click(function() {

        if (visibleFashion) {
          $('#menu-fashion').css({'display':'none'});
          visibleFashion = false;
          return;
        }

        $('#menu-fashion').css({'display':'block'});
        visibleFashion = true;


      });


      $('#menu-fashion').click(function() {
        $(this).css({'display':'none'});
        visibleFashion = false;
      });
});

这是关于HTML / PHP的部分：

<!--Class menus-->
                <div id="fbtn" style="margin-top:10px; cursor:pointer;">Fashion</div>
                <?php wp_nav_menu(array('theme_location' => 'secondary', 'menu_class' => 'nav-menu', 'container_id' => 'top-right-menu-fashion', 'fallback_cb' => false)); ?>

CSS：

#top-right-menu-fashion {
    margin-left: 10px;
}
.menu-fashion{
        display: none;  
    }

Answer 1

您尝试做的事情的逻辑是这样的： DEMO

.wrap {
    background-image: url("woody.jpg");
    background-size: contain;
    display: block;
    height: auto;
    padding: 0px;
    position: relative;
    width: 100%;
}

现在你只需要将这个逻辑插入到你的项目中，你就可以了。

如何在打开菜单

1 个答案: