css实现悬浮折叠打开按钮菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:css实现悬浮折叠打开按钮菜单效果代码

代码标签: css 悬浮 按钮 折叠 菜单

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
    <style>
        html,
        body {
          position: relative;
          width: 100%;
          height: 100%;
          margin: 0;
          overflow: hidden;
        }
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #1c2026;
        }
        
        /* menu style */
        .menu {
          width: calc(54px * 4 + 30px * 3);
          height: 54px;
          margin: 0 auto;
          -webkit-filter: url("#goo");
          filter: url("#goo");
        }
        
        ul {
          position: relative;
          margin: 0;
          padding: 0;
          list-style: none;
        }
        
        li {
          width: 54px;
          height: 54px;
          border-radius: 50%;
          cursor: pointer;
        }
        
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0