Membuat custom menu di Foundation Zurb 6

Membuat custom menu di Foundation Zurb 6 tidaklah sulit, untuk lengkapnya ikuti langkah di bawah ini.  Copy past script di bawah ini ke functions.php

class F6_TOPBAR_MENU_WALKER extends Walker_Nav_Menu
{
/*
* Add vertical menu class and submenu data attribute to sub menus
*/

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"vertical menu\" data-submenu>\n";
}
}

//Optional fallback
function f6_topbar_menu_fallback($args)
{
/*
* Instantiate new Page Walker class instead of applying a filter to the
* "wp_page_menu" function in the event there are multiple active menus in theme.
*/

$walker_page = new Walker_Page();
$fallback = $walker_page->walk(get_pages(), 0);
$fallback = str_replace("<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback);

echo '<ul class="dropdown menu" data-dropdown-menu>'.$fallback.'</ul>';
}
function _register_menu() {
register_nav_menu( 'primary', __( 'Primary Menu','textdomain' ) );
}

//Add Menu to theme setup hook
add_action( 'after_setup_theme', '_theme_setup' );

function _theme_setup()
{
add_action( 'init', '_register_menu' );

//Theme Support
add_theme_support( 'menus' );
}
class F6_DRILL_MENU_WALKER extends Walker_Nav_Menu {
/*
* Add vertical menu class
*/

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"vertical menu\">\n";
}
}

function f6_drill_menu_fallback( $args ) {
/*
* Instantiate new Page Walker class instead of applying a filter to the
* "wp_page_menu" function in the event there are multiple active menus in theme.
*/

$walker_page = new Walker_Page();
$fallback = $walker_page->walk( get_pages(), 0 );
$fallback = str_replace( "children", "children vertical menu", $fallback );
echo '<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 100%;">' . $fallback . '</ul>';
}
/*
* Add 'active' class for the current menu item
*/
function THEME_active_nav_class( $classes, $item ) {
if ( $item->current == 1 || $item->current_item_ancestor == true ) {
$classes[] = 'active';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'THEME_active_nav_class', 10, 2 );


Setelah script di atas ditempatkan di functions.php , sekarang kita akan memanggil script custom menu di header.php. Ganti script menu Foundation zurb kamu dengan script di bawah ini.

<div class="row">
<div class="title-bar" data-responsive-toggle="the-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">MENU</div>
</div>
<div class="top-bar" id="the-menu">
<div class="top-bar-left">
<?php
wp_nav_menu( array(
'container' => false,
'menu' => 'Primary Menu',
'menu_class' => 'vertical medium-horizontal menu',
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="drilldown medium-dropdown" style="width: 100%;">%3$s</ul>',
//Recommend setting this to false, but if you need a fallback...
'fallback_cb' => 'f6_drill_menu_fallback',
'walker' => new F6_DRILL_MENU_WALKER()
) );

?>
</div>
<div class="top-bar-right">
<form method="get" action="<?php echo home_url( '/' ); ?>" id="search">
<input type="text" size="10" name="s" value="Search..." onBlur="if (this.value == '') {this.value = 'Search...';}" onFocus="if (this.value == 'Search...') {this.value = '';}" class="search_input" placeholder="Search..."/>
</form>
</div>
</div>
</div>

Fitur Custom menu ini adalah
1. Menambahkan fitur search di bagian kanan menu
2. Menambahkan background untuk active menu
3. Support mobile menu

Tambahkan css di bawah ini untuk mempercantik tampilan search form kita.


#search input[type="text"] {background: url(images/search-dark.png) no-repeat 10px 6px #444;border: 0 none;font: bold 12px Arial,Helvetica,Sans-serif;color: #777;width: 150px;padding: 6px 15px 6px 35px;text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;-webkit-transition: all 0.7s ease 0s;-moz-transition: all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition: all 0.7s ease 0s;}
#search input[type="text"]:focus {width: 200px;}

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*