How to display WordPress menu in a custom dropdown. http://sridharkatakam.com/display-wordpress-menu-custom-dropdown/

dd-menu-toggle.js

jQuery(function( $ ){

	$( '.dd-button' ).click( function( e ) {
		e.preventDefault();
		
		var list = $('.dd-holder ul.menu');
		
		if( list.hasClass( "opened" ) ) {
			// list.hide();
			list.slideToggle();
			list.toggleClass( "opened" );
		} else {
			// list.show();
			list.slideToggle();
			list.toggleClass( "opened" );
		} 
	} );
	
});

functions.php

<?php
//* Do NOT include the opening php tag

//* Create a shortcode to output WP menu
// Sample usage: [menudropdown menu="Locations Menu"]
function menu_as_dropdown( $atts ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'menu' => 'Select Menu',
		), $atts )
	);

	ob_start();
		wp_nav_menu( array(
			// 'theme_location' => 'mobile',
			'menu' => $menu,
			'depth' => 1
		) );
	return ob_get_clean();
}
add_shortcode( 'menudropdown', 'menu_as_dropdown' );

//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {

	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );

}

//* Enqueue script to slide toggle the custom menu when dropdown button is clicked
add_action( 'wp_enqueue_scripts', 'custom_menu_dropdown' );
function custom_menu_dropdown() {

	wp_enqueue_script( 'dd-menu-toggle', get_stylesheet_directory_uri() .'/js/dd-menu-toggle.js' , array( 'jquery' ), '1.0.0', true );

}

gistfile1.txt

<div class="dd-holder">

	<a class="dd-button" href="">
		Where do you want to go ?
		<span>
			<i class="fa fa-angle-down"></i>
		</span>
	</a>

	[menudropdown menu="Locations Menu"]

</div>

gistfile2.php

add_filter('widget_text', 'do_shortcode');

style.css

/* Custom dropdown from WordPress menu
--------------------------------------------- */

div.dd-holder {
    display: inline-block;
    position: relative;
    z-index: 9999;
    width: 100%;
    /*max-width: 340px;*/
}

a.dd-button {
    background: #ed1c24;
    color: #fff;
    display: block;
    line-height: 1;
    padding: 14px 70px 14px 20px;
    position: relative;
    border-bottom: 1px solid #ddd;
}

a.dd-button:hover {
	color: #fff;
}

a.dd-button span {
	border-left: 1px solid #cc181e;
    height: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px;
}

a.dd-button span i {
	font-size: 24px;
    padding: 10px 0;
}

.dd-holder ul.menu {
	display: none;
    background: #fff;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.23);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.23);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.23);
    /*border: 1px solid #ddd;*/
}

.dd-holder ul.menu li {
	margin-bottom: 0;
	padding-bottom: 0;
}

.dd-holder ul.menu li:last-child {
	border-bottom: none;
}

.dd-holder ul.menu li a {
	width: 100%;
	display: inline-block;
	padding: 8px;
}

.dd-holder ul.menu li a:hover {
	background: #ed1c24;
	color: #fff;
}