Question

我为Squarespace网站制作了一个非画布菜单，我终于让目标正常工作了，但是我似乎无法将其从右侧推出，也不能将其向右移动。有什么想法吗？

我正在处理的网站是：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;
    }
  }
}

关闭画布菜单定位

1 个答案: