Day5：写前端项目（html+css+js）-导航部分

目录

实现折叠按钮

medium screen size-如何制作横向的导航栏

Accessibly

---

实现折叠按钮

效果图：

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

手风琴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。

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

效果：需要制作一个屏幕大于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);
}