切换菜单列表项显示

时间：2017-04-22 21:50:08

标签： html css drop-down-menu menu

当我点击汉堡图标时，我想要一个菜单​​。单击按钮后会显示列表项，但在未单击按钮时仍会看到列表项。我无法弄清楚如何隐藏菜单。

我的代码在这里：Codepen 

function myFunction() {
    	var x = document.getElementById("myTopnav");
    	if (x.className === "topnav") {
        	x.className += " responsive";
    	} else {
        	x.className = "topnav";
    	}
	}

$(document).ready(function() {
  $('#nav-icon3').on('click', function() {
    $(this).toggleClass('open');
  });
});
* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	font-size: 1rem;
}

.header {
	background-color: #FFF;
	width: 100%;
	margin: 0px auto;
	display: block;
	top: 0;
	margin-top: 7%;
	height: 80px;
}

h1 {
	margin-left: 5%;
	padding-left: 1%;
	font-family: 'Lobster', cursive;
	margin-top: 0;
	float: left;
	margin-bottom: 0;
	color: #D18E8F;
}

#nav-icon {
	width: 30px;
	height: 30px;
	position: relative;
	margin-right: 7%;
	margin-top: 8px;
	/*padding-right: 1%;*/
	float: right;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	cursor: pointer;
}

#nav-icon3 span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #8c8c8c;
	border-radius: 6px;
	opacity: 1;
	left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
	top: 0px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
	top: 10px;
}

#nav-icon3 span:nth-child(4) {
	top: 20px;
}

#nav-icon3.open span:nth-child(1) {
	top: 10px;
	width: 0%;
	left: 50%;
}

#nav-icon3.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
	top: 10px;
	width: 0%;
	left: 50%;
}

.topnav.responsive {
	/*display: none;*/
	clear: both;
	padding: 0;
	height: 160px;
}

ul.topnav.responsive {
	list-style: none;
	font-family: 'Raleway', 'sans-serif';
	float: left;
	margin-left: 7%;
	/*padding-left: 2%;*/
	margin-top: 0;
	width: 85%;
	margin-bottom: 0;
}

ul.topnav.responsive li {
	padding-top: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #c6c6c6;
}

ul.topnav.responsive li a {
	text-decoration: none;
	color: #8c8c8c;
}

ul.topnav.responsive li a:hover {
	color: #7EBEA3;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial scale=1.0">
		<title>Gabriella Farfan</title>
		<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet">
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/main.js"></script>
	</head>

<body>
<div class="header">
		<h1>Gabriella Farfan</h1>
			<div id="nav-icon">
				<div id="nav-icon3">
					<a id="nav-icon3" onclick="myFunction();">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</a>
				</div> 
			</div>

		<ul class="topnav" id="myTopnav">
			<li>
				<a href="#">Work</a>
			</li>
			<li>
				<a href="About.html">About Me</a>
			</li>
			<li style="border-bottom: none">
				<a href="#">Contact</a>
			</li>
		</ul>
	</div>
  
  </body>
  
</html>

2 个答案:

答案 0 :(得分：0)

我做了这个小修理。希望它有所帮助。

CSS：

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 1rem;
}

.header {
    background-color: #FFF;
    width: 100%;
    margin: 0px auto;
    display: block;
    top: 0;
    margin-top: 7%;
    height: 80px;
}

h1 {
    margin-left: 5%;
    padding-left: 1%;
    font-family: 'Lobster', cursive;
    margin-top: 0;
    float: left;
    margin-bottom: 0;
    color: #D18E8F;
}

#nav-icon {
    width: 30px;
    height: 30px;
    position: relative;
    margin-right: 7%;
    margin-top: 8px;
    /*padding-right: 1%;*/
    float: right;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon3 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #8c8c8c;
    border-radius: 6px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
    top: 0px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
    top: 10px;
}

#nav-icon3 span:nth-child(4) {
    top: 20px;
}

#nav-icon3.open span:nth-child(1) {
    top: 10px;
    width: 0%;
    left: 50%;
}

#nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
    top: 10px;
    width: 0%;
    left: 50%;
}

.responsive {
    /*display: none;*/

    clear: both;
    padding: 0;
    height: 160px;
}

ul.responsive {
    list-style: none;
    font-family: 'Raleway', 'sans-serif';
    float: left;
    margin-left: 7%;
    /*padding-left: 2%;*/
    margin-top: 0;
    width: 85%;
    margin-bottom: 0;
}

ul.responsive li {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #c6c6c6;
}

ul.responsive li a {
    text-decoration: none;
    color: #8c8c8c;
}

ul.responsive li a:hover {
    color: #7EBEA3;
}

.topnav{
    display:none;
}

JS：

function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className = " responsive";
        } else {
            x.className = "topnav";
        }
    }

如果这是你想要的，请告诉我。

答案 1 :(得分：0)

只需添加.topnav { display: none; }和.topnav.responsive { display: block; }，您的代码即可正常使用。

.topnav {
  display: none;
}

.topnav.responsive {
  display: block;
  clear: both;
  padding: 0;
  height: 160px;
}

您也可以添加此选项以使全汉堡包可点击（不仅仅是行）。

#nav-icon3 {
  width: 30px;
  height: 30px;
  display: block;
}

代码的工作分支：Сodepen

相关问题
最新问题