Question

我发现了这个具有显示弹性的响应式顶部菜单，当我在手机的汉堡菜单中打开它时，却没有，但是当我降低浏览器的分辨率时，就会显示汉堡菜单。

请帮助我找到一些响应式顶部菜单，该菜单用于显示flex并在所有设备上均可正常工作。

header {
    background: #7EA6E0;
    width: 100%;
}

a {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
}

nav {
    max-width: 1180px;
        height: 80px;
    margin: 0px auto;
    display: -webkit-flex;
    display: flex;
        -ms-align-items: center;
    align-items: center;
}

h1 {
        color: #fff;
    margin-left: 10px;
    margin-right: auto;
        font-size: 24px;
        font-family: 'Rock Salt', cursive;
}

ul {
        display: -webkit-flex;
        display: flex;
    list-style: none;
}

ul li a {
    color: #fff;
    margin: 0px 10px;
    padding: 10px;
    border-radius: 5px;
}

.nav__icon,
.nav__icon span {
    display: none;
}

.nav__icon {
    width: 36px;
    height: 28px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

.nav__icon span {
    background: rgba(255, 255, 255, 1);
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
}

.nav__icon span:nth-of-type(1) {
    top: 0;
}

.nav__icon span:nth-of-type(2) {
    top: 12px;
}

.nav__icon span:nth-of-type(3) {
    bottom: 0;
}

.nav__icon.active span:nth-of-type(1) {
    -webkit-transform: translateY(12px) rotate(-45deg);
    transform: translateY(12px) rotate(-45deg);
}

.nav__icon.active span:nth-of-type(2) {
    display: none;
}

.nav__icon.active span:nth-of-type(3) {
    -webkit-transform: translateY(-12px) rotate(45deg);
    transform: translateY(-12px) rotate(45deg);
}

@media only screen and (max-width: 700px) {
    header {
        position: relative;
        z-index: 999;
    }
    h1 {
        margin: 0 auto;
        }
        ul {
                -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
                background: rgba(0, 0, 0, .8);
        position: absolute;
        top: 80px;
        left: 0px;
        width: 100%;
        z-index: 980;
    }
    ul li {
        padding: 10px;
        text-align: center;
    }
    ul li a {
                display: block;
        background: transparent;
        margin: 0px;
        padding: 20px;
    }
    ul li a:hover {
        color: #000;
        background: #fff;
    }
    .nav__icon,
    .nav__icon span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
        z-index: 999;
    }
}

Answer 1

对不起，我忘记添加html了

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>FlexBox Responsive Menu-css</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


	<link rel="stylesheet" href="css/style.css">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

	<header id="header" role="heading">
		<nav>
			<h1 class="logo">Panda Custom</h1>
			<ul>
				<li><a href="#">menu 1</a></li>
				<li><a href="#">menu 2</a></li>
				<li><a href="#">menu 3</a></li>
				<li><a href="#">menu 4</a></li>
			</ul>
			<div class="nav__icon">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</nav>
		<!--/Nav-->
	</header>
	<!--/Header-->
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>



	<script src="js/index.js"></script>




</body>

</html>

响应式菜单无法在手机上完全正常工作

1 个答案: