• 66 791 online
  • 1 192 895 medlemmar
  • 61 809 253 inlägg
2018-10-11, 21:52
  #1
Medlem
Hej!
Jag har försökt följa en youtube guide om hur man gör Responsive Web Design för mobiler och får en meny. Har följt hans exempel till punkt och pricka och försökt flera gånger, både gått igenom filerna och startat helt från början, fast jag får det inte javascriptet att fungera.
Någon som ser något fel i javascriptet eller någon annan stans

Youtube filmen


HTML-kod:
<!doctype html>
<html lang="se">
<head>
<title>menytest</title>
<meta charset="utf-8">
<link rel="stylesheet" media="screen, projection" href="screen.css">
<script  src="script.js"></script>
</head>
<body>
<div class="Container">
	<span class="menu-trigger">MENY</span>
	<div class="nav-menu">
	<ul class="clearfix">
		<li><a href="#">meny 1</a></li>
		<li><a href="#">meny 1</a></li>
		<li><a href="#">meny 1</a></li>
		<li><a href="#">meny 1</a></li>
		<li><a href="#">meny 1</a></li>
	</ul>
	</div>
</div>
</body>
</html>

screen.css
HTML-kod:
 div.nav-menu {
	background-color: #e7ecf2;
	padding: 0 20px;
}

div.nav-menu ul {
	margin:0;
	padding:0;
}

div.nav-menu ul li {
	list-style: none;
	float: left;
}
div.nav-menu ul li a:link,
div.nav-menu ul li a:visited {
	display: block;
	font-size: 90%;
	padding: 10px 25px 10px 0;
	color: #305782;
	text-decoration: none;
	font-weight: bold;
}

.menu-trigger {
	display: none;
}

@media screen and (max-width: 480px) {
	.menu-trigger {
		display: block;
		color: #305782;
		background-color; #d5dce4;
		padding: 10px;
		text-align: right;
		font-size: 83%;
		cursor: pointer;
	}
	div.nav-menu {
		display: none;
	}
	div.nav-expanded {
		display:block;
	}
	div.nav-menu ul li {
		float:none;
		border-bottom: 2px solid #d5dce4;
	}
	div.nav-menu ul li:last-child {
		border: none;
	}
}

script.js
HTML-kod:
jQuery(document).ready(function() {

	jQuery(".menu-trigger").click(function)() {

		jQuery(".nav-menu").slideToggle(400, function)() {
			jQuery(this).toggleClass("nav-expanded").css('display', ''); 
		});

	});

}); 
Citera
2018-10-12, 12:32
  #2
Medlem
Det ser inte ut som du laddat själva jQuerybiblioteket på något sätt?
Bör väl göras innan script.js laddas.
Citera
2018-10-12, 14:27
  #3
Moderator
Protons avatar
Jag kan förstå om du gör det i inlärningssyfte, men finns det nån annan anledning att du inte använder grejjer som är avsedda för just sådant här, till exempel bootstrap?
Citera
2018-10-12, 21:21
  #4
Medlem
Upptäkte att jag var tvungen att länka in något när jag läste vidare lite.
Jag har aldrig. hållit på med javascript så lite ny på det här

Får ta och titta på vad bootstrap är för något..
Citera
Igår, 13:56
  #5
Moderator
Protons avatar
Citat:
Ursprungligen postat av Jonas-u
Upptäkte att jag var tvungen att länka in något när jag läste vidare lite.
Jag har aldrig. hållit på med javascript så lite ny på det här

Får ta och titta på vad bootstrap är för något..
https://getbootstrap.com/

Mycket trevligt ramverk imo.
Citera