# Ace Responsive Menu



## Brian07002 (Sep 15, 2011)

Hey Guys,

I have downloaded this responsive menu for my website, ( link: https://webthemez.com/demo/ace-responsive-menu/index.html ) I have added it to my web page and it *almost works*...Here's what I mean, the menu does display, but the links on my menu that have sub-menus that don't work properly, Example: when I hover over the link, the sub-menus display, but then quickly disappear. I believe this is due to incompatible version of jquery, can someone confirm if this is the problem?

I am testing on a localhost server, so I can only give a screen shot and a screen cast of the issue, and also I am using a cms (not wordpress) and it has it's own version of jquery installed, (jquery 1.11.1), so that may just be the problem, can someone make the ace responsive menu work with my version of jquery if that is the problem?

Thank you
Brian


----------



## Brian07002 (Sep 15, 2011)

Screen cast and Screen Shot:

https://nofile.io/f/F51O9oCG6AJ/Screencast+2018-04-04+09:22:45.mp4

Note: The problem is on Item 2 on the menu...


----------



## wmorri (May 29, 2008)

Do you know what version of jquery they would like you to use? I would start with that. Then we might be able to help you more. Also what CMS are you using?


----------



## Brian07002 (Sep 15, 2011)

wmorri said:


> Do you know what version of jquery they would like you to use? I would start with that. Then we might be able to help you more. Also what CMS are you using?


Hello,

The version of jquery that my cms is using is 1.11.1 and it's flynax classified cms

The menu is using jquery-1.10.1.min.js


----------



## wmorri (May 29, 2008)

Can you post your code for the menu. I know it will be a little messy as your using a cms. I just want to make sure a few things match up. 

Thanks


----------



## Brian07002 (Sep 15, 2011)

wmorri said:


> Can you post your code for the menu. I know it will be a little messy as your using a cms. I just want to make sure a few things match up.
> 
> Thanks


Do you mean my entire page, or just the menu code itself?


----------



## wmorri (May 29, 2008)

Primarilly just the code that is coming up with you pull up that page. But if it's easier to give me that whole page I can find what I need from it.


----------



## Brian07002 (Sep 15, 2011)

wmorri said:


> Primarilly just the code that is coming up with you pull up that page. But if it's easier to give me that whole page I can find what I need from it.


Ok Here is the whole index template:

View attachment index.tpl.zip


----------



## wmorri (May 29, 2008)

Can you just post the code in the forum. I got a .tpl file and I can't open that I don't think.


----------



## Brian07002 (Sep 15, 2011)

wmorri said:


> Can you just post the code in the forum. I got a .tpl file and I can't open that I don't think.


It's a regular text file

right click open with: notepad or wordpad

I will post the contents of the file in here too


```
{include file='head.tpl'}

<!-- Ace Menu CSS  -->

<link href="{$rlTplBase}ace-menu/css/ace-responsive-menu.css" rel="stylesheet" type="text/css" />
<link href="{$rlTplBase}ace-menu/css/demo.css" rel="stylesheet" type="text/css" />

<!-- Start Logo Section -->

{literal}
<style> [USER=904363]@Media[/USER] screen and (max-width: 420px) and (min-width: 300px) {
img {margin-left: 5px; width: 275px}
}
</style>
{/literal}

<div style="background-color: #666; border: 1px solid #000"><a href="http://localhost/flynax"><img
style="padding: 10px" src="{$rlTplBase}img/logo.png" alt="{$config.site_name}" title="{$config.site_name}"></a>



<!-- home page content tpl -->

<section class="horizontal-search{if $aHooks.search_by_distance} sbd-exists{/if}">
    
        {if $config.home_page_h1}
            <h1>{if $pageInfo.h1}{$pageInfo.h1}{else}{$pageInfo.name}{/if}</h1>
        {/if}

        {assign var='cdt_count' value=$category_dropdown_types|@count}

        {if $cdt_count == 1}
            {assign var='spage_key' value=$listing_types[$category_dropdown_types.0].Page_key}
            {assign var='spage_path' value=$pages[$spage_key]}
        {elseif $cdt_count > 1}
            {assign var='spage_path' value=`$smarty.ldelim`type`$smarty.rdelim`}
        {/if}

        <form accesskey="{pageUrl key='search'}#keyword_tab" method="post" action="{if $cdt_count == 0}{pageUrl key='search'}{else}{$rlBase}{if $config.mod_rewrite}{$spage_path}/{$search_results_url}.html{else}?page={$spage_path}&{$search_results_url}{/if}{/if}">
            <input type="hidden" name="action" value="search" />
            <input type="hidden" name="form" value="keyword_search" />
            <input type="hidden" name="post_form_key" value="{if $cdt_count == 1}{$category_dropdown_types.0}_{if $listing_types[$category_dropdown_types.0].Advanced_search}advanced{else}quick{/if}{/if}" />

            <div id="search_area">{strip}
                <div class="search-group">
                    {assign var='any_replace' value=`$smarty.ldelim`field`$smarty.rdelim`}

                    <input class="tags-autocomplete" type="text" placeholder="{$lang.keyword_search_hint}" name="f[keyword_search]" />

                    {if $cdt_count > 0}
                        <select name="f[Category_ID]">
                            <option value=""></option>
                        </select>

                        <script class="fl-js-dynamic">
                        var categoryDropdownTypes = {if $cdt_count == 1}'{$category_dropdown_types.0}'{else}Array('{$category_dropdown_types|@implode:"', '"}'){/if};
                        var categoryDropdownData = null;

                        {if $cdt_count > 1}
                            categoryDropdownData = new Array();
                            {foreach from=$category_dropdown_types item='dropdown_type' name='fSearchForms'}
                                {assign var='type_page_key' value=$listing_types[$dropdown_type].Page_key}

                                categoryDropdownData.push({literal} { {/literal}
                                    ID: '{$dropdown_type}',
                                    Key: '{$dropdown_type}',
                                    Link_type: '{$listing_types[$dropdown_type].Links_type}',
                                    Path: '{$pages.$type_page_key}',
                                    name: '{phrase key='pages+name+lt_'|cat:$dropdown_type}',
                                    Sub_cat: {$smarty.foreach.fSearchForms.iteration},
                                    Advanced_search: {$listing_types[$dropdown_type].Advanced_search}
                                {literal} } {/literal});
                            {/foreach}
                        {/if}

                        {literal}

                        $('section.horizontal-search select[name="f[Category_ID]"]').categoryDropdown({
                            listingTypeKey: categoryDropdownTypes,
                            typesData: categoryDropdownData,
                            phrases: { {/literal}
                                no_categories_available: "{$lang.no_categories_available}",
                                select: "{$lang.any_field_value|replace:$any_replace:$lang.category}",
                                select_category: "{$lang.any_field_value|replace:$any_replace:$lang.category}"
                            {literal} }
                        });

                        {/literal}
                        </script>
                    {/if}
                </div>

                {if $aHooks.search_by_distance}
                    {addJS file='//maps.googleapis.com/maps/api/js?libraries=places&language='|cat:$smarty.const.RL_LANG_CODE|cat:'&key='|cat:$config.google_map_key}
                    {addJS file=$smarty.const.RL_PLUGINS_URL|cat:'search_by_distance/static/lib.js'}

                    <script class="fl-js-dynamic">
                    var sbd_zip_field = '{$config.sbd_zip_field}';
                    {literal}
                    if (typeof(sbdLocationAutocomplete) != 'undefined') {
                        sbdLocationAutocomplete('.horizontal-search.sbd-exists input#location_search', sbd_zip_field);
                    }{/literal}</script>

                    <div class="location-group">
                        <input type="text" placeholder="{if $config.sbd_search_mode == 'mixed'}{$lang.sbd_location_search_hint}{else}{$lang.sbd_zipcode}{/if}" name="f[{$config.sbd_zip_field}][zip]" id="location_search" />
                        <select name="f[{$config.sbd_zip_field}][distance]">
                            {foreach from=','|explode:$config.sbd_distance_items item='distance'}
                                <option {if $smarty.post.block_distance == $distance}selected="selected"{elseif $distance == $config.sbd_default_distance}selected="selected"{/if} value="{$distance}">{$distance} {if $config.sbd_units == 'miles'}{$lang.sbd_mi}{else}{$lang.sbd_km}{/if}</option>
                            {/foreach}
                        </select>

                        <input type="hidden" name="f[{$config.sbd_zip_field}][lat]" />
                        <input type="hidden" name="f[{$config.sbd_zip_field}][lng]" />
                    </div>
                {/if}

                <div class="submit-group">
                    <input type="submit" value="{$lang.search}" />
                </div>
            {/strip} <!-- <span style="color: #fff; float: right; position: relative; right: 10px">Blah</span>--> </div>
        </form>
    </div>
</section>

{if $tpl_settings.home_page_gallery}
    <section class="features-gallery">
        <div class="point1">
            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <div class="featured_gallery{if $demo_gallery} demo{/if}">
                        {insert name='eval' content=$gallary_content}
                        <div class="preview">
                            <a {if $config.featured_new_window}target="_blank"{/if} title="{$lang.view_details}" href="#"><div></div></a>
                            <div class="fg-title hide"></div>
                            <div class="fg-price hide"></div>
                        </div>
                        {if $demo_gallery}{assign var='demo_gallery' value=false}{/if}
                    </div>
                </div>

        <!-- body style box -->
                <div class="col-md-4 col-sm-12 special-block">
                    {if $home_page_special_block}
                        {include file='blocks'|cat:$smarty.const.RL_DS|cat:'blocks_manager.tpl' block=$home_page_special_block side='sidebar'}
                    {/if}
                </div>
                <!-- body style box end -->
            </div>
        </div>
    </section>
{/if}

<!-- home page content tpl end -->






<!-- Ace Menu jQuery  -->

<script src="{$rlTplBase}ace-menu/js/ace-responsive-menu.js" type="text/javascript"></script>

<nav>
    <div class="menu-toggle">
        <h3>Menu</h3>
        <button type="button" id="menu-btn">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <ul id="respMenu" class="ace-responsive-menu" data-menu-style="horizontal">
        <li><a href="">Item one  </a></li>
        <li><a href="">Item two </a>
            <ul>
                <li><a href="">sub Item one </a></li>
                <li><a href="">sub Item two </a></li>
                <li><a href="">sub Item Three </a></li>
            </ul>
        </li>
        <li><a href="">Item three </a></li>
        <li><a href="">Item four </a></li>
    </ul>
</nav>

{literal}<script type="text/javascript"> $("#respMenu").aceResponsiveMenu(); </script> {/literal}

</div> <!-- Logo Section Closing Div -->

<div class="main-wrapper">
```


----------



## Brian07002 (Sep 15, 2011)

Also, I forgot to mention, that in the ace-menu/js folder, I have the two copies of jquery, one is jquery.js, and the other is jquery-1.10.1.js

jquery.js = 1.11.1 (also is in the flynax js folder)
jquery-1.10.1.js = (the one that the ace-menu github page say to use, not sure if this version is required, because when I checked the demo file, they are using this in their demo page: https://code.jquery.com/jquery-1.12.4.min.js for their jquery. )


----------



## Brian07002 (Sep 15, 2011)

Did you find the problem?

Note: After researching on line I have tried changing the speed of the menu to slow then medium as it was originally fast, that did not help. 

I also tried removing the original jquery file from the flynax javascript library and replacing with different jquery versions with no luck, they still gave the same result. Do you think it could be a CSS problem?


----------



## Brian07002 (Sep 15, 2011)

Hello wmorri,

You still there?

I have figured out that the menu is using the font-awesome icon set, which when I updated mine to: 


```
https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
```
The arrow on the main menu works, but the sub-menu still disappears. Could you figure that out? I think it's in the css of the menu. Ace Responsive Menu ( I didn't change anything in it) so you can download it from: 

https://github.com/samsono/Ace-Responsive-Menu


----------



## Brian07002 (Sep 15, 2011)

I guess there is no success on your level? 

Anyone else care to take this challenge?


----------



## Brian07002 (Sep 15, 2011)

Hey,

On this same topic, but different menu, can you help me out with logic on this other menu? It's the stellarNav menu.

I have it working, although I would personally rather have ace responsive menu, but assuming you can't figure out the ace responsive menu issue, can you tell me how the logic is supposed to be when it comes to the <ul> and <li> tags for creating the levels on the StellarNav menu?

Here's what I am trying to get and what I already have: 

I am trying to get this logic:

Category -> Subcategory -> Subcategory -> Item

I currently have all those levels, so what's the issue? Well, I did that for one category, but now I have to duplicate that but it doesn't seem to work...Let me show you the link and you let me know if you can get it from there before I give you my code that I have done so far...

https://vinnymoreira.com/stellarnav-js-demo/

If you look at the first menu so called "Dropdown" you have How Deep -> Deep -> Even Deeper...I want to add more <ul>'s (flyout menus) on the "Even Deeper" level...Can you manage that? I already have one <ul> (flyout menu) on the "Even Deeper" level, but need another and can't get it for the life of me...:banghead: 

Side note: I wonder if this is just as difficult on the Ace Responsive Menu or easier to accomplish?

Brian


----------



## wmorri (May 29, 2008)

Brian,

Sorry for not getting back to you. Work has gotten rather busy the last few days so I had to put this to the side. I will take a look at this new nav menu this weekend as I have time. I should have something for you by the end of the weekend. 

Just a side note, as I'm sure you know this is a forum run by all volunteers, so please understand if we don't get to your post as fast as some other forums. I love what I do here, but sometimes it takes a little while for me to respond. 

Have a great weekend!


----------



## Brian07002 (Sep 15, 2011)

wmorri said:


> Brian,
> 
> Sorry for not getting back to you. Work has gotten rather busy the last few days so I had to put this to the side. I will take a look at this new nav menu this weekend as I have time. I should have something for you by the end of the weekend.
> 
> ...


Hey that is ok buddy, I have found a work-a-round with StellarNav, which is not to use the multi-level categories for the stellarNav, and leave that for my cms to handle which is actually good enough for my project, however, if you can come up with a solution for the Ace Responsive menu question (sub-menus disappearing) that would be great, but I think it's my cms software... Again... But maybe not, if you can find out the fix. :smile:

By the way, the arrow on the Ace Responsive menu, was it uses font-awesome icons, I fixed that issue, but the sub-menus still disappearing. :nonono:

Thank you again for your reply!
Brian


----------

