Responsive Menu Help

The responsive framework I'm using has a two menus:
A top horizontal that folds all items up and shows menu text with the burger icon
An aside menu that shows all the items in responsive

Here is the framework stripped down to show the 2 menus: http://dwwebdesigns.com/custom/menu1.html

What I'd like is to have the aside nav be the only navigation, but to fold up and show the burger icon when resized. Getting the top nav to display vertically and have the ability to be styled just like the aside-nav would also work (and is what I first tried).

This requires editing 3 files, the html, CSS and Javascript. I've been working on this on and off using trial and error with this framework CSS being new to me and my limited knowledge of javascript and have not had much success.

Here is a template of the page I'm hoping to use this on: http://www.dwwebdesigns.com/custom/atc.html. I've added screenshots to show how the current menu resizes and what my end goal is.

Attachment 6130Attachment 6131
Thanks in advance,
Deborah

I've used this and love how the menu doesn't take away from the main part of a page.
https://github.com/mango/slideout

here's another option http://git.blivesta.com/drawer/

Thanks, but I'd like to try to use the menus that come with this responsive framework first, before scrapping them and going in a new direction. They would allow me to closely match the look of the current live site: http://www.dwwebdesigns.com/custom/atc.html and http://www.altogetherchristmas.com/
Deborah