html - 单击图标时可扩展的导航栏

Question

大家好，所以我想做一些相当简单的事情。我想制作一个带有图标的侧面菜单。当您单击这些图标时，它应该会展开导航。类似于您进入项目时 canva.com 的导航方式。从一个带有图标的小导航栏开始，如第一张图片所示，最后进入第二张图片中的完整扩展。

我有以下代码，我用作起点，它有点工作，但如果有人知道制作这样的侧边栏的好方法或如何让我的侧边栏在点击时展开，它会在悬停时展开，请告诉我谢谢。

  <div data-component="navbar">

<nav class="navbar p-0 fixed-top">
      <button class="navbar-toggler navbar-toggler-left rounded-0 border-0" type="button" data-toggle="collapse" data-target="#megamenu-dropdown" aria-controls="megamenu-dropdown" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-bars"></i><span class="ml-3">Advanced</span>
      </button>
  
  <div><a class="navbar-brand px-1" href="#"><img src="http://kris.agentfire2.com/wp-content/mu-plugins/agentfire-shared-library/img/agentfire.svg" class="d-inline-block mt-1" alt="AgentFire Logo" height="40"></a>

  <div class="right-links float-right mr-4">
    <a href="#" class="home"><i class="fa fa-home mr-3"></i></a>
    
    <div class="d-inline dropdown rounded-0 mx-3">
      <a class="dropdown-toggle" id="tools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><i class="fa fa-wrench" aria-hidden="true"></i></a>
      <div class="dropdown-menu dropdown-menu-right rounded-0 text-center" aria-labelledby="tools">
        <a class="dropdown-item px-2" href="#">Recompile CSS</a>
      </div>
    </div> <!-- /.dropdown -->

在https://codepen.io/Kamilica/pen/XRbvaL查看完整代码

标签： htmlcsssidebar