如何在顶部和左侧创建粘性导航

Question

我想询问关于如何在此图像中创建粘性导航的理论：

我认为它应该是我首先必须创建侧边栏处于固定位置，然后在主要内容中创建带有配置文件图像和按钮的搜索栏。我确实在脑海中尝试过它，但它搞砸了。关于如何完成这种类型的设计或我如何处理它的任何想法？

Answer 1

试试这个。你只需要有2个固定的块，一个在左侧，一个在顶部，并添加一些填充和边距不相互重叠。

＆＃13;

＆＃13;

html,body{
  margin:0px
}
.main-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 80px;
    min-height: 100%;
        background-color: #222d32;
}
.main-header{
  position: fixed !important;
    width: 100%;
    padding-left: 55px;
    background-color: #FF0000;
    z-index:20
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-menu>li {
    position: relative;
    padding:5px;
}
.header-menu li{
  display:inline-block;
  width:calc(100/5);
  padding:10px 5px
}
.sidebar-menu>li:hover >ul {
    display:block
}
.sidebar-menu>li>.treeview-menu {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-right-radius: 4px;
    display:none;
    position:absolute;
    left:100%;
    top:0px;
    padding:10px;
    background:black;
    color:white;
}

＆＃13;

<header class="main-header">
  <nav>
    <ul class="header-menu">
      <li>inner menu1 </li>
      <li>inner menu2 </li>
      <li>inner menu3 </li>
     </ul>  
  </nav>
</header>
<aside class="main-sidebar">

    <section class="sidebar">

        <ul class="sidebar-menu">
          <li>menu1 
            <ul class="treeview-menu">
              <li>inner menu1 </li>
              <li>inner menu2 </li>
              <li>inner menu3 </li>
            </ul>  
          </li>
          <li>menu2 
            <ul class="treeview-menu">
              <li>inner menu1 </li>
              <li>inner menu2 </li>
              <li>inner menu3 </li>
            </ul>
          </li>
          <li>menu3 
            <ul class="treeview-menu">
              <li>inner menu1 </li>
              <li>inner menu2 </li>
              <li>inner menu3 </li>
            </ul>
          </li>
        </ul>    
    </section>
</aside>

＆＃13;

＆＃13;

＆＃13;