如何在纯CSS中创建可切换的导航栏？_Css

如何在纯CSS中创建可切换的导航栏？

css

如何在纯CSS中创建可切换的导航栏？,css,Css,我正在尝试用纯HTML和CSS制作一个导航栏，它不需要任何JavaScript来打开和关闭导航栏仍然打开时出现问题。当我设置display:none或visibility:hidden以获得所需功能时，超链接不再起作用这可能吗？谢谢使用display:flex时，位置：absolute、relative和fixed的行为与预期不符。请检查此项稍微修改了标记和css。请检查以下代码段 *{ 字体系列：无衬线； } 导航{ 显示器：flex；柔性包装：包装；证明内容：周围的空间；背

我正在尝试用纯HTML和CSS制作一个导航栏，它不需要任何JavaScript来打开和关闭

导航栏仍然打开时出现问题。当我设置

display:none

或

visibility:hidden

以获得所需功能时，超链接不再起作用

这可能吗？谢谢

使用display:flex时，位置：absolute、relative和fixed的行为与预期不符。请检查此项

稍微修改了标记和css。请检查以下代码段

*{
字体系列：无衬线；
}
导航{
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
背景色：白色；
对齐项目：居中；
框大小：边框框；
盒影：0.02×rgba（128、128、128、0.5）；
}
导航部{
高度：5vh；
宽度：10vw；
位置：固定；
排名：0；
填充：3倍；
右：0；
}
.图标{
显示：内联；
}
导航>h1{
字体系列：草书；
字号：1.2rem；
左侧填充：10px；
颜色：蓝色；
}
李海军{
列表样式：无；
显示：内联；
字号：1.2rem；
填充：10px；
光标：指针；
}
导航a{
颜色：暗灰色；
文字装饰：无；
}
导航a：悬停{
颜色：黑色；
}
导航a：激活{
颜色：蓝色；
}
李海军：第一个孩子*{
颜色：蓝色；
}
导航ul{
宽度：50vw；
}
导航h1，
导航ul{
字号：2rem；
}
导航>输入{
显示：无；
}
导航>标签{
显示：无；
}
输入{
显示：无；
}
部分{
字号：2rem；
填充：1vh 5vh 0 5vh；
}
第#节顶部{
边际上限：5.5vh；
}
@介质（最大宽度：5000px）{
/*更改为5000，因此它始终处于折叠状态*/
导航{
高度：6vh；
文本对齐：居中；
证明内容：之间的空间；
}
李海军{
显示：块；
边框：纯色1px蓝色；
保证金：0自动；
}
#链接{
可见性：隐藏；
}
第#节顶部{
边际上限：10vh；
}
输入：选中+导航ul#链接{
能见度：可见；
位置：绝对位置；
右：30px；
}
输入：未选中+导航ul#链接{
可见性：隐藏；
}
导航{
颜色：蓝色；
}
}


测试页
测试页
☰














欢迎您加入我们的行列，这是一项伟大的事业！Lorem ipsum dolor sit amet，奉献精英。我们必须遵守法律，错误在于我们必须遵守法律，而不是仅仅遵守法律
时间的谴责！别名：哈鲁姆·里西恩迪斯·雷鲁姆！这是一个伟大的事业。自由主义者所从事的研究工作中所涉及到的知识和技能，以及对所有知识的排斥
沃鲁帕特姆。不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产。
关于Lorem ipsum Doloraweghawehecketur Adipising Elite。在布兰迪提斯的共同消费品中，对发明者伊普萨·劳丹提姆（ipsa laudantium）的杰出贡献，以及对整个世界的深刻理解！同侧阴唇
坐在阿梅特，奉献给精英们。我们的信仰是正确的，错误是明确的，我们的信仰是正确的，我们的信仰是暂时的！别名：哈鲁姆·里西恩迪斯·雷鲁姆！圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会
再见。在自由主义者的实验室中，有大量的药物和药物被用于驱虫剂。不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产。
菜单Lorem ipsum dolor Styktyktyking Elite。在布兰迪提斯的共同消费品中，对发明者伊普萨·劳丹提姆（ipsa laudantium）的杰出贡献，以及对整个世界的深刻理解！Lorem ipsum dolor sit amet，
阿迪皮斯精英。我们的信仰是正确的，错误是明确的，我们的信仰是正确的，我们的信仰是暂时的！别名：哈鲁姆·里西恩迪斯·雷鲁姆！我爱你，我爱你，我爱你
精英。在自由主义者的实验室中，有大量的药物和药物被用于驱虫剂。不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产。
小时Lorem ipsum dolor sit RTYR657456ydfghfvgyjktyguicing Elite。在布兰迪提斯的共同消费品中，对发明者伊普萨·劳丹提姆（ipsa laudantium）的杰出贡献，以及对整个世界的深刻理解！乱数假文
多洛·西特·艾米特，奉献给精英们。我们的信仰是正确的，错误是明确的，我们的信仰是正确的，我们的信仰是暂时的！别名：哈鲁姆·里西恩迪斯·雷鲁姆！圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会圣公会
再见。在自由主义者的实验室中，有大量的药物和药物被用于驱虫剂。不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产。
方向Lorem ipsuaw4yae4yah34rtaw3789t。在布兰迪提斯的共同消费品中，对发明者伊普萨·劳丹提姆（ipsa laudantium）的杰出贡献，以及对整个世界的深刻理解！洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
再见。我们的信仰是正确的，错误是明确的，我们的信仰是正确的，我们的信仰是暂时的！别名：哈鲁姆·里西恩迪斯·雷鲁姆！这是一个伟大的事业。
在自由主义者的实验室中，有大量的药物和药物被用于驱虫剂。不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产。
联系Lorem ipsum dolor 3456345789ru8ghiuretur Adipising elit。发明者伊普萨·劳丹提姆（ipsa laudantium）的卓越发明者，以及共和国的最高权威，在共同消费的布兰迪提斯（blanditiis commodi Consequence）处获得了荣誉
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="taco.css">
    <title>Test Page</title>
</head>

<nav>
    <header><h1>Test Site</h1></header>
    <div id="navigation">
        <button>☰</button>
        <ul id="links">
            <li><a href="#top">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#menu">Menu</a>
            </li>
            <li><a href="#hours">Hours</a>
            </li>
            <li><a href="#directions">Directions</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<main>
    <section id="top">
        <h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
        reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
        voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="about">
        <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="menu">
        <h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa.
    </section>
    <section id="hours">
        <h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at.
        dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="directions">
        <h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex!
        adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="contact">
        <h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum
        dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
</main>

</html>

* {
    font-family: sans-serif;
}
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: white;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div#navigation {
    height: 5vh;
    width: 10vw;
    position: fixed;
    top: 1vh;
    padding: 1vw;
    right: 25vw;
}
.icon {
    display: inline;
}
nav header {
    top: 1vw;
    left: 1vw;
    position: fixed;
}
nav header > h1 {
    background-color: rgba(255, 255, 255, .5);
    font-family: cursive;
    font-size: 2rem;
    padding-left: 1vw;
    color: blue;
    left: 0;
}
nav li {
    list-style: none;
    display: inline;
    font-size: 1.2rem;
    padding: 1vh;
    cursor: pointer;
}
nav li:focus {
    color: blue;
}
nav a {
    color: darkgray;
    text-decoration: none;
}
nav a:hover {
    color: black;
}
nav a:active {
    color: blue;
}
nav li:first-child * {
    color: blue;
}
nav ul {
    width: 50vw;
}
nav h1,
nav ul {
    font-size: 2rem;
}
nav #links {
    background-color: rgba(255, 255, 255, .9);
}
button {
    display: none;
}
input {
    display: none;
}
section {
    font-size: 2rem;
    padding: 1vh 5vh 0 5vh;
}
section#top {
    margin-top: 5.5vh;
}
section > h1 {
    margin-top: 8vh;
    color: blue;
}

/* Changed to 9999px so it's always collapsed */
@media (max-width: 9999px) {
    button {
        font-size: 1.75rem;
        border: 0;
        background: white;
        cursor: pointer;
        display:block;
    }
    button:focus {
        outline: 0;
    }
    nav div#navigation {
        right: 0;
    }
    nav li {
        display: block;
        border: solid 1px blue;
        margin: 0 auto;
    }
    #links {
        display: none;
        background-color: white;
    }
    button:focus + #links,
    #links:hover {
        display: block;
        position: absolute;
        right: 5vw;
    }
    nav {
        color: blue;
    }
    section > h1 {
        margin-top: 6.25vh;
        color: blue;
    }
    nav header > h1 {
        margin: 0;
        padding: 0;
        font-size: 2rem;
    }
}