如何将侧边栏置于屏幕右侧并实现左向悬停展开效果

要实现侧边栏固定在屏幕右侧、鼠标悬停时详情内容向左弹出的效果，只需调整几个核心CSS属性，以下是修改后的完整代码：

修正后的HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidebar">
  <nav>
    <ul>
      <li>
        <a href="#"><i class="fa fa-facebook-f"></i><span>Facebook</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-instagram"></i><span>Instagram</span></a>
      </li>
    </ul>
  </nav>
</div>

调整后的CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
.sidebar *{
  background-color: #333;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  position: fixed;
  right: 0; /* 固定到屏幕右侧 */
  width: 70px;
  margin-top: 125px;
  transition: all 0.3s linear;
  box-shadow: -2px 2px 8px 0px rgba(0,0,0,.4); /* 适配右侧的阴影方向 */
}
.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-right: 25%; /* 内容靠右对齐 */
  text-align: right;
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

.sidebar nav li a i{
  position:absolute;
  top: 17px;
  right: 20px; /* 图标定位到导航栏右侧 */
  font-size: 27px;
}
ul li a span{
  display: none;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a:hover {
  z-index:1;
  width: 300px;
  margin-left: -230px; /* 向左偏移实现展开效果 */
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
.sidebar ul li:hover a span{
  padding-right: 30%;
  display: inline-block;
}

核心修改说明 #

• 将导航栏通过position: fixed+right:0固定在屏幕右侧
• 调整图标和文本的对齐方向，让内容靠右显示
• hover时利用负边距margin-left:-230px实现向左展开的视觉效果
• 修正阴影方向，让右侧导航的阴影更自然

内容的提问来源于stack exchange，提问作者c321321sda