Aside Menu Problem Windows 8.1 Internet Explorer

Hi there,

I'm having a problem with the "Aside" menu option in Windows 8.1 with both the touch version of Internet Explorer and the desktop version (v.11). It will only expand and stay expanded when I hover a mouse over it. But when I use my finger it expands and then immediately closes back up. When I try it on a mobile device such as a tablet or smartphone, when I touch the menu it expands and stays that way. It also works with touch in the desktop version of Chrome and Firefox. Which is great! I just need it to also work with Internet Explorer. Thanks for your help.

I have reported that problem to our devteam.
I'll write back as soon as I get answer from them.

Awesome. Thanks so much for your reply.

Could you please confirm, that same problem happens on our demo server?

Good point. That's usually the first thing I do when I'm having a problem with the templates. I didn't think to do that this time.

Okay, so here's what happens. On the demo site the menu opens with everything already expanded and it stays that way. Which would be fine. So I checked it on Chrome and on Firefox with the demo site and the same thing happens. It opens fully expanded. I wouldn't mind this functionality at all. Is it a setting that I can adjust? I haven't messed with any of the menu settings with the exception of turning Aside on. Let me know what I can do. Would I just disable the menu height animation?

That did the trick. I just disabled the menu animation. That will work.

I did notice though on your demo site when I open it in the Windows 8 Internet Explorer touch browser, the site defaults to the Aside menu. When I load your demo site in IE 11 or Chrome or Firefox I have to select Aside from the options icon on the left. How can I make it so that the template will do that for myself. That's a much more fluid visitor experience and if you guys can do it I the demo site I would imagine it's possible on the template I bought from you. Let me know if can. Thanks for all your help.

First of all, make sure you have latest available template version. After that please confirm the problem remains.

I have the version from last Wednesday. Has there been a new release since then? How can I tell which version I have and what the latest version is on the site? Thanks for your help.

Could You please post an url to your site?

I'm sorry, I'm not able to do that. It's currently unpublished and we can't allow it to be accessed yet. I'm really sorry as I know that makes it harder for you to help me. But if you could just tell me how to check what the latest version is I'd be grateful. I've gone to the download page and it doesn't indicate when it was last updated. I've also gone into the template and clicked on the Updates tab, but it just sits there saying it's searching for updates but never returns a result.

Also, is there a way to maybe just use the Aside menu for the mobile menu, but have it go back to the classic with a desktop browser? Would that be possible? Could solve the problem.
Thanks for your help.

Current version of themplate is 3.10.1. You can check your version simply by accessing site with ftp client and checking file templateDetails.xml inside template folder to check the version.

You can also check template version by going to extension manager, clicking manage and finding template among all elements.

Yeah, I've got 3.9.3. Do you have an easy way for me to update the template without having to start completely over? I've got a lot of work into it already. Thanks for all your help.

Have you modified any core template files (beside override.css)?

Yes. I had to modify a couple things. I modified the Style 2 style sheet and the Image show GK4 mod style sheet. But I think that was all. But I have copies of those since I worked with them in dreamweaver. Oh, I've also modified all photos, logos, and adjusted many of the template settings.

Then without access to online site I cant help much further. Only this way I can check what might cause difference between our site behavior and your's one.

I understand. But now all I'm looking for is how to update the template? Do you have instructions on how to do that? I understood that making changes like that could create trouble for me if I ever needed to update, but need to so I was willing to take the risk. But I just need to know if you have any documentation on the best method for updating or can you tell me here? Thanks for all your help.

1. Login via ftp and backup your current template (just in case)
2. Download latest template from our site and install it via extension manager
3. If you have made any changes - download new template to your local machine, merge the changes from old template, then reupload files back. If the only change is in override.css - just upload it back from old template backup.

Awesome. Thanks so much for your help.

Also - if you do any modifications in css - there is no need to modify core files - you can use override.css (enable it in template settings - advanced section) - it is loaded as the last css file, so it has priority over all the other css'es. And by keeping all changes to css in 1 file - with the update it's going to be much less work to do.

I appreciate that tip. I definitely made quite a few changes in other CSS files. So your advice will definitely come in handy as I will change the way I do it. Thanks again for all your help.

No problem .
If You will have any other questions, feel free to post new forum threads.

The solution for the problem with menu on windows 8 touchscreen and ie is to edit:
/js/gk.menu.js
and replace:

Code: Select all

if(jQuery('#gkExtraMenu')) {


with:

Code: Select all

if(jQuery('#gkMainMenu').length > 0) {


That worked great. Thank you!

I was wondering is it possible to use the Classic menu for the larger screen resolutions, but then have it load the Aside Menu whenever a tablet or Phone resolution is detected? The problem with using Aside all the time is it can be hard for desktop users to find the menu up in the top right had corner. And the mobile menu that appears on mobile devices when in Classic Menu mode, is no where near as sweat as the Aside Menu.

One other question I have, if you don't mind me combining two questions into one post, is it possible to have the Classic menu open and pause with the touchscreen interface? Touch screen window devices are becoming more common, and right now on my Surface Pro 2 for example, in Internet explorer when I tap the top menu (even with a null link #) at the top level, the menu will not open. It would be really great if it could open. I see a lot of sites are starting to work that functionality in.

As usual, thanks for all your help!

That can be done. The only thing you need is to have both menus in your html.
Now you can use override.css and technique called media-query.
For instruction purpose lets pretend your "desktop" menu has ID: 'gkMainMenu', and mobile version has ID: 'gkMobileMenu'.
Now in css you add:

Code: Select all


#gkMainMenu{display:block;}
#gkMobileMenu{display:none;}
@media (max-width: 800px) {
 #gkMainMenu{display:none;}
 #gkMobileMenu{display:block;}
}


What it does - by default it displays main menu and hides mobile menu, but when browser width is less than 800px then main menu is hidden and mobile menu is shown.

Fantastic. Thank you.

I see that the code for each is removed when the other is chosen in the styles. What code do I need to have loading for the aside mane and how do I get that to load simultaneously with the Classic Menu code so that when it is triggered it will load?

Thanks for your help.

Could You please post an url to your site?

I don't have the site live yet. It's simply the Musicstate template though. Are you familiar with that one? It's got a toggle in the template menu for Menu's that lets you choose between Classic Menu and Aside Menu. The demo site allows you to do the same thing. You can toggle between the two menus http://demo.gavick.com/joomla25/musicstate/. The problem is when one menu is selected, it removes the code for the other. The challenge is what HTML code is necessary for the Aside menu so that I can take that and incorporate it into the template when in Classic menu mode so that when I implement the css override you suggested the Aside menu will function properly. I know how to do it, I just need to know which code from the Aside menu needs to be included. It would have been awesome if the programmers had developed it to funtion that way by default. Again, the Aside menu is so much better for a mobile meny than just the little drop down menu. Thanks for all your help

Now I get it .
Ok, the problem lies in not how to do it, but in logic of how it should work.
Just to be 100% sure.
You would like on big screens to show only Classic menu (standard horizontal menu in header), then if the screen size goes lower, the horizontal menu should disapear, the mobile menu icon should appear, but instead of showing dropwown/select, it should behave like Aside menu - sliding from the right?

If that's the case - there is a lot to do:
templates/gk_musicstate/layouts/default.php
find this block of code:

Code: Select all

<div id="gkHeaderNav">                       
                <?php $this->layout->loadBlock('logo'); ?>
               
                <?php if($this->API->get('menu_type', 'aside') == 'classic') : ?>
                       <?php if($this->API->get('show_menu', 1)) : ?>
                        <div id="gkMobileMenu"> <i id="mobile-menu-toggler" class="fa fa-reorder"></i>
                            <select onChange="window.location.href=this.value;">
                                <?php
                                 $this->mobilemenu->loadMenu($this->API->get('menu_name','mainmenu'));
                                 $this->mobilemenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                             ?>
                            </select>
                        </div>
                        <?php endif; ?>
                        
                        <?php if($this->API->get('show_menu', 1)) : ?>
                        <div id="gkMainMenu">
                                <?php
                              $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
                               $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                           ?>
                        </div>
                        <?php endif; ?>
                    <?php else : ?>
                    <i id="aside-menu-toggler" class="fa fa-reorder"></i>
                    <?php endif; ?>
                    
                    <?php if($this->API->modules('login')) : ?>
                    <a href="<?php echo $this->API->get('login_url', 'index.php?option=com_users&view=login'); ?>" id="gkLogin"><?php echo ($userID == 0) ? JText::_('TPL_GK_LANG_LOGIN') : JText::_('TPL_GK_LANG_LOGOUT'); ?></a>
                    <?php endif; ?>
             </div>


and change it to:

Code: Select all

<div id="gkHeaderNav">                       
                <?php $this->layout->loadBlock('logo'); ?>

                     <div id="gkMainMenu">
                  <?php
                     $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
                     $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                   ?>
                     </div>
                    <i id="aside-menu-toggler" class="fa fa-reorder"></i>

                    <?php if($this->API->modules('login')) : ?>
                    <a href="<?php echo $this->API->get('login_url', 'index.php?option=com_users&view=login'); ?>" id="gkLogin"><?php echo ($userID == 0) ? JText::_('TPL_GK_LANG_LOGIN') : JText::_('TPL_GK_LANG_LOGOUT'); ?></a>
                    <?php endif; ?>
             </div>


Now find block:

Code: Select all

      <?php if($this->API->get('menu_type', 'aside') == 'aside') : ?>
   <i id="static-aside-menu-toggler" class="fa fa-reorder"></i>
   <i id="close-menu" class="fa fa-times"></i>
   <nav id="aside-menu">
      <div>
         <?php
            $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
             $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
         ?>
      </div>
   </nav>
   <?php endif; ?>


and change it to:

Code: Select all

   <i id="static-aside-menu-toggler" class="fa fa-reorder"></i>
   <i id="close-menu" class="fa fa-times"></i>
   <nav id="aside-menu">
      <div>
         <?php
            $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
             $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
         ?>
      </div>
   </nav>


(in short - remove first and las line).

Now, in file:
templates/gk_musicstate/layouts/blocks/head.php
change:

Code: Select all

if($this->API->get('menu_type', 'aside') == 'aside') {
   $this->API->addCSS($this->API->URLtemplate() . '/css/menu/menu.aside.css');
} else {
   $this->API->addCSS($this->API->URLtemplate() . '/css/menu/menu.css');
}


to:

Code: Select all

$this->API->addCSS($this->API->URLtemplate() . '/css/menu/menu.aside.css');
$this->API->addCSS($this->API->URLtemplate() . '/css/menu/menu.css');


That will make both codes to show, but the problem lies in styling - classic menu styling doesn't work well with aside menu styling - as they both uses common classes, so there should be a lot of changes to do in css'es - sadly this is way beyond our support.

I know the side menu looks nice, but I would stick to classic menu - on mobile it will show nice native select, and thats the way most of the mobile sites works now,

You're the best! Thanks so much.

Thats one of the longest threads I have ever did I'm glad we could finally finish it
If You will have any other questions, feel free to post new forum threads.

Yeah, I'm sorry about that. I really appreciate you sticking with me through it and all the extra effort you put in. It's GREATLY appreciated. Take care