Question

我要创建侧边栏菜单。在悬停时，我想显示内容，否则它应该在侧边栏菜单上显示唯一的图标

Answer 1

查看以下给定的代码段。

您期望这样吗？

    *, *::before, *::after {
     box-sizing: border-box;
    }

    body {
     font-family: sans-serif;
     font-size: 1em;
     color: #333;
    }
    h1 {
    font-size: 1.4em;
    }
    em {
     font-style: normal;
    }
    a {
     text-decoration: none;
     color: inherit;
    } 
    /* Layout */
    .s-layout {
     display: flex;
     width: 100%;
     min-height: 100vh;
    }
    .s-layout__content {
     display: flex;
     justify-content: center;
     align-items: center;
     flex: 1;
    }
    /* Sidebar */
    .s-sidebar__trigger {
     z-index: 2;
     position: fixed;
     top: 0;
     right: 0;
     width: 4em;
     height: 4em;
     background: #192b3c;
    }
    .s-sidebar__trigger > i {
     display: inline-block;
     margin: 1.5em 0 0 1.5em;
     color: #f07ab0;
    }
    .s-sidebar__nav {
     position: fixed;
     top: 0;
     right: -176px;
     overflow: scroll;
     transition: all .3s ease-in;
     width: 15em;
     height: 100%;
     background: #243e56;
     color: rgba(255, 255, 255, 0.7);
    }
    .s-sidebar__nav:hover,
    .s-sidebar__nav:focus,
    .s-sidebar__trigger:focus + .s-sidebar__nav,
    .s-sidebar__trigger:hover + .s-sidebar__nav {
     right: 0;
    }
    .s-sidebar__nav ul {
     position: absolute;
     top: 4em;
     left: 0;
     margin: 0;
     padding: 0;
     width: 15em;
    }

    .s-sidebar__nav ul li {
     width: 100%;
    }

    .s-sidebar__nav-link {
     position: relative;
     display: inline-block;
     width: 100%;
     height: 4em;
    }

    .s-sidebar__nav-link em {
     position: absolute;
     top: 50%;
     left: 4em;
     transform: translateY(-50%);
    }

    .s-sidebar__nav-link:hover {
     background: #4d6276;
    }

    .s-sidebar__nav-link > i {
     position: absolute;
     top: 0;
     left: 0;
     display: inline-block;
     width: 4em;
     height: 4em;
    }

    .s-sidebar__nav-link > i::before {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
    }

    /* Mobile First */
    @media (min-width: 68em) {
     .s-layout__content {
        margin-left: 4em;
     }
     
     /* Sidebar */
     .s-sidebar__trigger {
        width: 4em;
     }
     
     .s-sidebar__nav {
        width: 4em;
        right: 0;
     }
     
     .s-sidebar__nav:hover,
     .s-sidebar__nav:focus,
     .s-sidebar__trigger:hover + .s-sidebar__nav,
     .s-sidebar__trigger:focus + .s-sidebar__nav {
        width: 15em;
     }
    }

.s-sidebar__nav::-webkit-scrollbar { width: 0 !important }
.s-sidebar__nav { overflow: -moz-scrollbars-none; }
.s-sidebar__nav { -ms-overflow-style: none; }

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="s-layout">
    <!-- Sidebar -->
    <div class="s-layout__sidebar">
    <a class="s-sidebar__trigger" href="#0">
       <i class="fa fa-bars"></i>
    </a>

    <nav class="s-sidebar__nav">
       <ul>
          <li>
             <a class="s-sidebar__nav-link" href="#0">
                <i class="fa fa-home"></i><em>Home</em>
             </a>
          </li>
          <li>
             <a class="s-sidebar__nav-link" href="#0">
               <i class="fa fa-user"></i><em>My Profile</em>
             </a>
          </li>
          <li>
             <a class="s-sidebar__nav-link" href="#0">
                <i class="fa fa-camera"></i><em>Camera</em>
             </a>
          </li>
       </ul>
    </nav>
    </div>

    <!-- Content -->
    <main class="s-layout__content">
    <h1>Full View, Please!</h1>
    </main>
    </div>

Answer 2

也许这可以帮助您...

如果想让sidenav进行动画处理，请查看动画CSS教程。

祝你好运！

boxplot(Price~Passengers, yaxt = 'n')
axis(2, las = 2)
plot(y = Price, x = Passengers, add = TRUE)

//This is the magic that makes the sidenav appears and dissapears...

function showhide(){
  //Fetch the sidenav
  sidenav=document.getElementById("sidenav");
  //If sidenav is open
  if(sidenav.style.display=="block"){
    //Close it
    sidenav.style.display="none";
  }else{//The exact opposite
    sidenav.style.display="block";
  }
}

body{
/*SO relevant*/
background: #121212;
font-family:Helvetica, sans-serif;
margin:0;
color:white;
}
#navbar{
/*SO relevant*/
background:white;
color:black;
/*Make it stick ontop*/
position:fixed;
top:0;
width:100%;
}
#navbutton{
/*SO relevant*/
padding:5px;
display:inline-block;
/*Cursor change onhover*/
cursor:pointer;
}
#navbutton:hover{
/*Background change onhover*/
background:gray;
}
#content{
margin-top:33px;/*navbutton height here*/
}

/*Now lets do the sidenav*/
#sidenav{
/*Fix it*/
width:150px;
height:100%;
position:fixed;
top:33px;/*navbutton height again*/
left:0;
bottom:0;
/*Hidden by default*/
display:none;
/*SO related*/
background:grey;
}
#sidebutton{
/*SO related*/
padding:5px;
/*Cursor effect*/
cursor:pointer;
}
#sidebutton:hover{
/*SO related*/
background:white;
color:black;
}

我想用图标创建侧边栏菜单

2 个答案: