Hamburger menu no more working

JavaScript
,
1

I had realized, with your help an hanburger menu, and it worked well. But recently it doesn’t work any more.
It seems a problem if $.browser undefined variable, but fixing it with a sitepoint post didn’t solve the problem (no hamburger menu visible in small screen, even no console js errors).

The is code is:

    $(function() {
		if ($.browser.msie && $.browser.version.substr(0,1)<7)
		{
		$('li').has('ul').mouseover(function(){
			$(this).children('ul').css('visibility','visible');
			}).mouseout(function(){
			$(this).children('ul').css('visibility','hidden');
			})
		}

		/* Mobile */
		$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');		
		$("#menu-trigger").on("click", function(){
			$("#menu").slideToggle();
		});

		// iPad
		var isiPad = navigator.userAgent.match(/iPad/i) != null;
		if (isiPad) $('#menu ul').addClass('no-transition');      
    });

a code I put in a js file called at the end of a php file.

The html is:

<div id="menu-wrap"> 
      <ul id="menu">
        <?php include "$root/menu-contenuti.inc"; ?>
      </ul>
     </div>

the css is:

/* You don't need the above styles, they are demo-specific ----------- */
	
	#menu, #menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
		min-width: 200px;
	}
	
	#menu {
		width: auto; 
		margin-left: auto; margin-right: auto; 
		margin-top: 2%; margin-bottom: 1%;
		background-color: #585858;
		background-image: linear-gradient(to bottom, #606060, #9F9F9F);
		border-radius: 8px;
		box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}
	
	#menu:before,
	#menu:after {
		content: "";
		display: table;
	}
	
	#menu:after {
		clear: both;
	}
	
	#menu {
		zoom:1;
	}
	
	#menu li {
		float: left;
		border-right: 1px solid #222;
		box-shadow: 1px 0 0 #444;
		position: relative;
	}
	
	#menu a, #menu .sub-index {
		float: left;
		padding: 6px 18px;
		color: white;
/* 		text-transform: uppercase; */
		font: bold 50%;
		text-decoration: none;
		text-shadow: 0 1px 0 #000;
	}
	
	#menu li:hover > a {
		color: white;
	}
	
	*html #menu li a:hover { /* IE6 only */
		color: #969670;
	}
	
	#menu ul {
		margin: 20px 0 0 0;
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px;
		left: 0;
		z-index: 1;    
		background: linear-gradient(#444, #111);
		box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
		border-radius: 3px;
		transition: all .2s ease-in-out;
	}

	#menu li:hover > ul, 
	#menu li:focus-within > ul {	
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	#menu ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
		_margin: 0; /*IE6 only*/
		box-shadow: -1px 0 0 rgba(255,255,255,.3);
	}
	
	#menu ul li {
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*IE6 only*/
		box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		min-width: 200px;
		background: #585858;
	}
	
	#menu ul li:last-child {   
		box-shadow: none;
	}
	
	#menu ul a, #menu ul .sub-index {    
		padding: 7px;
		min-width: 130px;
		_height: 10px; /*IE6 only*/
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
		font-size: 70%;
	}
	
	#menu ul a:hover {
		background-color: #969670;
		background-image: linear-gradient(#585858, #969670);
		color: white;
	}
	
	#menu ul li:first-child > a {
		border-radius: 3px 3px 0 0;
	}
	
	#menu ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #444;
	}
	
	#menu ul ul li:first-child a:after {
		left: -6px;
		top: 50%;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #3b3b3b;
	}
	
	#menu ul li:first-child a:hover:after {
		border-bottom-color: #04acec; 
	}
	
	#menu ul ul li:first-child a:hover:after {
		border-right-color: #0299d3; 
		border-bottom-color: transparent; 	
	}
	
	#menu ul li:last-child > a {
		border-radius: 0 0 3px 3px;
	}
	
	/* Mobile */
	#menu-trigger {
		display: none;
	}

	@media screen and (max-width: 600px) {

		/* nav-wrap */
		#menu-wrap {
			position: relative;
		}

		#menu-wrap * {
			box-sizing: border-box;
		}

		/* menu icon */
		#menu-trigger {
			display: block; /* show menu icon */
			height: 40px;
			line-height: 40px;
			cursor: pointer;		
			padding: 0 0 0 35px;
			border: 1px solid #222;
			color: #fafafa;
			font-weight: bold;
			background-color: darkgray;
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
			border-radius: 6px;
			box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		}
		
		/* main nav */
		#menu {
			margin: 0; padding: 10px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;
			background-color: #585858;
			display: none;
			box-shadow: none;		
		}

		#menu:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #444;
		}	

		#menu ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			background: none;
			box-shadow: none;				
		}

		#menu ul ul {
			margin: 0 0 0 20px !important;
			box-shadow: none;
			display: none;
		}

		#menu li {
			position: static;
			display: block;
			float: none;
			border: 0;
			margin: 5px;
			box-shadow: none;			
		}

		#menu ul li{
			margin-left: 20px;
			box-shadow: none;
			padding: 0 0 0 8px;
		}

		#menu a{
			display: block;
			float: none;
			padding: 0;
			color: white;
		}

		#menu a:hover{
			color: #fafafa;
		}	

		#menu ul a{
			padding: 0;
			width: auto;		
		}

		#menu ul a:hover{
			background: none;	
		}

		#menu ul li:first-child a:after,
		#menu ul ul li:first-child a:after {
			border: 0;
		}		

	}

	@media screen and (min-width: 600px) {
		#menu {
			display: block !important;
		}
	}	

	/* iPad */
	.no-transition {
		transition: none;
		opacity: 1;
		visibility: visible;
		display: none;  		
	}

	#menu li:hover > .no-transition {
		display: block;
	}
	
.sub-index:after {content: ' -»'}
.sub-index {font-weight: bold; border-bottom: solid white thin; }
2

So… you put this in a JS file…

that doesnt look like a JS file, that looks like a .inc file.

It’s also being called in the middle of a UL.

include will take your file’s contents, paste them into the space where the include statement is, and then evaluate it as PHP.

If you’ve got what you put there in that .inc file, as is, with nothing else, PHP is going to chew that up and spit it out because it’s not valid PHP code.

Given that you arent here saying that your page is refusing to load, I assume you’ve got more than just that in the file… right?

1 Like
3

no: menu-contenuti.inc is only an html container (with an unordered list of linked pages);
the js file containining the js code above is called in the footer of every php file with another code: is relevant to add it (the html footer code)?

The menu is working as usual in desktop screen. In small screen the page is correctly shown, but the hamburger menu is no more shown (unlike the recent past, when it worked).

EDIT

You can see the whole code (working and not working) at this website.

4

Oh okay. I got confused by your original posting then.

What’s the JS file called? I cant seem to see it being loaded in my (full size, desktop) browser.

We may need to see the PHP that’s supposed to load the file, because it doesnt appear to be loading for me…

1 Like
5

Here you are:

<?php echo "<script src=\"$root/norm-finale.js\" defer=\"defer\"></script>" ?>

But the file is called, if you see the final html source code:
i.g.

  <script src="../../norm-finale.js" defer="defer"></script>
6

Okay… I have managed to get it to load this time… somehow… and it’s throwing a javascript error.

Uncaught SyntaxError: Unexpected token ')' (at norm-finale.js:51:6)

You may have commented something out you didn’t intend to.

1 Like
7

Thank you: I fixed it, but it was not the solution. The hamburger menu doesn’t work yet :frowning:

8

So you’ve defined the function as jQuery.uaMatch = function( ua ) { … but nothing is calling the function you’ve defined. uaMatch is not part of jQuery, and hasnt been for over a decade…

1 Like
9

I just copied and pasted today (after my first post) from the above sitepoint post. My knowledge of javascript is absolutely basic, or worst.
How should I change it?

10

So… that article is from 2013, and… yeah.

Flag to Sitepoint Staff: at the very least, something is butchering that article linked above, as it goes from solution 1 to solution 3 while eating part of an ad block… someone might want to take a look at that one, if not remove it…

Right… back to the issue.

How should you change it… well, my advice would be to not do it at all, but…lets combine a bit of the original, a bit of the current…

 jQuery.uaMatch = function( ua ) {

becomes

$(function() {
  let ua = window.navigator.userAgent.toLowerCase();

the ) goes back into line 51.

You’re probably going to need to do something with match once you’ve got it, as right now, there’s nothing being done with it, and i’m not sure what you actually want to do.

1 Like
11

I found: the problem is the jquery release: with 1.8.2 hamburger menu works, with the 3.6.1 one, not.
And now? Security or menu working? Could I get both?

EDIT

Your last answer is based on a code I had meanwhile changed. Now the new (in fact old, see the first post) code works, but a security problem arises, I guess.

12

That’s because $browser.msie is working in that version of jquery. It was removed in later versions as it was deemed to be a bad approach.

Do you need to still support IE6? (.browser.version.substr(0,1)<7) !!!

I would just remove this section altogether and let IE6 die.

if ($.browser.msie && $.browser.version.substr(0,1)<7)
		{
		$('li').has('ul').mouseover(function(){
			$(this).children('ul').css('visibility','visible');
			}).mouseout(function(){
			$(this).children('ul').css('visibility','hidden');
			})
		}

Then you can use the later versions of jquery (unless you are using browser.msie all over the place of course).

2 Likes
13

Indeed so it works!
Thank you so much!!!
:+1: :+1: :+1:

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.