html 悬浮菜单按钮,HTML右侧悬浮菜单

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

模仿的是B站的右侧菜单

代码：

右侧悬浮菜单

*{margin:0;padding: 0;box-sizing: border-box;}

div{border:1px solid black;}

div>div{border:1pxdashed red;}

#topDiv{height:45px;}

#middleDiv{height:300px;}

#menuDiv{

height: 3000px;

}

#bottomDiv{

height: 150px;

}

#contentDiv>div{

height:300px;

margin:0 auto;

border:1pxdashed blue;

transition:width 0.1s ease-out;

}

#list-box{

/*悬浮菜单样式*/

position:fixed;

left:50%;

margin-left:510px;

top:355px;

z-index:2;

transition:margin-left 0.1s ease-out;

}

.item{

/*悬浮菜单内容样式*/

width:54px;

height:24px;

line-height:24px;

text-align:center;

font-size:12px;

}

/*窗口宽度变化影响contentDiv和悬浮菜单宽度*/

@mediascreen and (max-width:1020px){#contentDiv>div{width: 100%;}}

@mediascreen and (min-width:1170px){#contentDiv>div{width: 999px;}}

@mediascreen and (max-width:1170px){#list-box{display: none;}}

@mediascreen and (min-width:1254px){

#contentDiv>div{width:1100px;}

#list-box{margin-left:560px;}

}

@mediascreen and (min-width:1354px){

#contentDiv>div{width:1200px;}

#list-box{margin-left:610px;}

}

@mediascreen and (min-width:1490px){

#contentDiv>div{width:1300px;}

#list-box{margin-left:660px;}

}

@mediascreen and (min-width:1575px){

#contentDiv>div{width:1400px;}

#list-box{margin-left:710px;}

}