CODEWITHSUNDEEP
c#jqueryasp.netmmenu
user2882682
user2882682

Reputation: 41

mmenu menu system not working within .Net form tag

am currently looking to implement the mobile menu system mmenu (http://mmenu.frebsite.nl/) into our Asp.Net site.

Works great on an HTML page and also in the Master page, so long as it's outside the form tag. When I put it within the form tag it no longer works.

Here is the HTML for the menu:

<nav id="menu">
    <ul>
        <li><a href="page.html">The page</a></li>
        <li><a href="mainmenu.html">The mainmenu</a></li>
        <li><a href="submenus.html">Submenus</a></li>
        <li><a href="labels.html">Labels</a></li>
        <li><a href="counters.html">Counters</a></li
        <li><a href="selected.html">Selected item</a></li>
        <li><a href="openmenu.html">Open the menu</a></li>
        <li><a href="closemenu.html">Close the menu</a></li>
    </ul>
</nav>

This runs it fine:

<script type="text/javascript">
    $(function () {
        $('nav#menu').mmenu({
            zposition: "next",
            position: "top"
        });
    });
</script>

But then if I put it within the form tag (form id="MainForm" runat="server") I get a jquery error. Needs to be within as some menu items will come from the database.

Cheers Simon

Upvotes: 4

Views: 1437

Answers (2)

Mike Mikeman
Mike Mikeman

Reputation: 11

The empty div wrapping body didn't work for me. I found a post on GitHub that worked great:

$('#search-copy').mmenu({
  // options
}, {
  // config
  offCanvas: {
      menuWrapperSelector: "#aspnetForm",
      pageNodetype: "form",
      pageSelector: "body > form"
  }
});

Here's the original post:

https://github.com/FrDH/jQuery.mmenu/issues/426

You may need to play around with your selectors. I ended up using an ID for pageSelector and a generic selector for menuWrapperSelector.

With mmenu, I found that there were a lot of hidden configuration and options settings. Some were in the mmenu docs, some were in the OffCanvas docs. Seems like the configuration/options settings will do just about anything you want without having to write a lot of custom CSS.

Upvotes: 0

Chris Haddad
Chris Haddad

Reputation: 76

Mmenu does two things when it is initialized. First, it wraps the innerHTML of the <body> with a <div class="mmenu-page"> container, and then it cuts out the <nav> for the menus and moves those between the <body> and new page container in the DOM.

For whatever reason, it treats the ASP.Net wrapping <form> tag like the <body> tag, but only if it appears as the first child of the <body>. When this is the case, it inserts it's wrapping <div> immediately following the closing <form> tag.

If you wrap your ASP.Net <form> tag with an empty <div>, mmenu will be able to target it's <div class="mmenu-page"> correctly and everything magically works.

You'll want your code aspx page to look like this:

<body>
 <div>
  <form id="form1" runat="server">
   ...
   <nav> ...mobile menu... </nav>
  </form>
 </div>
<body>

Upvotes: 5

Related Questions