Question

我真的很感激一些帮助，我有jQuery UI并尝试将幻灯片效果实现到我的菜单（当菜单打开它从右边滑出时），但是我无法让它工作。

HTML：

<!-- nav -->
<nav class="nav" role="navigation">
    <a class="navbutton">
        <section class="menutext">Menu</section>
        <div class="hamburger">
            <span class="menuline1" style="background:black;"></span>
            <span class="menuline2" style="background:black;"></span>
            <span class="menuline3" style="background:black;"></span>
        </div>
    </a>
    <div class="mainmenu">  
        <div class="navbutton-close">X
            <?php mainmenu(); ?>
        </div>
    </div>
</nav>
<!-- /nav -->

的CSS：

/* Nav Global */
.hamburger {
    width: 20px;
    height: 30px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.menuline1 {
    position: absolute;
    height: 4px;
    width: 100%;
    top: 4px;
}
.menuline2 {
    position: absolute;
    height: 4px;
    width: 100%;
    top: 12px;
}
.menuline3 {
    position: absolute;
    height: 4px;
    width: 100%;
    top: 20px;
}
.menutext {
    display: inline-block;
    vertical-align: middle;
}
.navbutton-open {
    margin-left: 15px;
    cursor: pointer;
    display: block;
    visibility: visible; 
}
.navbutton-close {
    text-align: left;
    width: 100%;
    padding: 20px;
    cursor: pointer;
    font-size: 50px;
}
.navbutton-extend {
    visibility: hidden; 
}
.mainmenu {
    position: fixed;
    top:0;
    right: 0;
    background-color: rgba(181, 181, 181, 0.54);
    height: 100%;
    width: 300px;
    transition:all 1.0s ease-in-out;
}
/* End Nav Global */

Jquery的：

$(document).ready(function() {
     $(".navbutton").addClass("navbutton-open");
     $(".mainmenu").hide();

     $(".navbutton").click(function(){
           $("a.navbutton").addClass("navbutton-extend");
           $(".mainmenu").show("slide", {direction: "right"}, 1000);
     });

     $(".navbutton-close").click(function(){
           $(".navbutton").addClass("navbutton-open").removeClass("navbutton-extend");
           $("div.mainmenu").hide();
     });
});

Answer 1

所以这很容易jQuery，从我收集到的你想要一个从左到右打开的封闭导航（如果我错了就纠正我）。

要执行此操作，请将菜单容器设置为宽度为0。在单击菜单按钮时，您要添加一个具有宽度设置的类（不要在javaScript中使用CSS中的内容）过渡效果来自CSS3过渡规则。宽度过渡。实际上，click事件只会添加一个类。

这是一个简单的例子。

https://jsfiddle.net/ovzfkfvf/

// Super simple html 
<div class="wrapper">
  <a href="#" class="btn">Button</a>

  <div class="menu-container">
    <p>
      This is the menu container
    </p>
  </div>
</div>

// Basic CSS - notice with width 0 on the menu element
.wrapper {
  position: relative;
}

.btn {
  display: block;
  width:100%;
  color:white;
  background:black;
  text-align:center;
  padding:10px 0;
}

.btn.active {
  background:green;
}

.menu-container {
  position:absolute;
  left:0;
  top:40px;
  overflow:hidden;
  width:0;
  transition:width 1s cubic-bezier(0,0,0,1);
  color:white;
  background:red;
}

.menu-container.open {width:100%;}

// The click event
$('.btn').on('click', function(e) {
    e.preventDefault();

  $(this).toggleClass('active');
  $('.menu-container').toggleClass('open');
});

PS：正确格式化代码并包含指向小提琴的链接，以便人们更轻松地提供帮助。

Answer 2

我希望此代码能够满足您的需求

＆＃13;

   

 $(".hamburger").click(function(){
  $('.mainmenu').toggle( "slide" );
});
$(".mainmenu").click(function(){
  $(this).toggle( "slide" );
});

＆＃13;

.hamburger {
    width: 20px;
    height: 30px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.menuline1 {
    position: absolute;
    height: 4px;
    width: 100%;
    top: 4px;
}
.menuline2 {
    position: absolute;
    height: 4px;
    width: 100%;
    top: 12px;
}
.menuline3 {
    position: absolute;
    height: 4px;
    width: 100%;
    top: 20px;
}
.menutext {
    display: inline-block;
    vertical-align: middle;
}
.navbutton-open {
    margin-left: 15px;
    cursor: pointer;
    display: block;
    visibility: visible; 
}
.navbutton-close {
    text-align: left;
    width: 100%;
    padding: 20px;
    cursor: pointer;
    font-size: 50px;
}
.navbutton-extend {
    visibility: hidden; 
}
.mainmenu {
    position: fixed;
    top:0;
    right: 0;
    background-color: rgba(181, 181, 181, 0.54);
    height: 100%;
    width: 300px;
    display : none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="nav" role="navigation">
    <a class="navbutton">
        <section class="menutext">Menu</section>
        <div class="hamburger">
            <span class="menuline1" style="background:black;"></span>
            <span class="menuline2" style="background:black;"></span>
            <span class="menuline3" style="background:black;"></span>
        </div>
    </a>
    <div class="mainmenu">  
        <div class="navbutton-close">X
            <?php mainmenu(); ?>
        </div>
    </div>
</nav>

＆＃13;

幻灯片效果无法在我的网站上运行

2 个答案: