Skip to content

Commit

Permalink
css fix
Browse files Browse the repository at this point in the history
  • Loading branch information
Fred Heusschen committed Mar 2, 2022
1 parent 3fdf6fc commit a43c5b9
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 68 deletions.
136 changes: 74 additions & 62 deletions demo/default.html
@@ -1,72 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta
name="viewport"
content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no"
/>

<title>mmenu light demo</title>
<title>mmenu light demo</title>

<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/mmenu-light.css" />
</head>
<body>
<div id="page">
<div class="header">
<a href="#menu"><span></span></a>
Demo
<nav id="menu">
<ul>
<li class="Selected"><a href="#">Home</a></li>
<li><span>About us</span>
<ul>
<li><a href="#about/history">History</a></li>
<li><span>The team</span>
<ul>
<li><a href="#about/team/management">Management</a></li>
<li><a href="#about/team/sales">Sales</a></li>
<li><a href="#about/team/development">Development</a></li>
</ul>
</li>
<li><a href="#about/address">Our address</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/mmenu-light.css" />
</head>
<body>
<div id="page">
<div class="header">
<a href="#menu"><span></span></a>
Demo
<nav id="menu">
<ul>
<li class="Selected"><a href="#/">Home</a></li>
<li>
<span>About us</span>
<ul>
<li><a href="#/">History</a></li>
<li>
<span>The team</span>
<ul>
<li>
<a href="#/">Management</a>
</li>
<li>
<a href="#/">Sales</a>
</li>
<li>
<a href="#/">Development</a>
</li>
</ul>
</li>
<li>
<a href="#/">Our address</a>
</li>
</ul>
</li>
<li><a href="#/">Contact</a></li>
</ul>
</nav>
</div>

<div class="content">
<p><strong>This is a demo.</strong><br />
Click the hamburger icon to open the menu.</p>
</div>
</div>
<div class="content">
<p>
<strong>This is a demo.</strong><br />
Click the hamburger icon to open the menu.
</p>
</div>
</div>

<script src="../dist/mmenu-light.js"></script>
<script>
var menu = new MmenuLight(
document.querySelector( '#menu' ),
'all'
);
<script src="../dist/mmenu-light.js"></script>
<script>
var menu = new MmenuLight(document.querySelector("#menu"), "all");

var navigator = menu.navigation({
// selectedClass: 'Selected',
// slidingSubmenus: true,
// theme: 'dark',
// title: 'Menu'
});
var navigator = menu.navigation({
// selectedClass: 'Selected',
// slidingSubmenus: true,
// theme: 'dark',
// title: 'Menu'
});

var drawer = menu.offcanvas({
// position: 'left'
});
var drawer = menu.offcanvas({
// position: 'left'
});

// Open the menu.
document.querySelector( 'a[href="#menu"]' )
.addEventListener( 'click', evnt => {
evnt.preventDefault();
drawer.open();
});

</script>
</body>
// Open the menu.
document
.querySelector('a[href="#menu"]')
.addEventListener("click", (evnt) => {
evnt.preventDefault();
drawer.open();
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion dist/mmenu-light.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "mmenu-light",
"version": "3.1.0",
"version": "3.1.1",
"main": "dist/mmenu-light.js",
"module": "src/mmenu-light.js",
"author": "Fred Heusschen <info@frebsite.nl>",
Expand Down
8 changes: 5 additions & 3 deletions src/modules/offcanvas-drawer/_index.scss
Expand Up @@ -92,9 +92,11 @@ body#{$prefix}-opened {
bottom: 0;
z-index: 3;

width: calc(100% - var(--mm-ocd-width));
min-width: calc(100% - var(--mm-ocd-max-width));
max-width: calc(100% - var(--mm-ocd-min-width));
width: clamp(
calc(100% - var(--mm-ocd-max-width)),
calc(100% - var(--mm-ocd-width)),
calc(100% - var(--mm-ocd-min-width))
);

background: rgba(3, 2, 1, 0);

Expand Down

0 comments on commit a43c5b9

Please sign in to comment.