Multiline introduction

By default, all menu items in a listview will be truncated with an ellipsis to fit on a single line. If you don't want to truncate the text to a single line, include the "multiline" extension .css file and add "multiline" to the extensions option.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.multiline.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["multiline"]
         });
      });
   </script>

If you want the text of only some menu items over multiple lines, add the classname "mm-multiline" to either a listview or a menu item.

   <nav id="my-menu">
      <ul>
         <li><a href="#">A very long text on a menu item that will be truncated to fit on a single line.</a></li>
         <li class="mm-multiline"><a href="#">A very long text on a menu item that will NOT be truncated to fit on a single line.</a></li>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Truncated listitems to a single line.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

SCSS variables for the "multiline" extension

The "multiline" extension has no SCSS variables.

SCSS mixins for the "multiline" extension

The "multiline" extension has no SCSS mixins.

Next extension:
Page dim