CSS and J-Query Help.....(New Poster)

Hi all,

I have just started to learn J-Query and I'm trying to implement a simple click event into my webpage, which is when you click a button it will open the mobile-nav.

This button works when I select the header for example but wont open the mobile-nav?

I will upload the index file p.s I'm copying the DICE homepage just for learning purposes as I know I'm using copyrighted media .

I think it could be to do with that Im hiding the mobile-nav in my CSS so the J-query cant toogle/show it.



<script>
$(function(){

$('.bars').on('click',function(){
$('.mobile-nav').toggle();
});
}); //End of code?//
</script>

@media screen and (max-width: 1024px) {
nav{
justify-content: space-around;
}

.bars{
display:block;
width: 50px;
height: 100px;
cursor: pointer;
}


ul{
display: none !important;
}


.mobile-nav{
display: none;
position:absolute;
z-index: 3;
left:-110px;
top:70px;
width: 100%;
height: 100%;
opacity: 0.8;
background-color:black;
}

.mobile-nav li{
height: 50px;
}

.mobile-nav a{
font-size: 2rem;
font-weight: 700;
}
}

Sorry if that's not clear my 1st time posting on here,
Thanks for any input you can give me.

 

My condolences on having been duped into using the halfwit nonsense known as jQuery... It's a fat bloated steaming pile of developer ineptitude you are better off forgetting even exists!

Read my article here:
http://www.cutcodedown.com/article/HTML_CSS_and_JS_frameworks

Specifically how most of what people do with jQuery falls into one of three categories:

1) Things that would be easier without the framework

2) Things that are CSS' job.

3) Crap that has zero damned business on a website in the first place!

You've got a nasty case of #2 here. Let's just use a menu as an example:

Markup:

	<input type="checkbox" id="menuCheckBox">
	<label for="menuCheckBox"></label>
	<ul id="mainMenu">
		<li><a href="#">ABOUT</a></li>    
		<li><a href="#">GAMES</a></li>    
		<li><a href="#">JOBS</a></li>    
		<li><a href="#">NEWS</a></li>
		<li><a href="#">STORE</a></li>    
	</ul>

Code (markup):

Desktop CSS:

#menuCheckBox {
	/* hide it */
	position:absolute;
	left:-999em;
}
#mainMenu {
	list-style:none;
	padding:0.25em;
	text-align:center;
	background:#DEF;
}
#mainMenu li {
	display:inline;
	vertical-align:bottom;
}
#mainMenu a {
	display:inline-block;
	vertical-align:bottom;
	padding:0.25em 0.75em;
	text-decoration:none;
	color:#EEE;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#FFF;
	background:#777;
}

Code (markup):

Then we just need a media query for mobile, you'd adjust this max-width as needed for when the menu would be too wide to show:

@media (max-width:32em) { /* guessing on that max-width */
	#menuCheckBox + label {
		display:block;
		text-align:center;
		padding:0.25em;
		font-weight:bold;
		background:#BDF;
	}
	/*
		You could put a hamburger icon in the label but I prefer text
		as I'm NOT a fan of "Ambiguous UI"
	*/
	#menuCheckBox + label:before {
		content:"Show Menu"; 
	}
	#menuCheckBox:checked + label:before {
		content:"Hide Menu";
	}
	/*
		you could also try to get fancy with animations on the UL but to me those
		just become annoying crap the second or third time you use the page.
	*/
	#mainMenu {
		display:none;
	}
	#mainMenu a,
	#menuCheckBox:checked ~ #mainMenu {
		display:block;
	}
} /* max-width:32em */

Code (markup):

That's all there is to it, no scriptttardery needed. Which is increasingly important as people on metered plans and battery powered devices take to blocking scripts as a waste of power and bandwidth.

Oh, and if you need that X-UA crap on a NEW site there's something horribly and terrifyingly wrong with how you are building a site.

Putting that together into a simple demo template, it ends up working thusly:

http://www.cutcodedown.com/for_others/tomNoble/template.html

As with all my code examples the directory:
http://www.cutcodedown.com/for_others/tomNoble/

Is wide open for easy access to the gooey bits and pieces.

You don't need nor should you be using some fat bloated 100k minified framework asshattery for things like this. All those people out there praising jQuery? <b>REALLY need to put a sock in it!</b>

They are doing nothing but preying on the ignorance of people just starting out, or flamboyantly waving their ... ignorance in everyone's faces. (I mean something else, but we'll say ignorance). This of course stems from the fact that most of them don't learn enough CSS or JavaScript before diving into jQuery to even know if jQuery is doing anything they need it to do; laughably in most every case -- again -- what's trying to be done falls into one of those three categories above. It's like they have a hammer, so every problem they see is a nail.

Same goes for other bits of idiotic "framework" garbage like bootcrap, yui, mootools, etc, etc... you "need" to use one of them, you are probably doing something wrong. At best they are pointless bloat and a crutch for the inept, at worst they are nube predating scam bait.

The only thing you can learn from any of those is how NOT to build a website, the end results always being bloated, slow loading inaccessible broken disasters that I cannot fathom how ANYONE can see merit in apart from utter and complete ignorance, incompetence, or stupidity.