CSS原生，响应式，导航栏，附源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="common.css" />
<style>
.is-open {
height: 6.8em;
}
.is-close {
height: 0;
}
nav * {
color: white;
}
nav {
background-color: rgb(23, 154, 158);
}
a:hover {
text-decoration: none;
}
.icon-1 {
display: inline-block;
width: 0.6em;
height: 0.6em;
border: 3px solid white;
border-radius: 0.25em;
transform: rotate(45deg);
}
.icon-2 {
display: inline-block;
width: 0.6em;
height: 0.6em;
border: 3px solid skyblue;
border-radius: 0.25em;
transform: rotate(45deg);
}
nav {
display: flex;
color: rgba(255,215,100);
flex-direction: column;
text-align: center;
}
.menu > div:first-child {
border-top: 2px solid white;
}u
.menu > div + div {
border-top: 2px solid white;
}
.menu {
border-left: 1px solid white;
overflow: hidden;
transition: all 300ms ease-in-out;
}
@media (min-width: 576px) {
nav {
display: flex;
flex-direction: row;
}
nav > div:first-child {
align-self: center;
flex: 1;
}
.menu {
flex: 2;
overflow: hidden;
align-self: center;
}
.menu > div:first-child {
border-top: none;
}
.menu > div + div {
border-top: none;
}
.menu a:hover {
text-decoration: underline;
}
.is-open {
height: 6em;
}
a:hover {
color: rgba(255,215,100);
}
}
@media (min-width: 1024px) {
nav {
display: flex;
flex-direction: row;
padding-left: 2em;
}
nav > div:first-child {
flex: none;
}
.menu {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-around;
border-left: none;
align-items: center;
overflow: hidden;
}
.menu > div:first-child {
border-top: none;
}
.menu > div + div {
border-top: none;
}
.is-open {
height: 3em;
}
}
</style>
</head>
<body>
<nav>
<div>
<a href="#" id="icon-btn"
>Eran <sup><small>studio</small></sup> <span class="icon-1"></span
><span class="icon-2"></span
></a>
</div>
<div class="menu is-open">
<div><a href="">AboutUs</a></div>
<div><a href="">Blog</a></div>
<div><a href="">Share</a></div>
<div><a href="">Services</a></div>
<div><a href="">Contact</a></div>
</div>
</nav>
</body>
<script>
let icon_btn = document.getElementById('icon-btn')
let menu = icon_btn.parentElement.nextElementSibling
icon_btn.addEventListener('click', function () {
if (menu.classList.contains('is-open')) {
menu.setAttribute('class', 'menu is-close')
} else {
menu.setAttribute('class', 'menu is-open')
}
})
</script>
</html>
html,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
p,
ul,
li {
margin: 0;
padding: 0;
}
:root {
font-size: (1vw+0.3em);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
width: 100%;
}
@media (min-width: 48em) {
.container {
max-width: 48em;
}
}
@media (min-width: 64em) {
.container {
max-width: 64em;
}
}
@media (min-width: 90em) {
.container {
max-width: 48em;
}
}
@media (min-width: 48em) {
.container {
max-width: 48em;
}
}
@media (min-width: 90em) {
.container {
max-width: 90em;
}
}
.text-blueviolet {
color: blueviolet;
}
.mx-auto {
margin: 0 auto;
}
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
.justify-envnly {
justify-content: space-evenly;
}
.justify-start {
justify-content: start;
}
