Textpattern CMS

#1 2014-08-14 08:16:04

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

merge two menus in site's mobile version

i’m using this plugin for creating off-canvas menus for site’s mobile versions. and it’s working well if only one main menu is in use.

but now i need to add two different menus into one off-canvas menu. plugin author suggested to add this peace of code to my code.

$("#top-menu > ul").appendTo( "#main-menu" );

but i can’t and he is not helpful anymore since it’s more jquery question than plugin’s.

here is our conversation

and here is my current code:

var $menu = $("#main-menu").clone();
$menu.attr( "id", "mobile-menu" );
$menu.mmenu({

slidingSubmenus: true, 
offCanvas: {
position : "right",
}
})

…where i need to add this:

$("#top-menu > ul").appendTo( "#mobile-menu" );

…and do it only then screen size max-width is 800px.

could anyone provide a correct code?

Last edited by Gallex (2014-08-15 10:10:23)

#2 2014-08-14 13:09:26

gaekwad

Server grease monkey

From: People's Republic of Cornwall

Registered: 2005-11-19

Posts: 4,137

GitHub

Re: merge two menus in site's mobile version

I can’t answer your question, but is there anything here you could use?

---

Textpattern CMS demo – tech updates

#3 2014-08-15 10:26:29

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: merge two menus in site's mobile version

‘screen size’ is actually unnessesary, so i deleted that part from previous post.

so, my request is to append this code:

$("#top-menu > ul").appendTo( "#mobile-menu" );

into this somehow:

var $menu = $("#main-menu").clone();
$menu.attr( "id", "mobile-menu" );
$menu.mmenu({

slidingSubmenus: true, 
offCanvas: {
position : "right",
}
})

like this, not working. it doesn’t append #top-menu ul to #mobile-menu

var $menu = $("#main-menu").clone();
$menu.attr( "id", "mobile-menu" );
$("#top-menu > ul").appendTo( "#mobile-menu" );
$menu.mmenu({

slidingSubmenus: true, 
offCanvas: {
position : "right",
}
})

maybe appendTo is not a right command…?

#4 2014-08-20 10:24:15

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: merge two menus in site's mobile version

no suggestions..?

#5 2014-08-20 11:55:20

etc

Developer

Registered: 2010-11-11

Posts: 5,053

Website GitHub

Re: merge two menus in site's mobile version

By any chance, do you see your #mobile-menu clone at all? If not, you should insert it into the document body:

$("#mobile-menu").appendTo("body")

---

bloatware

#6 2014-08-20 13:17:42

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: merge two menus in site's mobile version

i can see it in chrome’s developer tool window, but not in page source. is that a case?
take a look

in css i also use:

@media (min-width: 761px)
#mobile-menu {
display: none !important;
}
}

if i remove that line, it also doesn’t show it in page source

#7 2014-08-20 13:23:48

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,304

Re: merge two menus in site's mobile version

I can’t find #top-menu in your source.

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#8 2014-08-20 13:29:39

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: merge two menus in site's mobile version

sorry, correct code is:

var $menu = $("#main-menu").clone();
$menu.attr( "id", "mobile-menu" );
$("#languages > ul").appendTo( "#mobile-menu" );
$menu.mmenu({  
    slidingSubmenus: true, 
            offCanvas: {
               position  : "right",
           }
    })

#9 2014-08-20 14:42:59

etc

Developer

Registered: 2010-11-11

Posts: 5,053

Website GitHub

Re: merge two menus in site's mobile version

Gallex wrote #283091:

i can see it in chrome’s developer tool window, but not in page source. is that a case?

No, that’s ok. Try another way, who knows:

var $menu = $("#main-menu").clone();
$menu.append($("#languages > ul"));
$menu.attr( "id", "mobile-menu" );
...

---

bloatware

#10 2014-08-21 06:59:23

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: merge two menus in site's mobile version

now it appends #languages ul menu below the #mobile-menu, but in both versions – desktop and mobile. i need it only in mobile version.

and secondly, the plugin adds a class mm-hidden to it, so it’s there, but i can’t see it.

and finally, it broke mobile menu styling.

maybe at first i need to clone the languages ul also and then append it?

Last edited by Gallex (2014-08-21 07:00:40)