目录
实现折叠按钮
效果图:
如何在调整屏幕尺寸大小的时候,导航栏的列表会从横的变成三条杠杠。就像手风琴导航栏
手风琴button的操作
aria-expanded - Accessibility | MDN
<button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
<nav>
<ul id ="primary-navigation" class="primary-navigation underline-indicators flex">
<li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span>00</span>Home</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span>01</span>Destination</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span>02</span>Crew</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span>03</span>Technology</a>
</ul>
</nav>
.primary-navigation {
--underline-gap: 2rem;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 35rem) {
.primary-navigation {
#将间距变小
--underline-gap: .5rem;
#位置变成相对于窗口位置,无论怎么移动都不会变
position: fixed;
#在最上一层
z-index: 1000;
inset: 0 0 0 30%;
background: black;
list-style: none;
padding: min(20rem, 15vh) 2rem;
margin: 0;
#垂直摆放
flex-direction: column;
}
#将第一个的border取消掉
.primary-navigation.underline-indicators > .active{
border: 0;
}
}
.primary-navigation a {
text-decoration: none;
}
.primary-navigation a > span {
font-weight: 700;
margin-right: .5em;
}
inset :inset | CSS-Tricks - CSS-Tricks
如何将背景加上磨砂质感?
.primary-navigation {
--underline-gap: 2rem;
list-style: none;
padding: 0;
margin: 0;
#加上背景
background: hsl( var(--clr-white) / 0.05);
#变模糊
backdrop-filter: blur(1rem);
}
另一种方法:
.primary-navigation {
--underline-gap: 2rem;
list-style: none;
padding: 0;
margin: 0;
background: hsl( var(--clr-dark) / 0.95);
/* backdrop-filter: blur(1.5rem); */
}
如果浏览器不支持:backdrop-filter: blur(1.5rem),可以用supports这个块。如果支持backdrop属性,就用backdrop属性,如果不支持,就用默认的
@supports (backdrop-filter: blur(1rem)) {
.primary-navigation {
background: hsl( var(--clr-white) / 0..05);
backdrop-filter: blur(1.5rem);
}
}
How @supports Works | CSS-Tricks - CSS-Tricks
该overflow-x
属性指定当块级元素在左右边缘溢出时,是否裁剪内容、添加滚动条或显示溢出内容。hidden指的是,溢出的地方就隐藏。
body {
font-family: var(--ff-sans-normal);
font-size: var(--fs-400);
color: hsl( var(--clr-white) );
background-color: hsl( var(--clr-dark) );
line-height: 1.5;
min-height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
#加上这一句
overflow-x: hidden;
}
@media (max-width: 35rem) {
.primary-navigation {
--underline-gap: .5rem;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
list-style: none;
padding: min(20rem, 15vh) 2rem;
margin: 0;
flex-direction: column;
#加上这一句,他就不见了,他的背景
transform: translateX(100%);
}
移动到屏幕外面了
那么,怎么添加function呢?让我们点击button就能弹出来东西?
首先需要添加js文件在html文件中,defer很重要,并行加载
<script src="index.js" defer></script>
需要添加data-visible= ‘False’,但是我没有找到这个..属性,感觉是自定义属性?反正查不到,但是可以实现的
<button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
<nav>
<ul id ="primary-navigation" data-visible = "false" class="primary-navigation underline-indicators flex">
<li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span>00</span>Home</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span>01</span>Destination</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span>02</span>Crew</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span>03</span>Technology</a>
</ul>
</nav>
之后给它添加js文件,让他有个function。
//when someone click humberger menu
//寻找类
const nav = document.querySelector(".primary-navigation");
const navToggle = document.querySelector(".mobile-nav-toggle");
if (navToggle){
//监听click的动作
navToggle.addEventListener("click", () => {
const visiblity = nav.getAttribute("data-visible");
if (visiblity === "false") {
nav.setAttribute("data-visible", true);
} else {
nav.setAttribute("data-visible", false);
}
})}
之后就可以动了。想让按钮平滑(有个animation的效果的话)
可以在css文件中加上
transition: transform 500ms ease-in-out;
下一个效果,
想将这个三条线的按钮,变成×。
需要在html文件中设置aria-expanded和aira-controls
<button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
<nav>
<ul id ="primary-navigation" data-visible = "false" class="primary-navigation underline-indicators flex">
<li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span>00</span>Home</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span>01</span>Destination</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span>02</span>Crew</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span>03</span>Technology</a>
</ul>
</nav>
之后设置属性,变换的时候将它变为true
//when someone click humberger menu
const nav = document.querySelector(".primary-navigation");
const navToggle = document.querySelector(".mobile-nav-toggle");
if (navToggle){
navToggle.addEventListener("click", () => {
const visiblity = nav.getAttribute("data-visible");
if (visiblity === "false") {
nav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded",true);
} else {
nav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded",false);
}
})}
在css文件中,如果aria-expanded为true,那么换一下图片。
.mobile-nav-toggle[aria-expanded="true"]{
background-image: url("../assets/shared/icon-close.svg");
}
然后就实现了!这个是为了框出来选中的button
:focus-visible - CSS: Cascading Style Sheets | MDN
.mobile-nav-toggle:focus-visible {
outline: 5px solid red;
outline-offset: 5px;
}
medium screen size-如何制作横向的导航栏
要求:导航栏有个磨砂背景。icon在左边,其余在右边。然后数字消失。
原始图:
将icon的位置调整
.logo {
margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem);
}
使用clamp可以实现那种responsive的效果。它可以随着你的屏幕的变化,margin也进行变化
clamp() - CSS: Cascading Style Sheets | MDN
vw是Viewport's width的缩写形式,1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。
实现白色部分靠右边。
justify-content - CSS: Cascading Style Sheets | MDN
align-items - CSS: Cascading Style Sheets | MDN
.primary-header {
justify-content: space-between;
align-items: center;
}
设置padding并且让数字消失
@media (min-width: 35em) and (max-width: 45em) {
.primary-navigation {
padding-inline: 3rem;
}
.primary-navigation a > span {
display: none;
}
}
效果:需要制作一个屏幕大于45rem的时候的导航栏
要求:需要加一条线,一条可以随着屏幕变化的线
@media (min-width: 35em) {
.primary-navigation {
padding-inline: clamp(3rem, 7vw, 7rem);
}
}
@media (min-width: 35em) and (max-width: 44.999em) {
.primary-navigation a > span {
display: none;
}
}
@media (min-width: 45em) {
.primary-header::after {
content: '';
display: block;
position: relative;
height: 1px;
width: 100%;
margin-right: -2.5rem;
background: hsl( var(--clr-white) / .25);
order: 1;
}
nav {
order: 2;
}
.primary-navigation {
margin-block: 2rem;
}
}
order是什么意思:
CSS属性设置在 flex 或 grid 容器中布置项目的顺序,让他放在第一个顺序
order - CSS: Cascading Style Sheets | MDN
Accessibly
按tap键,会有动态的隐藏键出来。
.skip-to-content {
position: absolute;
z-index: 9999;
background: hsl( var(--clr-white) );
color: hsl( var(--clr-dark) );
padding: .5em 1em;
margin-inline: auto;
#y轴藏着
transform: translateY(-100%);
transition: transform 250ms ease-in;
}
.skip-to-content:focus {
transform: translateY(0);
}