gpt4 book ai didi

html - Canvas 菜单定位

转载 作者:行者123 更新时间:2023-11-28 11:01:06 25 4
gpt4 key购买 nike

我为我的 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%;
}
}

最佳答案

只需将样式 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;
}
}
}

关于html - Canvas 菜单定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22432307/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com