Border style introduction

By default, all listitems in a listview will have an indented border. If you want to change the borders in listviews, add the preferred border style name to the extensions option.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            extensions: ["border-full"]
         });
      }
   );
</script>

If you want to change the border of only some listitems, add the preferred style name (prepended with "mm-") to the listview classname.

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

  • Use the "indent" border style (default).
  • Use the "full" border style.
  • Use the "offset" border style.
  • Use the "none" border style.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</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.

CSS variables for the "borderStyle" extension

The "borderStyle" extension has no CSS variables.

SCSS variables for the "borderStyle" extension

Variable Datatype Default value Description
Include CSS
$mm_include_borderstyle Boolean true Whether or not to include CSS for the borderStyle extension throughout the entire CSS framework.
$mm_include_borderstyle_none Boolean $mm_include_borderstyle Whether or not to include CSS for the "none" border style throughout the entire CSS framework.
$mm_include_borderstyle_full Boolean $mm_include_borderstyle Whether or not to include CSS for the "full" border style throughout the entire CSS framework.
$mm_include_borderstyle_offset Boolean $mm_include_borderstyle Whether or not to include CSS for the "offset" border style throughout the entire CSS framework.

Next extension:
Effects