html - 试图将扩展导航栏从右侧移动到左侧

Question

这是扩展导航栏的 HTML 代码，它来 self 正在编辑的模板，我已经能够将导航菜单栏向左移动，当我点击它时，它会在右侧展开我也在尝试修复并移动它以在左侧展开。

<div class="jumbotron home home-fullscreen" id="home">
    <div class="mask"></div>

<a href="" class="menu-toggle" id="nav-expander"><i class="fa fa-bars">
</i></a>
    <!-- Offsite navigation -->
    <nav class="menu">
        <a href="#" class="close"><i class="fa fa-close"></i></a>
        <h3> <a href="index.html"> spacecurb </a> </h3>
        <ul class="nav">
            <li><a data-scroll href="#home">Apartment</a></li>
            <li><a data-scroll href="#services">Hostel</a></li>
            <li><a data-scroll href="#portfolio">Room Rent</a></li>
            <li><a data-scroll href="#contact">Work Spaces</a></li>
            <li><a data-scroll href="#contact">hotels</a></li>
            <li><a data-scroll href="#contact">sign up</a></li>
            <li><a data-scroll href="#contact">log in</a></li>
            <li><a data-scroll href="#contact">about</a></li>
            <li><a data-scroll href="#contact">contact</a></li>
            <li><a data-scroll href="#contact">help</a></li>
            <li><a data-scroll href="#contact">add property</a></li>
        </ul>
        <ul class="social-icons">
            <li><a href=""><i class="fa fa-facebook"></i></a></li>
            <li><a href=""><i class="fa fa-twitter"></i></a></li>
        </ul>
    </nav>

这是 CSS 代码，我能够将展开的导航栏向左移动，但它在右侧展开

.menu-toggle{
position: absolute;
left: 15px; 
top: 15px;
font-size: 30px;
color: #fff;
}

.menu{
width: 300px;
display: block;
background: #333;
height: 100%;
top: 0;
right:-300px;
position: fixed;
z-index: 100;
text-align: center;
transition: right 0.4s;
}

.menu.nav-expanded{
right: 0;
}

.menu .close{
color: #fff;
margin-right: 10px;
margin-top:10px;
}

Answer 1

你有

.menu{
   width: 300px;
   right: -300px;
 }

.menu.nav-expanded{
  right: 0;
}

这意味着您的菜单在屏幕外(右侧)，当它展开时会出现在 right:0 位置的页面。

现在，如果你想让它在展开模式下转到左侧，请删除 right:0 并设置:

.menu.nav-expanded{
  left: 0;
}

要通过单击正常屏幕来关闭菜单，请添加此 jquery 脚本 block :

<script>

    $(document).ready(function ()
    {
        $(document).click(function (e)
        {
            if (!$(e.target).hasClass('menu-toggle') && !$(e.target).closest('.menu').hasClass('menu'))
                $('.menu').removeClass('nav-expanded');
        });
    });
</script>