本文最后更新于 230 天前，其中的信息可能已经有所发展或是发生改变。
无聊翻清华大学网站源码的时候发现了一个十分漂亮的导航栏显示效果，于是乎扒了扒源码。
（想体验一下效果点这里）
这里附上切换按钮的CSS选择器😋（就是右上角的蓝紫色按钮）
body.navShow .g-head a.navA分析完代码发现是这样实现的：
点击这个按钮的时候会执行js代码，让<body>的class中多一个navShow属性（若已有改属性则移除）
对于body.navShow的处理则写在网站根目录/style/index.css里面，这边摘出来并附上注释：
（g-nav是顶部导航栏，g-nav2是全屏导航栏）
...
body.navShow {
overflow: hidden;
/*让原body中的所有元素超出屏幕的内容隐藏起来，由此实现鼠标滚轮滚动的时候不会滚动原body中的内容*/
}
body.navShow .g-head .btn-list {
height: 1.1rem;
}
body.navShow .g-head a.navA:after {
background-image: url("../image/img31.png");//改变按钮图片
}
body.navShow .g-nav {
opacity: 0;
visibility: hidden;//隐藏顶部导航栏
}
body.navShow .g-nav2 {
opacity: 1;
visibility: visible;//显示全屏导航
}
...而改变背景图片则是因为g-nav2本身有背景图片（即全屏导航栏原本的背景图片）。