CSS原生，響應(yīng)式，導(dǎo)航欄，附源碼
<!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;
}
