移动滑动菜单未显示

Question

我遇到了一个问题。我一直在尝试将这个“汉堡包”移动滑动菜单应用到我的网站中。 javascript正在运行，但菜单没有显示。

有人知道吗？ http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites

我的css和HTML代码有点不同，但jQuery是一样的。

我已经仔细研究了这一点，我认为这可能是一场css冲突，但我不知道到底是什么。我有另一个使用.container的样式表，但我也不知道是不是这个原因。

这是我的链接：http://thestripedphoenix.com/ 我希望我的网站在使用汉堡菜单工具时能够快速响应。

请帮忙。我花了好几天时间，我认为我不能单独做这件事。

感谢!!!!!

我的HTML标记在这里（index.html）

<!-- Mobile Page Layout
================================================== -->

<!--This wrapping container is used to get the width of the whole content-->

<div id="container">

    <!--The Hamburger Button in the Header-->
    <header>
        <div id="logo"><img src="images/tsp+design-header-mobile.png" width="271" height="78"/>
        </div>
            <div id="hamburger">
                <div></div>
                <div></div>
                <div></div>
            </div>
    </header>

    <!--The mobile navigation Markup hidden via css-->
    <nav class="mobileNav">
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="portfolio-photo.html">photography</a></li>
            <li><a href="portfolio-illustration.html">illustration</a></li>
            <li><a href="portfolio-animation.html">animation</a></li>
            <li><a href="portfolio-web-design.html">web design</a></li>
            <li><a href="resume.html">resume</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav>

    <!--The Layer that will be layed over the content
    so that the content is unclickable while menu is shown-->
    <div id="contentLayer"></div>


<!-- Primary Page Layout
================================================== -->
<div id="content">

<div class="container">
    <div class="six columns">
        <div id="header"><a href="index.html"><img src="images/tsp+design-header.png"/></a></div>
    </div>
    <div class="two columns" id="navigation">
        <nav id="d-nav">
            <dl>
                <dt id="about"><a href="about.html">about</a></dt>
                <dt id="portfolio"><a href="portfolio.html">portfolio</a></dt>
                <dt id="resume"><a href="resume.html">resume</a></dt>
                <dt id="contact"><a href="contact.html">contact</a></dt>
            </dl>
        </nav>
    </div>

    <div id="space">
    </div>

        <div class="eight columns">
            <div class="slider-wrapper">
                <div id="slider1" class="nivoSlider theme-default">
                    <img src="images/gallery/image2-cropped.jpg"/>
                    <img src="images/gallery/image3-cropped.jpg"/>
                    <img src="images/gallery/image4-cropped.jpg"/>
                    <img src="images/gallery/image5-cropped.jpg"/>
                    <img src="images/gallery/image7-cropped.jpg"/>
                </div>
            </div>
        </div>
        <div class="eight columns">
            <div class="slider-wrapper theme-default">
                <div id="slider2" class="nivoSlider">
                    <img src="images/gallery/image8-cropped.png"/>
                    <img src="images/gallery/image10-cropped.png"/>
                    <img src="images/gallery/image12-cropped.png"/>
                    <img src="images/gallery/image13-cropped.png"/>
                    <img src="images/gallery/image15-cropped.png"/>
                </div>
            </div>
        </div>
        <div class="eight columns">
            <div class="slider-wrapper theme-default">
                <div id="slider3" class="nivoSlider">
                    <img src="images/gallery/image18-cropped.png"/>
                    <img src="images/gallery/image19-cropped.png"/>
                    <img src="images/gallery/image20-cropped.png"/>
                </div>
            </div>
        </div>
        <div class="eight columns">
            <div class="slider-wrapper theme-default">
                <div id="slider4" class="nivoSlider">
                    <img src="images/gallery/image21-cropped.png"/>
                    <img src="images/gallery/image22-cropped.png"/>
                    <img src="images/gallery/image24-cropped.png"/>
                </div>
            </div>
        </div>
        <div class="slider-wrapper theme-default">
                <div id="slider5" class="nivoSlider">

                    <img src="images/gallery/image2-cropped.jpg"/>
                    <img src="images/gallery/image3-cropped.jpg"/>
                    <img src="images/gallery/image4-cropped.jpg"/>
                    <img src="images/gallery/image5-cropped.jpg"/>
                    <img src="images/gallery/image7-cropped.jpg"/>
                    <img src="images/gallery/image8-cropped.png"/>
                    <img src="images/gallery/image10-cropped.png"/>
                    <img src="images/gallery/image12-cropped.png"/>
                    <img src="images/gallery/image13-cropped.png"/>
                    <img src="images/gallery/image15-cropped.png"/>
                    <img src="images/gallery/image18-cropped.png"/>
                    <img src="images/gallery/image19-cropped.png"/>
                    <img src="images/gallery/image20-cropped.png"/>
                    <img src="images/gallery/image21-cropped.png"/>
                    <img src="images/gallery/image22-cropped.png"/>
                    <img src="images/gallery/image24-cropped.png"/>

                </div>
            </div>

        <div id="space">
        </div>

        <div id="footer">
            <img src="images/footer-line.png" width="960" height="25"></a>
            <a href="about.html">about</a><span>|</span><a href="portfolio.html">portfolio</a><span>|</span><a href="resume.html">resume</a><span>|</span><a href="contact.html">contact</a>
            <p></p>
        </div>
        <div id="social">
            <a href="https://www.behance.net/thestripedphoenix"><img src="images/behance-icon.png" width="30" height="30"></a></a><a href="https://dribbble.com/thestripedphoenix"><img src="images/dribbble-icon.png" width="30" height="30"></a></a><a href="http://www.linkedin.com/pub/michelle-shean/65/407/129"><img src="images/linkedin-icon.png" width="30" height="30"></a></a><a href="http://www.youtube.com/user/mps3545"><img src="images/youtube-icon.png" width="30" height="30"></a></a><a href="#"><img src="images/zazzle-icon.png" width="30" height="30"></a></a>
        </div>
        <div id="copyright">
            <p>Copyright Michelle Shean, 2014</p>
        </div>

</div><!-- .container-->

</div><!-- content -->

我的部分CSS（适用于手机尺寸）

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

/*
Setup a basic body
*/
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Helvetica; Arial; sans-serif;
font-size: 12px;
}

/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
background-color: #000000;
padding: 10px;
padding-bottom: 0px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow:  0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow:  0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}

#logo {
display: inline;
}

/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #000000;
font-family:  'league_gothicregular'; Helvetica; Arial; Sans-serif;
padding: 52px 10px 10px 10px;
position: relative;
max-width: 480px;
height: auto;
overflow-x: hidden;
-webkit-box-shadow:  -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow:  -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
float: right;
margin-right: 50px;
margin-top: 23px;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #4569b2;
background: -moz-linear-gradient(top,  #000000 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000)color-      stop(100%,#000000));
background: -webkit-linear-gradient(top,  #000000 0%,#000000 100%);
background: -o-linear-gradient(top,  #000000 0%,#000000 100%);
background: -ms-linear-gradient(top,  #000000 0%,#000000 100%);
background: linear-gradient(to bottom,  #000000 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}

/*
The white stripes in the hamburger button
*/
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}

/*
The navigation container in the background
*/
nav {
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x:hidden;
overflow-y:auto ;
background: #3e3c3d;
background: -moz-linear-gradient(top,  #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3c3d), color-stop(100%,#2d2c2d));
background: -webkit-linear-gradient(top,  #3e3c3d 0%,#2d2c2d 100%);
background: -o-linear-gradient(top,  #3e3c3d 0%,#2d2c2d 100%);
background: -ms-linear-gradient(top,  #3e3c3d 0%,#2d2c2d 100%);
background: linear-gradient(to bottom,  #3e3c3d 0%,#2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3c3d', endColorstr='#2d2c2d',GradientType=0 );
}

/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}

nav li {
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #fff;
text-decoration: none;
}

/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index: 5;
min-height: 1062px;
}

#header {
display: none;
}

#logo {
display: inline;
}

#slider1 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
margin-bottom: 30px;
}

#slider2 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
}

#slider3 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}

#slider4 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}

#slider5 {
display: inline;
position: relative;
width: auto;
float: left;
clear: both;
}

#about-pic {
position: relative;
margin-left: 10px;
margin-top: 10px;
min-width: 220px;
max-width: 220px;
float: left;
}

#section-title-blue {
position: relative;
clear: both;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #00CBD4;
}

#section-title-green {
position: relative;
clear: both;
margin-top: 5px;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #2AFF38;
}

#about-pic img {
width: 100%;
}

#about-text {
position: relative;
margin-top: 30px;
float: right;
width: 100%;
font-size: 1.1em;
font-family: Helvetica, Arial, Sans-serif;
}

#signature {
font-family: Helvetica, Arial, Sans-serif;
float: left;
margin-top: 40px;
max-width: 120px;
max-height: 120px;
}

#portfolio-gallery {
display: none;
}

#portfolio-nav {
display: none;
}

#mobile-gallery {
display: inline-block;
position: relative;
margin-top: 50px;
clear: both;
padding: 20px;
padding-right: 30px;
padding-top: 10px
max-width: 480px;
max-height: 720px;
}

#mobile-gallery img {
width: auto;
}

/* line 180, ../sass/screen.sass */
.image-row {
 *zoom: 1;
 margin-bottom: 20px;
 }
 /* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass     /stylesheets/compass/utilities/general/_clearfix.scss */
 .image-row:after {
 content: "";
 display: table;
 clear: both;
}

/* line 184, ../sass/screen.sass */
.example-image-link {
display: inline-block;
margin: 0 10px 20px 10px;
line-height: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 2px solid #5e5e5e;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 191, ../sass/screen.sass */
.example-image-link:hover {
 border: 2px solid #2AFF38;
}

/* line 194, ../sass/screen.sass */
.example-image {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}

#subheading {
position: relative;
clear: both;
max-width: 360px;
min-width: 430px;
height: 40px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-size: 1.5em;
}

#resume-text {
position: relative;
max-width: 360px;
max-height: 130px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-family: Helvetica, Arial, Sans-serif;
}

#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 70px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1.2em;
}

#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1em;
}

#form {
position: relative;
max-width: 450px;
min-width: 460px;
height: 820px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 40px;
float: left;
clear: both;
font-size: 1.2em;
padding: 20px;
border: none;
}

input, textarea {
padding: 5px;
margin: 10px;
font-family: Helvetica, Arial, Sans-serif;
font-size: medium;
font-weight: bold;
outline: none;
}

input[type=text], textarea {
width: 220px;
background-color: #FFFFFF;
}

input[type=submit] {
width: 100px;
background-color: #2AFF38;
border: 1px solid #000000;
font-size: large;
color: #FFFFFF;
margin-bottom: 30px;
}

input[submit]:active {
background-color: #00CBD4;
}

h1 {
font-family: 'league_gothicregular', Arial, sans-serif;
font-size: 2.1em;
}

#footer {
position: relative;
margin-top: 10px;
max-width: 960px;
max-height: 80px;
float: left;
text-align: center;
font-size: 1.5em;
}

#footer img {
width: 100%;
}

#social {
position: relative;
clear: both;
max-width: 200px;
height: 40px;
margin: auto;
padding-bottom: 10px;
}

#social img {
margin: 5px;
display: inline-block;
}

#copyright {
position: relative;
clear: both;
text-align: center;
margin: auto;
min-width: 30px;
padding-bottom: 15px;
font-size: 1.2em;
}

a:link {
color: #FFFFFF;
}

a:active {
color: #FFFFFF;
}

a:visited {
color: #FFFFFF;
}

span {
margin: 5px;
}

}

以下是我的HTML标记的主管：

    <head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>the striped phoenix | Michelle Shean</title>
    <meta name="description" content="portfolio">
    <meta name="author" content="portfolio">
    <body oncontextmenu="return false;">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />

    <!--Using jQuery and jQuery UI for display effects
  ================================================== -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <!--Using the hamburger menu display code
   =================================================== -->
    <script src="javascripts/hamburger.js"></script>

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/skeleton.css">
    <link rel="stylesheet" href="stylesheets/layout.css">
    <link rel="stylesheet" href="stylesheets/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="stylesheets/slider-themes/default/default.css" type="text/css" media="screen" />


    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


</head>

jQuery代码与您的演示相同。

jQuery(document).ready(function() {

    //Open the menu
    jQuery("#hamburger").click(function() {

        //set the width of primary content container -> content should not scale while animating
        var contentWidth = jQuery('#content').width();

        //set the content with the width that it has originally
        jQuery('#content').css('width', contentWidth);

        //display a layer to disable clicking and scrolling on the content while menu is shown
        jQuery('#contentLayer').css('display', 'block');

        //disable all scrolling on mobile devices while menu is shown
        jQuery('#container').bind('touchmove', function(e){e.preventDefault()});

        //set margin for the whole container with a jquery UI animation
        jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
            duration: 700
        });

    });

    //close the menu
    jQuery("#contentLayer").click(function() {

        //enable all scrolling on mobile devices when menu is closed
        jQuery('#container').unbind('touchmove');

        //set margin for the whole container back to original state with a jquery UI animation
        jQuery("#container").animate({"marginLeft": ["0", 'easeOutExpo']}, {
            duration: 700,
            complete: function() {
                  jQuery('#content').css('width', 'auto');
                jQuery('#contentLayer').css('display', 'none');

            }
        });
    });

});

Answer 1

你是否使用jQuery部分就像onclick动画一样显示菜单。

请看这里：

demo fiddle