Jump to content

Responsive design trouble/clickable menu


rootKID
 Share

Recommended Posts

Hello W3S

 

Well i did post my menu thing in the CSS but that part is fixed now. Now i have another problem jQuery/Javascript related.

 

What i wish is to make a drop-down menu in the mobile AND a slidedown in the normal PC version when a mouse is over the menu.

 

I have started with the Menu at the moment, but not doing well.

 

This is my JS file:

$('span.nav-btn').click(function() {	$('ul.nav').slideToggle("fast");})

and this is my HTML:

<?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/smoothmenu.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]>	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>";		// Sixteen Columns (Banner AND Logo, Userlogin, Menu)	echo "<div class='sixteen columns'>";				// Banner AND Logo		echo "<div class='ten columns half-bottom home_banner'>";			echo "Banner/Logo";		echo "</div>"; // Banner AND Logo				// LinkedIN Login		echo "<div class='five columns half-bottom userlogin_top'>";			echo "<a href='#'>Bruger Login</a>";		echo "</div>"; // LinkedIN Login				// Menu		echo "<div class='sixteen columns half-bottom navigation'>";			echo "<span class='nav-btn'></span>";			echo "<ul class='nav'>";				// Forside				echo "<li><a href='index.php'>Forside</a></li>";								// Job Søgere				echo "<li><a href='#'>For Jobsøgere</a>";					echo "<ul>";						echo "<li><a href='#'>Uopfordret ansøgning</a></li>";						echo "<li><a href='#'>Emnebank</a></li>";					echo "</ul>";				echo "</li>";								// For Virksomheder				echo "<li><a href='#'>For Virksomheder</a>";					echo "<ul>";						echo "<li><a href='#'>Processen for jer</a></li>";						echo "<li><a href='#'>Rekruttering og udvælgse</a></li>";						echo "<li><a href='#'>Headhunnting</a></li>";						echo "<li><a href='#'>Personlighedstest</a></li>";						echo "<li><a href='#'>Referencer</a></li>";					echo "</ul>";				echo "</li>";								// Ledige Stillinger				echo "<li><a href='#'>Ledige Stillinger</a>";					echo "<ul>";						echo "<li><a href='#'>Processen for dig</a></li>";					echo "</ul>";				echo "</li>";								// Kontakt				echo "<li><a href='#'>Kontakt</a>";					echo "<ul>";						echo "<li><a href='#'>Om RightMatch</a></li>";						echo "<li><a href='#'>Mission & Vision</a></li>";						echo "<li><a href='#'>Nyt og artikler</a></li>";					echo "</ul>";				echo "</li>";			echo "</ul>";		echo "</div>"; // Menu	echo "</div>";		// Eight Columns (News Blog)	echo "<div class='eleven columns half-bottom home_news'>";		echo "Sidste Nyheder";	echo "</div>";		// Eight Columns (Something)	echo "<div class='five columns half-bottom home_feed'>";		echo "LinkedIN Feed";	echo "</div>";		// Sixteen Columns (Footer, Admin Login)	echo "<div class='sixteen columns'>";		echo "<div>";			echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>";		echo "</div>";		echo "<div>";			echo "<a href='#'>Admin Login</a>";		echo "</div>";	echo "</div>";	echo "</div>";?></body></html>

And in case you wish my CSS:

body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; }	.userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Navigation / Main==================================================*/.navigation {	height: 40px;	background-color: #333f4f;	-webkit-border-radius: 0 0 8px 8px;	-moz-border-radius: 0 0 8px 8px;	border-radius: 0 0 8px 8px;}	ul.nav {}	ul.nav ul { display: none; }		ul.nav > li {		position: relative;		float: left;	}		ul.nav > li > a {		display: block;		padding: 0 20px;		color: #FFFFFF;		text-transform: uppercase;		font-size: 1.083em;		font-family: "Oswald";		line-height: 40px;		text-decoration: none;	}		ul.nav > li:hover > a,	ul.nav > li:active > a {		-webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		-moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		background-color: rgba(51,63,79,.09);		color: #8E5452;	}		ul.nav li:hover:first-child a,		ul.nav li:active:first-child a  {			-webkit-border-radius: 0 0 0 7px;			-moz-border-radius:0 0 0 7px;			border-radius:0 0 0 7px;		}		/*# Navigation / Sub-Menu==================================================*/ul.nav li:hover > ul {	display: block;	left: 0;	background-color: #333f4f;}	/*ul.nav li ul li { width: 150px; }*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {	.userlogin_top { height: 70px; }		.userlogin_top a { margin-left: 70px; }			/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {	/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {	.userlogin_top { height: 60px; }		.userlogin_top a { margin-left: 170px; line-height: 60px; }			/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {	.userlogin_top { height: 50px; }		.userlogin_top a { margin-left: 110px; line-height: 50px; }			/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}

Now this is a design still in the process, but bottom line is that whenever i have a table/mobile view (all other designs that is higher than 960px width), then as you see in my CSS media query i have made a simple ":before" to make the "Menu" appear.

 

Here comes my problem, i followed a simple JS tutorial on youtube on how to make a responsive navigation-menu and it dosen't work whenever i click on the menu. I wonder if anyone can see where the error is? Because not sure where to look to be honest... hoping someone can help me out where i can't help myself hehe :)

 

Thanks in advance! :)

Regards, rootKID.

Link to comment
Share on other sites

You should try running that Javascript after the page has finished loading.

 

Be sure to check your browser's Javascript console for error messages. I imagine it says something like this: Unable to find property "click" on undefined.

Link to comment
Share on other sites

Well now it works! Thanks haha... one question tho, why? I don't get it... It should be able to work at the meta tag right Oo?

 

And another thing, what about the jQuery part? Should that be in the <meta> also? Or at the bottom?

 

Thanks ALOT again! Been trying to figure this one out for 2 days now -.-'...

And weird thing is, i didn't get any errors that i could see in the console, so don't think i have any x)

 

Thanks anyways x)

Link to comment
Share on other sites

Scripts that you put in the head section (or really all scripts anywhere) are executed as soon as the browser reaches that point in the HTML. That means that scripts in the head section will be executed before the body section has been created, so none of the elements exist at that point. You can link to a script file in the bottom of the body section and that will be fine because the elements will have already been created by the time the browser gets to the script.

And another thing, what about the jQuery part? Should that be in the <meta> also? Or at the bottom?

Meta tags have nothing to do with Javascript files. If you want to know where to put a piece of code then ask yourself what the code is doing. If it needs to work with elements then the code needs to run after the elements are loaded. The other way to do that is to put the code in the head section and use an onload handler so that it will only run after the page finishes loading.
Link to comment
Share on other sites

The issue is that the DOM needs to load first, in order for event handlers to be able to bind to the elements they're intended for. If you assign an event handler before that element has loaded, well you found what happens. A best practice is to always wrap init code in a window.onload / DOMContentLoaded event, or with jQuery, by using .ready()

http://api.jquery.com/ready/

 

Although you _could_ solve this by loading all JS at the bottom of the page, the real advantage with that practice is that it allows the browser to load the page into view without have to wait for any JS to load (which will block page loading).

Link to comment
Share on other sites

The issue is that the DOM needs to load first, in order for event handlers to be able to bind to the elements they're intended for. If you assign an event handler before that element has loaded, well you found what happens. A best practice is to always wrap init code in a window.onload / DOMContentLoaded event, or with jQuery, by using .ready()

http://api.jquery.com/ready/

 

Although you _could_ solve this by loading all JS at the bottom of the page, the real advantage with that practice is that it allows the browser to load the page into view without have to wait for any JS to load (which will block page loading).

The best practice is to put all the code at the bottom of the page, including the jQuery library. The reason is simple: The jQuery library takes time to load, while it's loading the rest of the page is not loading. If the jQuery is at the top then the page will appear blank until the jQuery library loads. It might not seem like a big deal on a fast connection, but on slower connections it means a lot.

 

Statistics indicate that if a person hasn't seen what they wanted on a page in seven seconds they'll leave the site, so having it load quickly is important.

Link to comment
Share on other sites

Ok thanks alot! Helps on the understanding!

 

Now i have one question left, which dosen't makes sence to me in a way. Whenever i click the "Menu" at the mobile view, my menu dosen't appear Oo? I mean it does... but the items are not loaded, almost like the design is being taken away for some reason?

 

This is the image of the website:

 

Capture.png

 

Ideas? Oo?

 

This is my HTML + CSS and JS

 

CSS:

body { margin-top: 10px; }.home_banner { height: 70px; background-color: #F1F1F1; }.userlogin_top { height: 70px; }	.userlogin_top a { margin-left: 100px; line-height: 70px; text-decoration: none; }.home_news {background-color: #C2C2C2; }.home_feed { background-color: #C2C2C2; }/*# Navigation / Main==================================================*/.navigation {	height: 40px;	background-color: #333f4f;	-webkit-border-radius: 0 0 8px 8px;	-moz-border-radius: 0 0 8px 8px;	border-radius: 0 0 8px 8px;}	ul.nav {}	ul.nav ul { display: none; }		ul.nav > li {		position: relative;		float: left;	}		ul.nav > li > a {		display: block;		padding: 0 20px;		color: #FFFFFF;		text-transform: uppercase;		font-size: 1.083em;		font-family: "Oswald";		line-height: 40px;		text-decoration: none;	}		ul.nav > li:hover > a,	ul.nav > li:active > a {		-webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		-moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		background-color: rgba(51,63,79,.09);		color: #8E5452;	}		ul.nav li:hover:first-child a,		ul.nav li:active:first-child a  {			-webkit-border-radius: 0 0 0 7px;			-moz-border-radius:0 0 0 7px;			border-radius:0 0 0 7px;		}		/*# Navigation / Sub-Menu==================================================*//* Showing the Sub-Menu */ul.nav li:hover > ul { display: block; }/* Making sure there is not space between Main and Sub-Menu */ul.nav ul { margin: 0 0 0 0; }/* If position "absolute" i can define custom width etc without errors! */ul.nav ul {	position: absolute;	left: -15px;	right: -15px;	padding: 10px 0 10px 0;	background-color: #333f4f;}ul.nav li ul li a {	display: block;	text-align: center;	/*color: #FEFEFE; -> only if JS is activated with color fading script like U232!*/}ul.nav li ul li > a { color: #F15B19 !important; text-decoration: none; }ul.nav li ul li:hover {	-webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);	-moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);	box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);	background-color: rgba(0,0,0,.15);}	/*ul.nav li ul li:hover > a {}*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {	.userlogin_top { height: 70px; }		.userlogin_top a { margin-left: 70px; }			/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {	/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {	.userlogin_top { height: 60px; }		.userlogin_top a { margin-left: 170px; line-height: 60px; }			/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {	.userlogin_top { height: 50px; }		.userlogin_top a { margin-left: 110px; line-height: 50px; }			/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; visibility: hidden; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}

HTML:

<?php/*THIS PROJECT USES 960GRID SYSTEM!==================================*/ob_start();session_start();# Database Settings & Setuprequire_once("database/db.core.php");# Functions Libraryrequire_once("includes/functions.php");?><!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Hjem</title><script type="text/javascript" src="js/jquery.js"></script><link rel="stylesheet" href="style/base.css"><link rel="stylesheet" href="style/skeleton.css"><link rel="stylesheet" href="style/skillet.css"><link rel="stylesheet" href="style/main.css"><!--[if lt IE 9]>	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="shortcut icon" href="style/images/favicon.ico"></head><body><?phpecho "<div class='container'>";		// Sixteen Columns (Banner AND Logo, Userlogin, Menu)	echo "<div class='sixteen columns'>";				// Banner AND Logo		echo "<div class='ten columns half-bottom home_banner'>";			echo "Banner/Logo";		echo "</div>"; // Banner AND Logo				// LinkedIN Login		echo "<div class='five columns half-bottom userlogin_top'>";			echo "<a href='#'>LinkedIN Login</a>";		echo "</div>"; // LinkedIN Login				// Menu		echo "<div class='sixteen columns half-bottom navigation'>";			echo "<span class='nav-btn'></span>";			echo "<ul class='nav'>";				// Forside				echo "<li><a href='index.php'>Forside</a></li>";								// Job Søgere				echo "<li><a href='#'>For Jobsøgere</a>";					echo "<ul>";						echo "<li><a href='#'>Uopfordret ansøgning</a></li>";						echo "<li><a href='#'>Emnebank</a></li>";					echo "</ul>";				echo "</li>";								// For Virksomheder				echo "<li><a href='#'>For Virksomheder</a>";					echo "<ul>";						echo "<li><a href='#'>Processen for jer</a></li>";						echo "<li><a href='#'>Rekruttering og udvælgse</a></li>";						echo "<li><a href='#'>Headhunnting</a></li>";						echo "<li><a href='#'>Personlighedstest</a></li>";						echo "<li><a href='#'>Referencer</a></li>";					echo "</ul>";				echo "</li>";								// Ledige Stillinger				echo "<li><a href='#'>Ledige Stillinger</a>";					echo "<ul>";						echo "<li><a href='#'>Processen for dig</a></li>";					echo "</ul>";				echo "</li>";								// Kontakt				echo "<li><a href='#'>Kontakt</a>";					echo "<ul>";						echo "<li><a href='#'>Om RightMatch</a></li>";						echo "<li><a href='#'>Mission & Vision</a></li>";						echo "<li><a href='#'>Nyt og artikler</a></li>";					echo "</ul>";				echo "</li>";			echo "</ul>";		echo "</div>"; // Menu	echo "</div>";		// Eight Columns (News Blog)	echo "<div class='eleven columns half-bottom home_news'>";		echo "Sidste Nyheder";	echo "</div>";		// Eight Columns (Something)	echo "<div class='five columns half-bottom home_feed'>";		echo "LinkedIN Feed";	echo "</div>";		// Sixteen Columns (Footer, Admin Login)	echo "<div class='sixteen columns'>";		echo "<div>";			echo "© Copyright 2014 / ".date("Y")." | <a href='http://www.rightmatch.dk' target='_blank'>www.rightmatch.dk</a>";		echo "</div>";		echo "<div>";			echo "<a href='#'>Admin Login</a>";		echo "</div>";	echo "</div>";	echo "</div>";// JavaScript Loaded Hereecho "<script type='text/javascript' src='js/smoothmenu.js'></script>";?></body></html>

JS:

$('span.nav-btn').click(function() {	$('ul.nav').slideToggle("fast");})$(window).resize(function() {	// if "BIGGER" than 600px	if ( $(window).width() > 600 ) {		$('ul.nav').removeAttr('style');	}})

Hope you can spot it, i can't Oo?

Link to comment
Share on other sites

You don't really need to echo all those things out, just leave the HTML outside the <?php ?> block and it will be on the page automatically. Your code will be much more readable and you'll be saving the PHP engine a few instructions.

 

I don't think that removing the style attribute from the element will remove the style property from the DOM. But what is the reason you're removing it in the first place?

Link to comment
Share on other sites

It was just really to keep my code in the background clean from the style attribute, why? Is that the thing that gives me error? Oo?...

 

EDIT

Lol i misunderstood your question, i added it because whenever my browser returns to the full PC size, all the menu items has for some reason been erased, basically just like my problem now, in the menu whenever i scroll down my items aren't there...

Edited by rootKID
Link to comment
Share on other sites

It's probably not giving an error, but I don't think it's doing anything at all. What did you intend when you wrote that code? If you explain your motives I can tell you what would be a better option.

 

It would be ideal if I could see a working page. Check your browser's Javascript console in the developer tools and see what error messages you're getting.

 

As for why your menu items are invisible, perhaps the text is the same color as the background. Check the styles you have applied to the elements.

Link to comment
Share on other sites

lol, it wasn't the color... it was "visibility" in the CSS, stupid me hehe... i only needed display: none :)

 

About what my intensions are, those are simple. Whenever my screen size for tablet,mobile etc are under 960px width, it will show the clickable menu for people around the world not having trouble with the view of the website. And if bigger or equal to 960px width, it will then show a normal dropdown menu, which works without any problems :)

 

The reason i remove the style attribute whenever the window size width is bigger than 900 (or so), that is for the normal PC/Laptop menu to work properly without any problems. If i dont the menu will have problem being viewed by people that uses the normal PC/Laptop view of the website.

 

Hope this clears stuff up a big? :P...

 

another question that is actually related, now my idea for the mobile/tablet view if to first show the main-menu items whenever the "Menu" has been clicked, and then i wish to make another clickable item, in which case would be the main menu item for that item to show it's sub-menu items.

 

My question is, would it be possible to make another just like now in the JS? If i select the "ul.nav li" to be clickable and then show all the "ul li" within that specific drop? :)

 

What are your suggestions? Kind of in a hurry, hope you can help me hehe :P

Thanks again! :)

Link to comment
Share on other sites

I think the functionality you're describing is an accordion menu.

 

 

As for this: $('ul.nav').removeAttr('style');

I really doubt it's actually doing anything useful. You should look into addClass() and removeClass().

 

The way the code currently is, as soon as the window is wider than 600px the style attribute is removed, but you never put the style back, so it will stay like that even if you resize it back down to under 600px. You should have an else statement that does something else if the window is not wider than 600px. Another thing you probably would want to do is to have that same function run once as soon as the page has loaded. If you don't, then nothing will happen until the user resizes the window and they might not always do that.

Link to comment
Share on other sites

how do you suggest i run the same function as soon the page is being loaded Oo?

Link to comment
Share on other sites

so what you are saying is that i could make the if/else statement INSIDE the resize part and say that if bigger than 600px, remove attribute, else add the attribute back to the ul.nav? That is how i understand it anyways.. sorry, JS is not my best side hehe, trying to push myself into it ^^'

Link to comment
Share on other sites

You need the if() statement inside the function, because if you don't put it there it will happen only once and it won't change after resizing.

 

During the resize event you can add or remove classes. The class should exist in your CSS stylesheet.

function resized(e) {    if(window).width() > 600) {        $('ul.nav').removeClass("small-screens");    } else if(!$('ul.nav').hasClass("small-screens")) {        $('ul.nav').addClass("small-screens");    }}

Looking at it, I don't think you need Javascript at all. Just use media queries:

ul.nav {    /* Styles for large screens */}@media screen and (max-width: 600px) {    ul.nav {        /* styles for small screens */    }}
Link to comment
Share on other sites

i already use Media Queries. But if i dont use JS for my "menu" and to make it clickable, the users with normal phones/tablets/etc can't use the website, that im aware off... and how am i supposed to show the "sub menus" at the small design etc? Not sure how... unless you have any suggestions?

 

This is my CSS:

/*# Navigation / Main==================================================*/.navigation {	height: 40px;	background-color: #333f4f;	-webkit-border-radius: 0 0 8px 8px;	-moz-border-radius: 0 0 8px 8px;	border-radius: 0 0 8px 8px;}	ul.nav {}	ul.nav ul { display: none; }		ul.nav > li {		position: relative;		float: left;	}		ul.nav > li > a {		display: block;		padding: 0 20px;		color: #FFFFFF;		text-transform: uppercase;		font-size: 1.083em;		font-family: "Oswald";		line-height: 40px;		text-decoration: none;	}		ul.nav > li:hover > a,	ul.nav > li:active > a {		/*		-webkit-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		-moz-box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		box-shadow: inset 5px 0 10px rgba(51,63,79,.15), inset -5px 0 10px rgba(51,63,79,.15);		background-color: rgba(51,63,79,.09);		*/		color: #F15B19;	}		ul.nav li:hover:first-child a,		ul.nav li:active:first-child a  {			-webkit-border-radius: 0 0 0 7px;			-moz-border-radius:0 0 0 7px;			border-radius:0 0 0 7px;		}		/*# Navigation / Sub-Menu==================================================*//* Showing the Sub-Menu */ul.nav li:hover > ul { display: block; }/* Making sure there is no space between Main and Sub-Menu */ul.nav ul { margin: 0 0 0 0; }/* If position "absolute" i can define custom width etc without errors! */ul.nav ul {	position: absolute;	left: -15px;	right: -15px;	padding: 10px 0 10px 0;	background-color: #333f4f;}ul.nav li ul li a {	display: block;	text-align: center;	/*color: #FEFEFE; -> only if JS is activated with color fading script like U232!*/}ul.nav li ul li > a { color: #8E5452; text-decoration: none; font-family: "Oswald"; }ul.nav li ul li:hover > a { color: #F15B19; }ul.nav li ul li:hover {	-webkit-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);	-moz-box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);	box-shadow: inset 5px 0 10px rgba(0,0,0,.15), inset -5px 0 10px rgba(0,0,0,.15);	background-color: rgba(0,0,0,.15);}	/*ul.nav li ul li:hover > a {}*//*# Media Queries==================================================*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {	div.banner { height: 138px; background: url(images/logo/tablet.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {	div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {	div.banner { height: 126px; background: url(images/logo/mobile_land.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {	div.banner { height: 90px; background: url(images/logo/mobile_port.png) no-repeat top center #FFFFFF; }		/*	# Navigation Menu	--------------------------------------------------	*/		.navigation { height: auto; }	ul.nav { display: none; }		.nav-btn {		display: block;		padding-top: 5px;		padding-bottom: 5px;		font-size: 20px;		color: #FFFFFF;		text-align: center;		cursor: pointer;	}		.nav-btn:before { content:"Menu"; }}

My HTML

<?phpecho "<div class='sixteen columns half-bottom navigation'>";	echo "<span class='nav-btn'></span>";	echo "<ul class='nav'>";		// Forside		echo "<li><a href='index.php'>Forside</a></li>";				// Job Søgere		echo "<li><a href='#'>For Jobsøgere</a>";			echo "<ul>";				echo "<li><a href='#'>Uopfordret ansøgning</a></li>";				echo "<li><a href='#'>Emnebank</a></li>";			echo "</ul>";		echo "</li>";				// For Virksomheder		echo "<li><a href='#'>For Virksomheder</a>";			echo "<ul>";				echo "<li><a href='#'>Processen for jer</a></li>";				echo "<li><a href='#'>Rekruttering og udvælgse</a></li>";				echo "<li><a href='#'>Headhunting</a></li>";				echo "<li><a href='#'>Personlighedstest</a></li>";				echo "<li><a href='#'>Referencer</a></li>";			echo "</ul>";		echo "</li>";				// Ledige Stillinger		echo "<li><a href='#'>Ledige Stillinger</a>";			echo "<ul>";				echo "<li><a href='#'>Processen for dig</a></li>";			echo "</ul>";		echo "</li>";				// Kontakt		echo "<li><a href='#'>Kontakt</a>";			echo "<ul>";				echo "<li><a href='#'>Om RightMatch</a></li>";				echo "<li><a href='#'>Mission & Vision</a></li>";				echo "<li><a href='#'>Nyt og artikler</a></li>";			echo "</ul>";		echo "</li>";	echo "</ul>";echo "</div>";?>

Ideas? :)

Link to comment
Share on other sites

A little bit, but i think it's no good due to the CSS system-frame i use. I'm using something that is called "GetSkeleton" which is based on "960Grid CSS Framework". However if it DOES work, i would consider adding it right now x). Do you think it is valid to add? :)

Link to comment
Share on other sites

I don't see how there would be a problem. All an accordion menu does is show or hide parts of the menu using a sliding animation.

Here's one implemented in jQuery UI: http://api.jqueryui.com/accordion/

Here's another implementation: http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3

Five more: http://cssmenumaker.com/blog/5-free-jquery-accordion-menus

 

If one of them doesn't work for you, try another. There are hundreds of them out there.

Link to comment
Share on other sites

but i only need it when my users browser are in mobile mode, and when it's normal i need my menu to be according, that is why i dont think they will fit in... that i can see...

Link to comment
Share on other sites

A menu is just a structure of list elements. Style it however you like, use media queries to make it look different on different screens.

<nav id="menu"><ul>    <li>Home</li>    <li><span>Products</span>        <ul>            <li>Category 1</li>            <li>Category 2</li>            <li>Category 3</li>        </ul>    </li>    <li><span>Services</span>        <ul>            <li>Category 1</li>            <li>Category 2</li>            <li>Category 3</li>        </ul>    </li></ul></nav>

Here's the jQuery code from the second accordion example I linked to, modified to fit this structure.

$("#menu span").click(function(){    //slide up all the link lists    $("#menu ul ul").slideUp();    //slide down the link list below the span clicked - only if its closed    if(!$(this).next().is(":visible")) {        $(this).next().slideDown();    }});

What I'm going to do is change it to use the resize() and load() events to decide whether or not this functionality should be used.

$(document).ready(chooseMenuType); // Choose menu when loading the page$(window).resize(chooseMenuType); // Choose menu when resizing the pagefunction chooseMenuType() {    if($(window).width() > 600) {        // Remove event listener        $("#menu span").off("click", accordion);        // Optionally show all lists. Remove this line if you want to        $("#menu ul ul").show();    } else {        // Add the event listener        // Event listeners aren't duplicated, so there's no harm in doing this on every resize event        $("#menu span").on("click", accordion);    }}function accordion() {    //slide up all the link lists    $("#menu ul ul").slideUp();    //slide down the link list below the h3 clicked - only if its closed    if(!$(this).next().is(":visible")) {       $(this).next().slideDown();    }}

Interestingly enough, you might not even have to remove the accordion menu events when resizing the page, meaning the resize() and load() events are unnecessary. If what you want on large screens is a horizontal menu with a dropdown, this accordion script will do exactly that if you change the CSS a little.Just use media queries. On large screens, set the top <li> elements to float left and position: relative, then set the inner <ul> elements to position: absolute. On small screens, set float: none and position: static.

#menu > ul > li {    position: relative;    float: left;}#menu > ul > li > ul {    position: absolute;    top: 40px;    left: 0;}@media screen and (max-width: 600px) {    #menu > ul > li {        position: static;        float: none;    }     #menu > ul > li > ul {        position: static;    }}
Link to comment
Share on other sites

I will try this out later when im home, i might have an idea with the number 3 you linked to... or was it 1... the one where there is a video also, i just saw it and got an idea (maybe) x)... i'm out right now but will write back later when home and tested! :)

 

Thanks! ;)

Link to comment
Share on other sites

Ok i'm home now and tested. However i have chosen to go with one of those you listed up there, you were right, just needed a little bit of CSS, this helps one of my problems ALOT!

 

This is the one i went with: http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3

 

However my code dosent works now, this is my JS:

// NEW SOURCE// -----------------------$(document).ready(chooseMenuType); // Choose menu when loading the page$(window).resize(chooseMenuType); // Choose menu when resizing the pagefunction chooseMenuType() {	// Bigger than 959px	if($(window).width() > 959) {		// Remove event listener		$("#accordian h3").off("click", accordion);				// Optionally show all lists. Remove this line if you want to		//$("#accordian ul ul").show();	} else {		// Add the event listener		// Event listeners aren't duplicated, so there's no harm in doing this on every resize event		$("#menu span").on("click", accordion);	}}function accordion() {	//slide up all the link lists	$("#accordian ul ul").slideUp();	//slide down the link list below the h3 clicked - only if its closed	if(!$(this).next().is(":visible"))	{		$(this).next().slideDown();	}}

Changed some of the names and stuff, just to see if it was working properly, it does actually, but now whenever i resize my browser to be at mobile scale, the clicks on the menu dosen't have any form of effect... in other words dosen't react whenever i click on a menu item.

 

This is my new HTML:

<div id="accordian">	<ul>		<li>			<h3><span class="icon-dashboard"></span>Dashboard</h3>			<ul>				<li><a href="#">Reports</a></li>				<li><a href="#">Search</a></li>				<li><a href="#">Graphs</a></li>				<li><a href="#">Settings</a></li>			</ul>		</li>		<!-- we will keep this LI open by default -->		<li class="active">			<h3><span class="icon-tasks"></span>Tasks</h3>			<ul>				<li><a href="#">Today's tasks</a></li>				<li><a href="#">Urgent</a></li>				<li><a href="#">Overdues</a></li>				<li><a href="#">Recurring</a></li>				<li><a href="#">Settings</a></li>			</ul>		</li>		<li>			<h3><span class="icon-calendar"></span>Calendar</h3>			<ul>				<li><a href="#">Current Month</a></li>				<li><a href="#">Current Week</a></li>				<li><a href="#">Previous Month</a></li>				<li><a href="#">Previous Week</a></li>				<li><a href="#">Next Month</a></li>				<li><a href="#">Next Week</a></li>				<li><a href="#">Team Calendar</a></li>				<li><a href="#">Private Calendar</a></li>				<li><a href="#">Settings</a></li>			</ul>		</li>		<li>			<h3><span class="icon-heart"></span>Favourites</h3>			<ul>				<li><a href="#">Global favs</a></li>				<li><a href="#">My favs</a></li>				<li><a href="#">Team favs</a></li>				<li><a href="#">Settings</a></li>			</ul>		</li>	</ul></div>

Still working on the CSS but looking promising so far x)

 

EDIT

 

Never mind, i figured out the problem x)

Now i have another problem, or so i think, just not sure how to type it in.

Whenever i have the "normal" screen menu, i wish when my mouse goes over the h3/main menu item, all the submenu when they show, instead of just coming down i wont them to get a "slideDown" from the jQuery part, however whenever i try to add it to the JS it wont work, ideas etc? :)

Edited by rootKID
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...