Question

因此，我有一个图形，该图形具有适用于我网站的不同菜单选项，非常适合全屏浏览PC。但是我希望在宽度较小时（例如在智能手机上）将此图形切换到汉堡菜单。有人可以帮我吗？

当我有文本而不是图形时，我可以执行此操作，但是图形不能转换为汉堡菜单。我有html页面，css页面和javascript页面。这是html：

<body bgcolor="black">

<center>

<table width="800">
<tr><td background="title.jpg"><center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="wrapper">
		<nav>
			<a class="burger-nav"></a>
			<img src="menu.png" width="800" usemap="#services">

			<map name="services">
	<area shape="rect" coords="380,0,630,160" href="home.html">
	<area shape="rect" coords="130,180,200,250" href="musiclessons.html">
	<area shape="rect" coords="240,180,340,250" href="livemusic.html">
	<area shape="rect" coords="377,180,565,250" href="photo+gd.html">
	<area shape="rect" coords="600,180,715,250" href="sheetmusic.html">
	<area shape="rect" coords="755,180,850,250" href="scoring.html">
			</map>
		</nav>
	</div>

</td></tr></table>
</html>

这是CSS：

ul {
  list-style-type: none;
}

ul li{
	display: inline;
}

.centered > ul.float > li {
	padding-left: 1em;
	padding-right: 1em;
}

ul.float.even > li {
	width:20%;
}

/*tablets*/
@media screen and (max-width: 768px){

#featured li{
	width: 45%;
}

}

/*mobiles*/
@media screen and (max-width: 480px){

.burger-nav{
	display: block;
	height: 30px;
	width: 100%;
	background: url(burger.jpg) no-repeat 50% center;
	background-color: #ffffff
	cursor: pointer;
}

header .wrapper{
	width: 100%
	padding: 0;
}

header nav ul{
	overflow: hidden;
	background: #505050;
	height: 0;
}

header nav ul.open{
	height: auto;
}

header nav ul li{
	float: none;
	text-align: left;
	width: 100%;
	margin: 0;
}

header nav ul li a{
	color:#fff;
	padding: 10px;
	border-bottom: 1px solid #404040;
	display: block;
	margin: 0;
}

#featured li{
	width: 92%;
}

}

body {
    display: block;
    margin: 8px;
}

- 这是JavaScript：

$(document).ready(function(){

	$(".burger-nav").on("click", function(){

		$("header nav ul").toggleClass("open");
	
	});

 });

谢谢大家！

-Greg

当宽度较小时，将图形（用于菜单）更改为汉堡菜单

0 个答案: