MMenu Open on Load with close

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/addons/jquery.mmenu.fixedelements.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
		<div id="page">
			<div class="header Fixed">
				<a href="#menu"></a>
				Demo
			</div>
			<div class="content">

		    <div>
				<p><strong>This is the third section.</strong><br />
					<a id = "basket" href="#menu">Open Sub Menu via jQuery click </a></p>
				</div>
			</div>

			<nav id="menu">
				<ul>
					<li id="mmbasket"><a href="#content">item1</a>
                    <ul>
					<li><a href="#sub1">sub1</a></li>
					<li><a href="#sub2">sub2</a></li>
					<li><a href="#sub3">sub3</a></li>
					<li><a href="#sub4">sub4</a></li>
				</ul>
                    </li>
					<li><a href="#first">item2</a></li>
					<li><a href="#second">item3</a></li>
					<li><a href="#third">item4</a></li>
				</ul>
			</nav>
		</div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/extensions/jquery.mmenu.widescreen.css') screen and (min-width: 900px);
@import url('https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css');
html, body
{
	padding: 0;
	margin: 0;
}
body
{
	background-color: #fff;
	font-family: Arial, Helvetica, Verdana;
	font-size: 14px;
	line-height: 22px;
	color: #666;
	position: relative;
	-webkit-text-size-adjust: none;
}
body *
{
	text-shadow: none;
}
h1, h2, h3, h4, h5, h6
{
	line-height: 1;
	font-weight: bold;
	margin: 20px 0 10px 0;
}
h1, h2, h3
{
	font-size: 18px;
}
h4, h5, h6
{
	font-size: 16px;
}
p
{
	margin: 0 0 10px 0;
}
a, a:link, a:active, a:visited, a:hover
{
	color: inherit;
	text-decoration: underline;
}

nav:not(.mm-menu)
{
	display: none;
}

.header,
.content,
{
	text-align: center;
}
.header
{
	background: #777;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 40px;


	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 40px;
	padding: 0 50px;
}
.header.fixed
{
	position: fixed;
	top: 0;
	left: 0;
}

.header a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );

	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 10px;
}
.content
{
	padding: 150px 50px 50px 50px;
}

			#intro,
			#first,
			#second,
			#third
			{
				height: 400px;
			}
			#intro
			{
				padding-top: 0;
			}
			#first,
			#second,
			#third
			{
				border-top: 1px solid #ccc;
				padding-top: 150px;
			}


			.header
			{
				box-sizing: border-box;
				width: 100%;
				position: fixed;
			}
			.header
			{
				top: 0;
			}

JavaScript

// mmneu config
         jQuery(document).ready(function( $ ) {
            $("#menu").mmenu({});
         });

// my own code for open item 1 with virtual click by jQuery

      var API = $("#menu").data( "mmenu" );