Javascript 屏幕高度滑动菜单和内容_Javascript_Jquery_Html_Css

Javascript 屏幕高度滑动菜单和内容

javascript jquery html css

Javascript 屏幕高度滑动菜单和内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在一个模拟Youtube当前菜单显示的示例网站上工作，在这个网站上，点击按钮可以将菜单滑入或滑出视图，最终结果存储在一个cookie中，因此当用户从一个页面转到另一个页面时，他们拥有相同的菜单位置，访问该网站也不那么烦人。我想通过扭转来实现这一点，在单击按钮时，页眉、正文和页脚必须与导航器一起滑动。我已经完成了大部分工作，但我不太适应jquery <body onLoad="navLoad();"> <div id="wrapper"> <div id=

我正在一个模拟Youtube当前菜单显示的示例网站上工作，在这个网站上，点击按钮可以将菜单滑入或滑出视图，最终结果存储在一个cookie中，因此当用户从一个页面转到另一个页面时，他们拥有相同的菜单位置，访问该网站也不那么烦人。我想通过扭转来实现这一点，在单击按钮时，页眉、正文和页脚必须与导航器一起滑动。我已经完成了大部分工作，但我不太适应jquery

<body onLoad="navLoad();">
<div id="wrapper">
    <div id="nav"> 
        <div id="menu">
            <div id="logo"></div>
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things
            Testing things

        </div>
        <div id="control">
            <button>
                &nbsp;
            </button>
        </div>
    </div>
    <div id="container">
        <header>

        </header>
        <div id="middle">

        </div>
        <footer>

        </footer>
    </div>
</div>

和css供参考

/* SITE LOOK */
html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#wrapper {
    min-height: 100%;
    position: relative; 
    background: rgba(255,204,255,1);
}

#container {
    float: right;
    background: rgba(0,153,0,1);
}

nav, #menu, #control, #container{ height: 100vh; }

/* NAVIGATOR STYLE */
#nav {
    float: left;
    left: 0;
    background: rgba(0,102,255,1);
}

#menu {
    float: left;
    margin: 0;
}

#control {
    float: right;
    margin: 0;
    background: rgba(0,0,0,1);
}

/* HEADER STYLE */
header {
    width: 100%;
    height: 60px;
    background: rgba(51,102,0,1);
}

/* MIDDLE STYLE */
#middle {
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
    background: rgba(0,51,0,1);
}

/* FOOTER STYLE */
footer {
    width: 100%;
    height: 60px;
    background: rgba(102,153,0,1);
}

我真的建议使用jQuery和，这可以真正简化事情

没有jquery，您只需说
HTML

这将设置动画在您单击按钮时运行，更改将花费500毫秒（将此数字更改为您想要的任何速度）

这也可以通过jquery实现，使用：

$(document).ready( function() {
      $('#nav').click( function() {
           $('#nav').animate( { width: 0 }, 500);
           $('#container').animate( { width: '100%' }, 500);
      });
});

这两种方法都应该同时调整

#容器

和

#nav

的大小，尽管可能会出现堆叠问题，具体取决于页面的设置方式

不幸的是，这里的两个脚本都不考虑切换，但这可以通过向

#nav

（类似于打开/关闭或活动/非活动）添加一个类，然后运行当前活动的类的if/then语句来轻松实现。

共享一个相同的类将是一个好主意！我不知道怎么拉小提琴，让我试试吧。是的，我不习惯拉小提琴，这可能有一段时间我在拉小提琴时无法达到预期的效果，毕竟我可能需要更多的时间。@EltonRodriguez这里有一个你提供的数据：addClass，你是说？我想知道如何在jquery中做到这一点。我知道，通过一个类，我可以将它用作加载时导航是否应打开的基础，同样，通过按钮单击事件。在jquery中添加一个类会是什么样子？@EltonRodriguez在jquery中它只是

$（object）.addClass（'class'）

。只需通过

.addClass（'class1 class2'）

即可添加多个类，也可以通过

.removeClass（'class'）

删除它们。将

.removeClass（）

放置为空将删除所有类。最后，还有一个

.toggleClass（'class'）

函数，您可以在这种情况下使用它，它可以打开或关闭一个类。谢谢您，我在JQuery中知道这一点，但我决定最好使用js而不是JQuery，因为我真的不确定使用什么代码来完成我迄今为止成功完成的工作。我唯一想知道的是现在如何使用javascript左右滑动，但我正在尽我最大的努力使用logicWell来研究如何使用绝对元素左右滑动，只需简单地更改

left:

wait使用[code]left:[/code]是否滑动它？你能给我举一个使用调整大小功能的例子吗？我已经用这个例子做了一些工作，但是我不知道如何使用[code]left:[/code]使它左右移动。是的，我理解你的意思是左边的css[code]：[/code]我只是不知道如何使用它来滑动它。

 <button onclick="reSize()" />

function reSize() {
    setTimeout(reSize,500);
    //Add Script for Resizing here (same for when cookie is closed)
    //Add Script for setCookie() here
}

$(document).ready( function() {
      $('#nav').click( function() {
           $('#nav').animate( { width: 0 }, 500);
           $('#container').animate( { width: '100%' }, 500);
      });
});