如何在纯CSS中切换导航栏？ [英] How to make a toggleable navbar in pure CSS?
本文介绍了如何在纯CSS中切换导航栏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用纯HTML和CSS的导航栏，不需要任何JavaScript来打开和关闭。
我遇到导航栏保持打开的问题。当我设置 display：none 或 visibility：hidden 获得所需的功能时，超链接不再工作。 / p>
http://codepen.io/anon/ pen / dOMYEj
这可能吗？谢谢！
解决方案
我能够最终创建它。我真的希望这可以帮助别人。
HTML：
; html lang =en>
< head>
< meta charset =UTF-8>
< link rel =stylesheethref =taco.css>
< title>测试页< / title>
< / head>
< nav>
< header>< h1>测试网站< / h1>< / header&
< div id =navigation>
< button>☰< / button>
< ul id =links>
< li>< a href =＃top>首页< / a>
< / li>
< li>< a href =＃about>关于< / a>
< / li>
< li>< a href =＃menu>菜单< / a>
< / li>
< li>< a href =＃hours>小时< / a>
< / li>
< li>< a href =＃directions>路线< / a>
< / li>
< li>< a href =＃contact>联系人< / a>
< / li>
< / ul>
< / div>
< / nav>
< main>
< section id =top>
< h1>欢迎< / h1> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Inetitus consectetur suscipit in，vitae voluptas，dolorum subsequentate sequi aneri deserunt maxime quae sind 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。广告aliquid dolorum excepturi expedita nstrum。
< / section>
< section id =about>
< h1>关于< / h1>脂肪组织。 Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium，magnam maxime perspiciatis quam quare rem repudiandae velit voluptas！ Lorem ipsum dolor
sit amet，consectetur adipisicing elit。 Atque aut earum qualendi，error eum explicabo iipsum 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。广告aliquid dolorum excepturi expedita nstrum。
< / section>
< section id =menu>
< h1>菜单< / h1> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Illum magnam quon quod eius aliquam adipisci molestias vel，sapiente ex nobis，eligendi a inventore nihil sit aut molestiae voluptatibus culpa。
< / section>
< section id =hours>
< h1>时间< / h1> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Veniam iste intermediaria hindit，voluptatum saepe vero harum quod，repudiandae maxime dolorum non。 Adipisci，临时，quisquam！ 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。弗朗西斯
dolor sit amet，consectetur adipisicing elit。 Atque aut earum qualendi，error eum explicabo iipsum 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。广告aliquid dolorum excepturi expedita nstrum。
< / section>
< section id =directions>
< h1>路线< / 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，坐amet dolores。 Nobis corrupti nihil，officiis maiores fundendi modi quo，minus？ Expedita，corrupti ullam nobis cum，quibusdam ipsa quo ex！
adipisicing elit。 Atque aut earum qualendi，error eum explicabo iipsum 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。广告aliquid dolorum excepturi expedita nstrum。
< / section>
< section id =contact>
< h1>联系人< / 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 qualendi，error eum explicabo iipsum 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。广告aliquid dolorum excepturi expedita nstrum。
< / section>
< / main>
< / html>
CSS：
code> * {
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）;
}
按钮{
display：none;
}
输入{
display：none;
}
section {
font-size：2rem;
padding：1vh 5vh 0 5vh;
}
section＃top {
margin-top：5.5vh;
}
section> h1 {
margin-top：8vh;
color：blue;
}
/ *更改为9999px，所以它总是折叠的* /
@media（max-width：9999px）{
button {
font-尺寸：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;
}
}
I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.
I'm having an issue with the navigation bar remaining open. When I set display: none or visibility: hidden to get desired functionality, the hyperlink doesn't function anymore.
http://codepen.io/anon/pen/dOMYEj
Is this possible? Thanks!
解决方案
I was able to finally create it. I really hope this helps someone out.
HTML:
<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>
CSS:
* {
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;
}
}
这篇关于如何在纯CSS中切换导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
