My once-working "accordion menu" has stopped working. Can you help me find the conflict.

Hello

Please look at this page (in Firefox or chrome). There seems to be an additional unrelated issue in IE.

Please look at vertical menu

Through a previous answered EE question the vertical menu worked as an accordion menu.  But after I made some making some changes a couple days ago the menu has stopped working and I can't figure out why...

. Basically won't expand anymore in the accordion mode.

I am not sure why it stopped. Can someone help me troubleshoot this and get it working again.  Here's the previously answered EE question: Previously solved Accordion question

Thanks!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
Hi Rwoby.
I don't remember the previous markup, but it look like you have added a section whose class is 'animated wow' (I use that me too for really good animations!). The problem is that the menu shouldn't stay within that section, which should dedicated just to animated elements.
So you should find the way to keep the section for animated logo separated by the section with the accordion. Try to close the section and open a new section for the accordion.
I'd strongly suggest to use Bootstrap as  css framwork. You seem to be not so on with the design, so you might consider to restart using Bootstrap...
Bootstrap gives you a solid grid system and it's very easy even to get complex layouts which are responsive. This just as suggestion...
Tom BeckCommented:
I don't think bootstrap is an option with Shopify.

I also cannot speak to what Marco is saying. I don't see a class 'animated wow' relative to the vertical menu. It looks like a standard css accordion menu to me. You are just missing a few key adjustments to make it work.

1.) You need to add a css definition to change the sub menus to 'display:block' when someone hovers over a list item.
#rowby-vertical-menu > li:hover > ul.submenu {
  display:block
}

Open in new window

2.) You need to remove style="display:none" from all the sub menus. Inline css will override any stylesheet css.
<ul class="submenu mysubmenu" style="display: none;">

3.) Your animation div is on top of the vertical menu preventing you from hovering some of the items. This is because you have the vertical menu z-indexed at -101. Change it to a positive number that is above the animation block.
ul#rowby-vertical-menu {
    background-color: #fff;
    font-size: 17px;
    line-height: 30px;
    margin-left: 90px;
    margin-top: 281px;
    padding-right: 30px;
    position: absolute;
    text-transform: uppercase;
    width: auto;
    z-index: -101;
}
Marco GasiFreelancerCommented:
@Tom: the class 'animated wow' is added to the section which holds the menu also, so I thought it could be a good idea separate the two things. And I didn't see Rowby had changed the z-index: good eyes! :-)

@Rowby: Ooops, I forgot Shopify! So leave away my words about bootstrap... Just changing the z-index as Tom suggested make accordion work, even if I don't understand why saubmenus appear in other places :-)
Cheers
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tom BeckCommented:
Ahh! I've just been brought up to speed. Yes, just fixing the z-index solves it.
Rowby GorenAuthor Commented:
Hi Tom and and Marco,

Tom you have an Eagle Eye!

I should have caught the z-index issue myself!!  

I spent hours checking everything else.

I see your other notes, Tom, and will look into those

If you look at the page now you will see that the background of the menu blocks the bottom area of the animation.

One solution would be do delay the appearance of the div containing the Menu for about 2 seconds, and then fade it up,  At that point the animation of the logo will have cleared the menu area.

Is it possible to delay the appearance of the (I assume) "ul.rowby-vertical-menu" for about 2 seconds.

Thanks

Rowby
Tom BeckCommented:
Make the menu display:none then fade it in when the animation finishes. This is the logo animation script on your page modified.
$('nav.stuckMenu ul#rowby-vertical-menu').css('display', 'none');
	$('.Logoimg').animate({
		backgroundSize: '33%'
	}, 3000, function () {
		$('.textImg').css('left', ($(window).width() - 750) + 'px').animate({
			left: '0'
		}, 2500, function(){
			$('nav.stuckMenu ul#rowby-vertical-menu').fadeIn(1000);
		});
	});

Open in new window

I used jQuery here to set the menu to display:none but it would be better do this in the css. Add up the timers and the menu will take a total of 6.5 seconds to appear.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom BeckCommented:
You could also fade it in as the text image is moving into place. In that case it would be visible after 4 seconds.
$('nav.stuckMenu ul#rowby-vertical-menu').css('display', 'none');
	$('.Logoimg').animate({
		backgroundSize: '33%'
	}, 3000, function () {
		$('nav.stuckMenu ul#rowby-vertical-menu').fadeIn(1000);
		$('.textImg').css('left', ($(window).width() - 750) + 'px').animate({
			left: '0'
		}, 2500);
	});

Open in new window

Rowby GorenAuthor Commented:
Hi Tom

Thanks will do.

Rowby
Rowby GorenAuthor Commented:
Hi Tom

This is what I'm using taken from Source code:
	 
<script>
$('nav.stuckMenu ul#rowby-vertical-menu').css('display', 'none');
	$('.Logoimg').animate({
		backgroundSize: '33%'
	}, 3000, function () {
		$('.textImg').css('left', ($(window).width() - 750) + 'px').animate({
			left: '0'
		}, 2500, function(){
			$('nav.stuckMenu ul#rowby-vertical-menu').fadeIn(1000);
		});
    }); </script>



	<script src="//cdn.shopify.com/s/files/1/0928/3584/t/11/assets/iwish.js?2430062926085526013" type="text/javascript"></script>

 
</body>

Open in new window

 Link to page:link to page

It does not seem to affect the delay of the menu.  Should I be taking your advice and handle a portion of it via css?
Tom BeckCommented:
Yes, try commenting out this line:
$('nav.stuckMenu ul#rowby-vertical-menu').css('display', 'none');

Open in new window

and adding display:none to the css near line 57 of rowbystyles.css.

ul#rowby-vertical-menu {
    background-color: #fff;
    font-size: 17px;
    line-height: 30px;
    margin-left: 90px;
    margin-top: 281px;
    padding-right: 30px;
    position: absolute;
    text-transform: uppercase;
    width: auto;
    z-index: 101;
    display:none
}
Rowby GorenAuthor Commented:
Works great Tom!

If they want it to appear *before* the animation finishes, what change would I make in the below js that you mentioned earlier:

$('nav.stuckMenu ul#rowby-vertical-menu').css('display', 'none');
	$('.Logoimg').animate({
		backgroundSize: '33%'
	}, 3000, function () {
		$('nav.stuckMenu ul#rowby-vertical-menu').fadeIn(1000);
		$('.textImg').css('left', ($(window).width() - 750) + 'px').animate({
			left: '0'
		}, 2500);
	});

Open in new window


Rowby
Tom BeckCommented:
Just comment out or remove this line. Should work.
$('nav.stuckMenu ul#rowby-vertical-menu').css('display', 'none');

Open in new window

Rowby GorenAuthor Commented:
Hi

I think that is all I need for this question and I am ready to close it and award you the points.

However, is this within or not with the range of this question.  When this same page is viewed in Internet Explorer the circle animation does not work the same way.  It starts small.

Is there a fix to the animation code for IE?   (As I write this I think this should be a separate EE question.)

Thanks!

Rowby
Tom BeckCommented:
Yes, it should be a new EE question. Technically, the fade in of the vertical menu should have been a separate question. This original question had to do with getting the vertical menu working again. The reason EE wants it this way is for the knowledge base. If someone looks at this question in the future after a search, EE would like to return a self contained unit, question --> answer, as opposed to question --> answer --> question --> answer. Your second question never gets indexed.
Rowby GorenAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 167 points for Tom Beck's comment #a40929906
Assisted answer: 166 points for Tom Beck's comment #a40930140
Assisted answer: 0 points for Rowby Goren's comment #a40930157
Assisted answer: 167 points for Tom Beck's comment #a40930176

for the following reason:

Thanks Tom

I appreciate your excellent help.

And when I put up the new question I'll post the link here.   Hopefully you or Marco can help me with the IE  headache.
Rowby GorenAuthor Commented:
Hi

Not sure why this question is in a "Close request Pending".

But I'm sure EE will do the right thing and give you all the points for the 3 solutions that worked in this question.

Here's my new question -- if you or Marco have time:  http://www.experts-exchange.com/questions/28705694/Please-help-me-figure-out-why-some-HTML5-animation-is-not-working-in-IE.html

Rowby
Rowby GorenAuthor Commented:
I am cancelling the request to close.  I need to properly award all points to Tom. Looks like I accidentally gave myself some points????
Rowby GorenAuthor Commented:
Thanks Tom!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.