Question

我正在使用Phonegap设计应用程序，这允许我使用HTML5，CSS3和JS进行编码。我创建了一个切换菜单，点击后显示并隐藏自己。这是通过添加＆＃34; display：none＆＃34;和＆＃34;显示：内联块＆＃34;属性。我已经阅读了其他回复如何向此类属性添加转换的帖子。我的问题是我完全迷失了，因为我需要添加CSS属性，因为我的HTML文件中有.css文件和脚本标记。有什么想法吗？：）

这是我的代码：

＆＃13;

/* This script is written in my HTML file inside a <script> tag*/

/* My JS */
            function openSlideMenu() {
                $('#side-menu').css({"display": "inline-block"});
            }

            function closeSlideMenu() {

                $('#side-menu').css('display','none');

            }

        $(document).ready(function() {

        });

        app.initialize();

＆＃13;

.side-nav {
	box-sizing: border-box;
	z-index: 6000;
	position: absolute;
	height: 100vh;
	width: 70%;
	background-color: #7b66db;
    background-image: -moz-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: -webkit-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: linear-gradient(135deg, #7b66db 0%, #9673fb 100%);
    -webkit-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	-moz-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
}

＆＃13;

<!-- MY IMAGES WON'T SHOW BECAUSE I HAVE THEM IN MY LOCAL FILES. THE IMAGE THAT SHOULD SHOW IS AN "X" ICON FOR CLOSE. -->

<!-- Side Nav Menu -->
        <div class="side-nav" id="side-menu">
            <div class="top-bar">
  
                <div class="vpay-logo-div">
                    <a href="#">
                        <img src="img/vpay-logo.png" class="vpay-logo" alt="Brand Logo">
                    </a>
                </div>
                <div class="close-icon-div">
                    <a href="#" class="btn-close" onclick="closeSlideMenu()">              
                      <img src="img/close-icon.png" class="close-icon-nav" alt="Close Icon">
                    </a>
                </div>
            </div>
            <nav>
                <ul>
                  <li>List item</li>
                </ul>
            </nav>
        </div>
        <!-- /Side Nav Menu -->

＆＃13;

Answer 1

我真的不知道如何使用Phonegap创建应用程序但是如果你看到Jquery，我可以看到你可以在点击按钮时放置切换功能documentation here

$(document).ready(function() {
   $('#button-open-and-close-menu').click(function(){
       $('#side-menu').toggle(200);
   });
});

您也可以使用动画功能documentation here制作它，使其像左侧的幻灯片效果一样

$(document).ready(function() {
   $('#button-open-and-close-menu').click(function(){
        $('#side-menu').animate({width:'toggle',marginLeft:'0'},300);
   });
});
//CSS
#side-menu {
   margin-left : -100%;
}

侧边菜单切换过渡效果？

1 个答案: