畫布外導航菜單不起作用

Question

我不是怎么回事，但是如果有人可以幫助我，那可能很棒。 因此，我正在嘗試創建一個導航菜單，該菜單對於移動版式而言是畫布之外的，但是我一直遇到問題； 我現在處於死胡同。 如果有人可以看一下我的代碼並為我指出正確的方向，那就太好了。

的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/mobilnavprotoscript.js"></script>
    <script src="../scripts/javascript/modernizr.custom.64630.js"></script>
    <link href="../css/mobilnavstyles.css" rel="stylesheet" type="text/css" media="screen"/>
    <title>Welcome to My Domain</title>
</head>
<body>
        <nav id="toggle" class="main">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
            </nav>       
        <div id="wrapper">
        <div class="mobilmenu"><a href="#toggle" class="nav-link"><i class="fa fa-bars"></i></a></div>       
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>
               <div id="content">
                <article class="content-main">
                    <section>
                        <h2>Heading goes here...</h2>
                        <time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time>
                        <p>Content will go here...</p>
                    </section>
                </article>
                <aside>
                    <p>More content soon...</p>
                </aside>
                </div>
        <footer>
                <div class="copyright">
                    <span>All rights reserved 2014.</span>
                </div>
            <nav class="foot">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Video</a></li>
                    <li><a href="#">Pictures</a></li>
                    <li><a href="#">Audio</a></li>
                    <li><a href="#">Other Work</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
            </nav>
        </footer>
        </div>               
    </body>
 </html>

這是我想做的必要的CSS（請讓我知道您是否需要查看CSS的其他部分。）：

nav#toggle
{
position: absolute;
top: 0;
bottom: 0;
width: 15.750em;
left: -15.750em;
transform: translate(0px, 0px);
transition: 0.15s ease;
height: 100%;
}

nav#toggle.active 
{
transform: translate(15.750em, 0px);
}

nav.main
{
margin: 0;
padding: 0;
font-family: 'bebas_neueregular',sans-serif;
box-shadow: 0px 2px 3px #393333;
background-color: #950707;
}    

nav.main ul
{
display: flex;
flex-direction: column;
text-align: right;
font-size: 1.45em;
list-style: none;
margin: 0;
padding: 0;
}

nav.main ul li
{
border-bottom: 1px solid  #af1b1b;
}

nav.main ul li:first-child
{
border-top: 1px solid  #af1b1b;
}

nav.main ul li a
{
display: block;
text-decoration: none;
color: inherit;
padding: 0.35em;
}

nav.main ul li a:hover
{
background-color: #ffffff;
}

div.mobilmenu
{
background-color: #950707;
}

div.mobilmenu a
{
text-decoration: none;
color: inherit;
}

div.mobilmenu a i
{
font-size: 1.75em;
padding: 0.32em;
}

div.mobilmenu a i:hover
{
background-color: #ffffff;
transition: 325ms ease;
}

#wrapper
{
display: flex;
flex-direction: column;
transform: translate(0px, 0px);
transition: 0.15s ease;
}

#wrapper.active
{
transform: translate(15.750em, 0px);
}

這是我正在使用的jQuery腳本：

$(document).ready(function () {
 $('a.nav-link').click(function () {
   $('nav#toggle').toggleClass('active');
   $('#wrapper').toggleClass('active');
 });
});

Answer 1

這就是你想做的嗎？ http://jsfiddle.net/qsHRh/2/

$(document).ready(function () {
    $('a.nav-link').click(function () {
        $('nav#toggle').toggleClass('active');
        $('#wrapper').toggleClass('active');
        });
    $('.nav-link').click(function(){
        $('#toggle').animate({left:'0px'},200);
        });
    $(document).click(function(e){
        if (!$('#toggle, .nav-link').is(e.target)   && $('#toggle').has(e.target).length === 0){
            $('#toggle').animate({left:'-15.750em'},200);
            }
        });
});

更新：

您需要將整個頁面包裝成一個div，我們將其稱為#whole，然后為其指定樣式， position:relative; left:0; top:0; position:relative; left:0; top:0; 然后根據需要移動整個頁面。 檢查以下小提琴：

http://jsfiddle.net/qsHRh/3/

我認為這就是您所需要的。 如果沒有，請告訴我。

畫布外導航菜單不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2014-06-16 08:13:39

畫布外導航菜單不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2014-06-16 08:13:39

解決方案1
0 已采納 2014-06-16 08:13:39