Repeat the navigation function in the footer.

[jelly46]

I have managed to put together a responsive menu with the help from the internet.

I've need it to sit in the footer as well, but to be controlled sepratley, I have copied it and placed it in the footer but I can't seem to get it right.

Can you assist?

Thanks

[Taywin]

Depends on how you control the responsive menu with. If you treat it as a unique object (with id value), then duplicating it would not work because an id means only one can be present at a time. I can't open your jsfiddle for some reason so I can't take a look at how you do it.

[jelly46]

Hi Taywin

Yeah that is the problem I have so i put the original up try this url
http://jsfiddle.net/c2webdev/Pb8Ts/1/

[Taywin]

OK, the tag name is customized and the style is set to what it is supposed to be for the nav tag. How about come up with another tag name like navb? And assign all styles to navb as well. However, you need to remember that the open up menu is now going in reverse (instead of drop down, it should go up). So some values will need to be changed.

[jelly46]

Thanks
I did the first part of the that and it didn't work, I changed the ID and the css and the ID in the JS and nothing.

I don't know how to make it open up.

Thanks though

[iamthwee]

Daft question but why would you want to repeat the top level navigation in the footer? Isn't that what the top level menu does? It's responsive as well so it shouldn't be an issue.

[AleMonteiro]

Jelly46, is something like this http://jsfiddle.net/7SwhL/ ?

[jelly46]

@iamthwee i agree but it has to be there, re the brief.
@AleMonteiro YES! thank you man, you cloned it, I didn't know that was possible. How did you make it open up? Thank you.

[AleMonteiro]

jelly46, if you are using jQuery, keep an open tab with the API, it's has a lot of methods that really make our lifes easier.

Here's the code with some explanations:

$("nav") // Select the menu
    .clone() // Clone it
        .appendTo("#footer"); // Append the cloned menu to the footer element

$(".pull") // Select all elements with 'pull' class
    .on('click', function(e) { 
        e.preventDefault();
        $(this) // this is the button being clicked
            .next('ul') // next('ul') will get the next element that is an ul in front of the clicked button
                .slideToggle(); // same as it was
    });

$(window).resize(function(){
    var w = $(window).width();
    if(w > 320) {
        $("nav ul:hidden") // This will get all menus that are hidden
            .removeAttr('style'); // This will happen to any and all elements returned by the above line (if none element is hidden, nothing will happen, no need to use an if before)
    }
});

[jelly46]

Thanks

[AleMonteiro]

You're welcome.
Just mark as solved please.

[jelly46]

Done!
I donated $2.00 to DW, thanks dude.