目录

实现折叠按钮

medium screen size

实现折叠按钮

效果图：

如何在调整屏幕尺寸大小的时候，导航栏的列表会从横的变成三条杠杠。就像手风琴导航栏

手风琴button的操作

 aria-expanded - Accessibility | MDN

Menu

.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很重要，并行加载

 需要添加data-visible= ‘False’,但是我没有找到这个..属性，感觉是自定义属性？反正查不到，但是可以实现的

Menu

 之后给它添加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

Menu

 之后设置属性，变换的时候将它变为true

//when someone click humberger menuconst 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。

css中vw是什么意思？ - html中文网

 实现白色部分靠右边。 

 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;}
}