html侧边导航栏,浮动侧边导航栏的基本布局

短命女 2022-10-06 11:46 261阅读 0赞

先来一张效果图

![a34e46fcb0a2][]

效果图

HTML

JS Bin

头部内容

左侧的一些内容

*  首页
 *  学习中心
 *  考试中心
 *  考试动态

子元素1--首页

子元素2--学习中心

子元素3--考试中心

子元素4--考试动态

子元素5

子元素6

子元素7

CSS

\*\{

margin:0;

padding:0;

body\{

overflow-y: scroll;

\-ms-overflow-style: none;

scrollbar-width: none;

body::-webkit-scrollbar \{

display: none;

.detail\{

position: absolute;

top: 0;

left: 0;

/\* bottom: 0;

right: 0; \*/

border: 2px solid red;

.top \{

border: 1px solid;

position: fixed;

top: 0;

height: 60px;

width: 100vw;

.Content \{

height: 3900px;

width: 100vw;

border: 1px solid red;

margin-top: 60px;

position: relative;

left: 0px;

/\* overflow-y: scroll; \*/

.leftContent \{

position: fixed;

left: 0;

border: 1px solid blue;

ul \{

position: fixed;

right: 0;

list-style-type: none;

margin: 0;

padding: 0;

a \{

display: block;

background-color: green;

color: white;

width: 80px;

text-align: center;

padding: 4px;

text-decoration: none;

a:hover,

a:active \{

background-color: \#98bf21;

.parent \{

border: 1px solid green;

width: 160px;

position: absolute;

left: 190px;

.child \{

height: 550px;

border-top: 1px solid blue;

JavaScript

var child1 = document.getElementById('child1');

var child2 = document.getElementById('child2');

var child3 = document.getElementById('child3');

var child4 = document.getElementById('child4');

// 点击首页和考试动态的跳转方式是通过window.scrollTo()

child1.onclick = function()\{

window.scrollTo(\{

top: 0,

behavior: "smooth"

\});

child4.onclick = function()\{

window.scrollTo(\{

top: 1655,

behavior: "smooth"

\});

// 点击学习中心和考试中心是通过element.scrollIntoView()

child2.onclick = function()\{

document.querySelector('.studyCenter').scrollIntoView(\{ behavior: 'smooth', block: 'start' \});

child3.onclick = function()\{

document.querySelector('.examinationCentre').scrollIntoView(\{ behavior: 'smooth', block: 'start' \});

点击预览

两种跳转方式的详情参考MDN文档：window.scrollTo()和element.scrollIntoView()

element.scrollIntoView()是相对于视口跳转，而window.scrollTo()是根据自定义的位置跳转，从而更加灵活。

[a34e46fcb0a2]: /images/20221005/43fc72c7fd304d4cacbf9ed8d48b9ed0.png

html侧边导航栏,浮动侧边导航栏的基本布局

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

相关 element-admin的侧边栏导航和权限

相关侧边导航栏

相关 html侧边导航栏,浮动侧边导航栏的基本布局

相关 Puma - jQuery&Css3侧边栏导航菜单插件_Js侧边导航插件

相关 js实现侧边导航栏展开和折叠

相关 html+js制作侧边下拉导航栏菜单

相关手风琴导航栏侧边-jQuery实现-案例

相关 CSS实现侧边栏导航