Question

如何在左侧打开FlexNav子菜单？

我有多级菜单，最后一个菜单项的低级子菜单在浏览器（桌面）窗口的右侧后面丢失。这是FlexNav的缺点吗？可以用某种方式修复吗？也许有任何选择，虽然我没有找到它。

以下是FlexNav的演示，在最后一个菜单项下只有一个sum-menu。如果嵌套其他级别，它们会飞出，但其中一部分只是隐藏在视口之外，因为它们不适合窗口大小，这也会创建水平滚动条。

http://jasonweaver.name/lab/flexiblenavigation/

代码示例：

<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
  <!-- <![endif]-->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexNav - A jQuery Plugin for Responsive Menus</title>
    <link href="http://jasonweaver.name/lab/flexiblenavigation/css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
    <link href="http://jasonweaver.name/lab/flexiblenavigation/css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
  </head>
  <body class="home-page">
        <div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="">Item 1</a>
              <ul>
                <li> <a href="/">Sub 1 Item 1</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="/">Sub 2 Item 2</a></li>
                    <li><a href="/">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="/">Sub 1 Item 2</a></li>
                <li><a href="/">Sub 1 Item 3</a></li>
                <li><a href="/">Sub 1 Item 4</a></li>
              </ul>
            </li>
            <li><a href="">Item 2</a></li>
            <li><a href="/">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="/">Item 5</a>
              <ul>
                <li><a href="/">Sub 1 Item 1</a></li>
                <li><a href="/">Sub 1 Item 2</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="/">Sub 2 Item 2</a></li>
                    <li><a href="/">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="/">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="/">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="/">Sub 3 Item 1</a></li>
                        <li><a href="/">Sub 3 Item 2</a></li>
                        <li><a href="/">Sub 3 Item 3</a>
                          <ul>
                            <li><a href="/">Sub 4 Item 1</a></li>
                            <li><a href="/">Sub 4 Item 2</a></li>
                            <li><a href="/">Sub 4 Item 3</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://jasonweaver.name/lab/flexiblenavigation/js/jquery.flexnav.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {            
            // initialize FlexNav
            $(".flexnav").flexNav();
        });
    </script>
  </body>
</html>

Fiddle

Answer 1

您可以通过两种方式解决此问题（不使用javascript）

在最后一个菜单项中添加一个类，然后添加以下代码Fiddle
```
.flex li.last ul li > ul{
    margin-left: 0px; left: -100%;
}
```
你可以使用css3 psuedo选择器last-child（note: that this is not supported in all browsers）Fiddle
```
.flexnav li:last-child ul li > ul{
    margin-left: 0px; left: -100%;
}
```

jQuery FlexNav子菜单在视口后面丢失

1 个答案: