Question

我正在开发一个模仿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>

我的javascript就是这样

function setCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) {
        end = dc.length;
        }
    }
    return unescape(dc.substring(begin + prefix.length, end));
} 

function navLoad() {
var navmode = getCookie("navigator");
var nav = document.getElementById("nav");
var menu = document.getElementById("menu");
var control = document.getElementById("control");
var container = document.getElementById("container");

if (navmode == null || navmode == "") {
    setCookie("navigator", "open", 90);
    navmode = "open";
}

switch(navmode) {
    default:
        nav.classList.add("visible");
        nav.style.width = "20%";
        menu.style.width = "85%";
        control.style.width = "15%";
        container.style.width = "80%";
        break;
    case "closed":
        nav.style.width = "3%";
        menu.style.width = "0%";
        menu.style.display = "none";
        control.style.width = "100%";
        container.style.width = "97%";
        break;
}
}

和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);
}

Answer 1

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

没有jquery，你可以说
HTML

 <button onclick="reSize()" />

的Javascript

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

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

这也可以通过jquery使用：

来完成

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

两种方法都应同时调整#container和#nav，但可能存在堆叠问题，具体取决于您设置页面的方式。

不幸的是，这里的脚本都没有考虑切换，但这可以通过向#nav添加一个类（如打开/关闭或活动/非活动）然后关闭if / then语句来轻松实现。哪个班级当前有效。

屏幕高度滑动菜单和内容

1 个答案: