Измените Graphic (для меню) на Burger menu, когда ширина меньше - PullRequest
Новая
       1

Измените Graphic (для меню) на Burger menu, когда ширина меньше

0 голосов
/ 28 августа 2018

, поэтому у меня есть рисунок, на котором изображены различные пункты меню для моего сайта, что хорошо для просмотра веб-сайта на полную ширину. Но я хочу, чтобы эта графика переключалась в меню бургера, когда ширина меньше, как на смартфоне. Может ли кто-нибудь помочь мне сделать это?

Я смог сделать это, когда у меня был текст вместо графики, но графика не превращалась в меню бургера. У меня есть 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");
	
	});

 });

Спасибо, ребята !!!

1027 * Грег *

...