我为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%;
}
}
答案 0 :(得分:0)
只需将样式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;
}
}
}