jQuery FlexNav sub-menus get lost behind the viewport

Question

How to make FlexNav sub-menu to open on the left side?

I have multilevel menu and low level sub-menus of the last menu item get lost behind the right side of the browser (desktop) window. Is it a drawback of FlexNav? Can it be fixed some way? Maybe there is any option for that, although I didn't manage to find it.

Here is the demo of FlexNav with just one sum-menu under last menu item. If you nest additional levels they fly out, but part of them just become hidden outside of the viewport, because they can't fit the window size and this also creates horizontal scrollbar.

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

Code example:

<!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

Please provide your code so we can help you. – Natalie Hedström Feb 28 '14 at 09:51 — Natalie Hedström, Feb 28 '14 at 09:51

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

You can solve this in two ways(without using javascript)

add a class to the last menu-item and then add the following code Fiddle
```
.flex li.last ul li > ul{
    margin-left: 0px; left: -100%;
}
```
You could use the css3 psuedo selector last-child (note: that this is not supported in all browsers) Fiddle
```
.flexnav li:last-child ul li > ul{
    margin-left: 0px; left: -100%;
}
```

edited May 23 '17 at 12:10

Community

1
1

answered Feb 28 '14 at 10:56

Natalie Hedström

2,607
3
25
36

jQuery FlexNav sub-menus get lost behind the viewport

1 Answers1