Question

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

<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脚本块：

<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>

尝试将展开的导航栏从右侧移动到左侧

1 个答案: