Border style introduction

By default, all menu items in a listview will have an indented border. If you don't want the menu items to have a border, if you don't want the borders to be indented, or if you want the border to be indented on both sides, include the "borderStyle" extension .css file and add the style name to the extensions option.

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

If you want to change the border of only some menu items, add the classname "mm-border-none" or "mm-border-full" to the listview.

   <nav id="my-menu">
      <ul class="mm-border-full">
         <li><a href="#">Home</a></li>

Example

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

  • Use the "indent" border style (default).
  • Use the "full" border style.
  • Use the "offset" border style.
  • Use the "none" border style.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Available styles

border-indent (default)
Makes the menu item borders indented on the left.
border-full
Makes the menu item borders not indented.
border-offset
Makes the menu item borders indented on both sides.
border-none
Makes the menu item borders disappear.

SCSS variables for the "borderStyle" extension

The "borderStyle" extension has no SCSS variables.

Next extension:
Effects