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.min.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)
Menu items have a border that is indented on the left.
border-full
Menu items have a border that is not indented.
border-offset
Menu items have a border that is indented on both sides.
border-none
Menu items don't have a border.

SCSS variables for the "borderStyle" extension

The "borderStyle" extension has no SCSS variables.

SCSS mixins for the "borderStyle" extension

The "borderStyle" extension has no SCSS mixins.

Next extension:
Effects