html - Canvas 菜单定位

Question

我为我的 Squarespace 网站设计了一个非 Canvas 菜单，我终于让目标工作了，但是我似乎无法让它从右边推出，也无法将它 float 到右边。有什么想法吗？

我正在处理的站点是:http://splitblog.squarespace.com/

HTML

<div class="side side-right">
     <div class="page-wrap">
            <div class="wrapper-right">

            <div class="main-header">
                <a href="#main-navigation" class="open-menu">☰</a>
            </div>

            <!--Main navigation.-->
              <squarespace:navigation navigationId="mainNav" template="navigation" />

            <div class="page-wrapper">
            <!--Content injection point.-->
            <section id="content" class="content">
             {squarespace.main-content}
            </section>

            </div>
         </div>
     </div>
</div>

CSS

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-navigation {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #c4c4c4;
  overflow-y: auto;
  transition: width 0.3s ease;
  z-index: 9999;

   ul {list-style: none;}

  a {
    display: block;
    color: #696969;
    background-color:#c4c4c4;
    padding: 10px;

    &:hover, &:focus {
     color:#181818;
    }
  }
}

.close-menu {
  display: none;
}

#main-navigation:target {
  width: 20%;
}
#main-navigation:target + .page-wrap {
  width: 80%;
  .open-menu {
     display: none; 
  }
  .close-menu {
     display: block;
  }
  .main-header {
    width: 80%;
    right: 20%;
  }
}

Answer 1

只需将样式 right: 0 添加到 id #main-navigation

 .main-navigation {
  position: fixed;
  /*********add here******************/
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #c4c4c4;
  overflow-y: auto;
  transition: width 0.3s ease;
  z-index: 9999;

   ul {list-style: none;}

  a {
    display: block;
    color: #696969;
    background-color:#c4c4c4;
    padding: 10px;

    &:hover, &:focus {
     color:#181818;
    }
  }
}