CODEWITHSUNDEEP
javascriptjquerymobileslidemmenu
Paulcraey
Paulcraey

Reputation: 391

jQuery mmenu not working at all

I tried to use the jquery mmenu for my mobile site, but it's not working at all. The menu icon is not showing up. Here is a stripped down version of my site. Thanks for your help.

<!doctype html>
<html >
<head>
    <link href="../imagesCA/favicon.ico" rel="shortcut icon">
    <title>title</title>
    <script src="../slideMenu/jquery.js" type="text/javascript"></script>
    <script src="../slideMenu/jquery.mmenu.min.js" type="text/javascript"></script>
    <link href="../slideMenu/jquery.mmenu.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#menu").mmenu({});
        });
    </script>
</head>
<body>
    <nav id="menu">
        <ul>
            <li><a href="home.php">Home</a></li>
            <li><a href="link_1.php">link 1</a></li>
            <li><a href="link_2.php">link 2</a></li>
        </ul>
    </nav>
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed facilisis libero. 
        Nunc egestas neque luctus quam ultrices blandit a eleifend risus. Morbi vulputate, 
        sem at congue tincidunt, augue nisl imperdiet metus, non maximus velit velit ut lacus.
        Aenean ullamcorper, lectus id sollicitudin sollicitudin, augue justo vestibulum nisl, 
    </div>
</body>

Upvotes: 0

Views: 6041

Answers (2)

Paulcraey
Paulcraey

Reputation: 391

thanks a lot. The actual 3-bars menu icon is generated by CSS. On the site's source code i saw that the menu button is an element called "hamburger". So i went on from there. That "hamburger" thing is nowhere mentioned in the tutorials and is not even in the css files in the download! So I got it by "reverse enginering" the source code on their site.

<!doctype html>
<html >
<head>
    <link href="../imagesCA/favicon.ico" rel="shortcut icon">
    <title>title</title>
    <link href="../css-CA/boilerplate.css" 
type="text/css"   rel="stylesheet" />
    <link href="../css-CA/stijlMobielCA.css" 
type="text/css" rel="stylesheet" / >
    <script src="../slideMenu/jquery.js" type="text/javascript"></script>
    <script src="../slideMenu/jquery.mmenu.min.all.js"
type="text/javascript"></script>
    <link href="../slideMenu/jquery.mmenu.all.css"
type="text/css"rel="stylesheet" />
    <script>$(document).ready(function() {
var mmenu = $("#menu").mmenu({"slidingSubmenus": false,
                "extensions": [
                        "effect-slide",
                        "effect-zoom-menu",
                        "pageshadow"
                ]}).data('mmenu');
 $('a').click(function(ev) {
ev.preventDefault();
mmenu.open();
});
 });
    </script>
</head>
<body>

In the ccs file i added this :

#hamburger
{
box-sizing: border-box;
display: block;
width: 70px;
height: 45px;
position: fixed;
top: 10px;
left: 0;
z-index: 4;
    color: black;
}
#hamburger:before,
#hamburger:after,
#hamburger span
{
background: #000;
content: '';
display: block;
width: 30px;
height: 5px;
position: absolute;
left: 20px;
}
#hamburger:before
{
top: 10px;
}
#hamburger span
{
top: 20px;
}
#hamburger:after
{
top: 30px;
}

/* Hamburger animation */
#hamburger:before,
#hamburger:after,
#hamburger span
{
-webkit-transition: none 0.5s ease 0.5s;
transition: none 0.5s ease 0.5s;

-webkit-transition-property: transform, top, bottom, left, opacity;
transition-property: transform, top, bottom, left, opacity;
}
    <nav id="menu">
        <ul>
            <li><a href="home.php">Home</a></li>
            <li><a href="link_1.php">link 1</a></li>
            <li><a href="link_2.php">link 2</a></li>
        </ul>
    </nav>
    <div id="content">
        <a id="hamburger" class="Fixed" href="#menu"><span></span></a>
        <!--            <a href="">MENU</a>-->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed  facilisis libero. 
        Nunc egestas neque luctus quam ultrices blandit a eleifend risus. Morbi vulputate, 
        sem at congue tincidunt, augue nisl imperdiet metus, non maximus velit velit ut lacus.
        Aenean ullamcorper, lectus id sollicitudin sollicitudin, augue justo vestibulum nisl, 
    </div>
</body>

Upvotes: 0

Andy
Andy

Reputation: 30135

Seems like you have to add a menu button yourself to open the menu. I haven't read all of the documentation, so maybe there's an option to do that.

This seems to work though:

$(document).ready(function() {
  var mmenu = $("#menu").mmenu({}).data('mmenu');
  $('a').click(function(ev) {
    ev.preventDefault();
    mmenu.open();
  });
});
#content {
  background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://mmenu.frebsite.nl/mmenu/js/jquery.mmenu.min.all.js"></script>
<link href="http://mmenu.frebsite.nl/mmenu/css/jquery.mmenu.all.css" rel="stylesheet" />



<nav id="menu">
  <ul>
    <li><a href="home.php">Home</a>
    </li>
    <li><a href="link_1.php">link 1</a>
    </li>
    <li><a href="link_2.php">link 2</a>
    </li>
  </ul>
</nav>
<div id="content">
  <a href="">MENU</a>
  <br/>
  <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed facilisis libero. Nunc egestas neque luctus quam ultrices blandit a eleifend risus. Morbi vulputate, sem at congue tincidunt, augue nisl imperdiet metus, non maximus velit velit ut lacus.
  Aenean ullamcorper, lectus id sollicitudin sollicitudin, augue justo vestibulum nisl,
</div>

Upvotes: 1

Related Questions