Menu slideToggle jQuery

pytanie zadane 6 kwietnia 2017 w JavaScript przez perlik1990 Nowicjusz (180 p.)

Witam.

Mam do Was pytanie. Otóż stworzyłem responsywną nawigację, która na ekranie monitora jest wyświetlana stale, natomiast przy małych ekranach jest ukryta pod postacią włącznika (CSS Media Queries), który po kliknięciu ją wysuwa. Efekt wysunięcia osiągnąłem rzecz jasna za pomocą jQuery. W momencie, gdy nawigacja na małym ekranie jest wysunięta i rozciągnę ekran, jest cały czas widoczna, jednak gdy na małym ekranie ją schowam i rozciągnę ekran, na dużym ekranie również jej nie ma. Czy mógłbym liczyć na Waszą pomoc?

HTML

<div class="menu-button"><i class="icon-menu"></i></div>
				
		<nav>
			<div class="nav">
				<ul>
					<li><a href="index.html">Opcja 1</a></li>
					<li><a href="carnegie.html">Opcja 2</a></li>
					<li><a href="kiyosaki.html">Opcja 3</a></li>
					<li><a href="hill.html">Opcja 4</a></li>
					<li><a href="tracy.html">Opcja 5</a></li>
				</ul>
			</div>
		</nav>

body, html
{
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #e6e6e6;
	font-family: 'Ubuntu', sans-serif;
}
.menu-button
{
	display: none;
}
.nav
{
	width: 19%;
	float: left;
	margin: 20px 1% 0 0;
}
.nav ul 
{
	list-style-type: none;
	margin-top: 25px;
}
.nav ul li 
{
	padding: 15px 0;
	text-align: left;
	border-bottom: 1px solid #303030;
	background-color: #d9d9d9;
	border-radius: 0 25px 0 0;
	margin-bottom: 2px;
}
.nav ul li a 
{
	font-size: 1.1em;
	text-decoration: none;
	border: none;
	margin-left: 1.5em;
	color: #303030;
}

@media only screen and (max-width: 1200px)
{
	.menu-button
	{
		display: none;
	}
	.nav
	{
		width: 19%;
		float: left;
		margin: 20px 1% 0 0;
	}
	.nav ul 
	{
		list-style-type: none;
		margin-top: 25px;
	}
	.nav ul li 
	{
		padding: 10px 0;
		text-align: left;
		border-bottom: 1px solid #303030;
		background-color: #d9d9d9;
		border-radius: 0 25px 0 0;
		margin-bottom: 2px;
	}
	.nav ul li a 
	{
		font-size: 0.9em;
		text-decoration: none;
		border: none;
		margin-left: 1.5em;
		color: #303030;
	}
}

@media only screen and (max-width: 900px)
{
	.menu-button
	{
		display: block;
		margin-left: 2em;
		margin-top: 2em;
		cursor: pointer;
	}
	.nav
	{
		width: 100%;
		margin: 0 1% 0 0;
		margin-top: 25px;
		display: block;
	}
	.nav ul li 
	{
		padding: 10px 0;
		text-align: left;
		border-bottom: 1px solid #303030;
		border-radius: 0 0 0 0;
		background-color: #d9d9d9;
		margin-bottom: 2px;
		width: 100%;
	}
	.nav ul li a 
	{
		font-size: 1em;
		margin-left: 2em;
		letter-spacing: 1px;
	}
}

@media only screen and (max-width: 600px)
{
	.menu-button
	{
		display: block;
		cursor: pointer;
	}
	.nav
	{
		width: 100%;
		margin: 0 1% 0 0;
		margin-top: 25px;
		display: block;
	}
	.nav ul li 
	{
		padding: 10px 0;
		text-align: left;
		border-bottom: 1px solid #303030;
		background-color: #d9d9d9;
		margin-bottom: 2px;
		border-radius: 0 0 0 0;
		width: 100%;
	}
	.nav ul li a 
	{
		font-size: 1em;
		margin: 0;
		letter-spacing: 1px;
		margin-left: 2em;
	}
}

@media only screen and (max-width: 300px)
{
	.menu-button
	{
		display: block;
		cursor: pointer;
	}
	.nav
	{
		width: 100%;
		margin-top: 25px;
		display: block;
	}
	.nav ul li 
	{
		padding: 8px 0;
		text-align: left;
		border-bottom: 1px solid #303030;
		background-color: #d9d9d9;
		border-radius: 0 0 0 0;
		margin-bottom: 2px;
		width: 100%;
	}
	.nav ul li a 
	{
		font-size: 0.9em;
		margin-left: 2em;
		letter-spacing: 1px;
	}
}

$(document).ready(function()
{
	$('.nav ul').hide();
	$('.menu-button').click(function()
	{
		$('.nav ul').slideToggle(500);
	});
});

1 odpowiedź

odpowiedź 6 kwietnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Gdy uzywasz hide on nakłada style display. Problem z style jest taki, że on jest wyżej niż wszelkie reguły. Dwa, jquery (jak sam JS) uzywa interfejsu HTMLElementStyle do podpięcia się pod obiekt. Display powoduje, to że elementy są niewidoczne dla przeglądarki (bądż interpretera). Nadanie atrybute !important powoduje ignorowanie tego co zostało w obiekt wrzucone.

http://api.jquery.com/hide/.

Zamiast tego użyj tego -->

https://api.jquery.com/addclass/

Tu masz potwierdzenie:

https://jsfiddle.net/synohjn5/2/

Klasą można manipulować, a style powiedzmy nie (Na tym poziomie wiedzy, trzymajmy się że nie).

komentarz 6 kwietnia 2017 przez perlik1990 Nowicjusz (180 p.)

Dziękuję za poświęcenie czasu na odpowiedź. A tak z czystej ciekawości. Czy istnieje sposób na to, aby jQuery działała tylko w określonej rozdzielczości?

komentarz 6 kwietnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Tak.

http://api.jquery.com/innerwidth/

komentarz 6 kwietnia 2017 przez perlik1990 Nowicjusz (180 p.)

Jeszcze raz dziękuję

komentarz 6 kwietnia 2017 przez perlik1990 Nowicjusz (180 p.)

Spróbowałem ponownie z nadaniem klasy. Nawigacja się otwiera, lecz nie mogę poradzić sobie z jej zamknięciem. Mogę prosić o jakieś sugestie?

$(document).ready(function()
{
	$('nav ul').addClass('menu-hidden');
	$('.menu-button').click(function()
	{
		$('.nav ul').removeClass('menu-hidden');
	});
});