Membuat Menu Horizontal di WordPress | KafeinKode

Kursus bahasa arab berkualitas

Membuat Menu Horizontal di WordPress

Anonim Thu, June 11, 2015 1 comment 1,667 views



Tutorial cara Menambahkan atau membuat menu horizontal di WordPress ibarat menambahkan gula ke dalam teh atau kopi, terkadang sebagian orang memaksa ingin membuat menu horizontal khususnya di WordPress, walau hanya untuk sekedar hiasan semata, hal itu karena manisnya menu horizontal telah menjadi bagian dari keindahan website.

Menu horizontal disebut juga sebagai menu navigasi, yaitu menu yang terletak pada bidang datar, memanjang atau bergerak dari sisi kanan ke kiri, membuat menu horizontal di WordPress sebenarnya cukup rumit, lebih rumit daripada membuat menu horizontal biasa.

Membuat-Menu-Horizontal-di-WordPress

Tak usah panjang lebar berbicara tentang tutorial cara membuat menu horizontal di WordPress, karena saya sudah kehabisan kata-kata. langsung saja kita bahas cara membuat menu horizontal di WordPress step by step. Sebelum Anda mempraktekkan cara ini, pastikan Anda sudah terlebih dahulu membaca artikel saya yang sebelumnya tentang cara membuat menu horizontal di WordPress.

Step 1: Buka file functions.php dan letakkan kode berikut ini:

class CSS_Menu_Maker_Walker extends Walker {

var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent


<ul>\n";
}

function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>



\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;

/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}

/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

$output .= $indent . '<li' . $id . $value . $class_names .'>';

$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>



\n";
}
}


Step 2:
Letakkan kode di bawah ini pada file header.php. Jika Anda mengikuti tutorial pembuatan template WordPress yang dibahas pada blog ini dari awal, letakkan kode dibawah ini tepat di bawah kode </header>.

<?php wp_nav_menu(array( 'menu' => 'Main Navigation',
'container_id' => 'cssmenu',
'sort_column' => 'menu_order',
'container_class' => 'menu-header',
'walker' => new CSS_Menu_Maker_Walker()
));  ?>


Step 3:
Lupa belum di styling, hehehee… styling dulu gan! letakkan kode CSS dibawah ini di file style.css kemudian simpan.

/* Menu Dropdown
*****************/
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a{border:none;margin:0;padding:0;line-height:1;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
/* navbar */
#cssmenu{height:40px;width:1070px;display:block;padding:0;margin:0 auto;margin-top:5;border:1px solid;border-color:#080808;padding-bottom:0.1px;margin-bottom:0}

.return{position: relative; height:40px;width:1070px;display:block;padding:0;margin:0 auto;margin-top:5;border:1px solid;border-color:#080808;padding-bottom:0.1px;margin-bottom:0}
.change{width: 1200px; position: fixed; top: 0; left: 0; right: 0; z-index :9999;}

#cssmenu li{
display:inline;
}
#cssmenu a{
display:inline-block;
padding:10px;
}

#cssmenu,#cssmenu > ul > li > ul > li a:hover{background:#3c3c3c;background:-moz-linear-gradient(top,#3c3c3c 0%,#222222 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c3c3c),color-stop(100%,#222222));background:-webkit-linear-gradient(top,#3c3c3c 0%,#222222 100%);background:-o-linear-gradient(top,#3c3c3c 0%,#222222 100%);background:-ms-linear-gradient(top,#3c3c3c 0%,#222222 100%);background:linear-gradient(top,#3c3c3c 0%,#222222 100%)}
#cssmenu > ul{list-style:inside none;padding:0;margin:0}
#cssmenu > ul > li{list-style:inside none;padding:0;margin:0;float:left;display:block;position:relative}
#cssmenu > ul > li > a{outline:none;display:block;position:relative;padding:13px 20px;text-align:center;text-decoration:none;text-shadow:1px 1px 0 rgba(0,0,0,0.4);font-weight:bold;font-size:13px;font-family:Arial,Helvetica,sans-serif;border-right:1px solid #080808;color:#ffffff;height:14px}
#cssmenu > ul > li > a:hover{background:#0074a2;color:#ffffff}
#cssmenu > ul > li:first-child > a{}
#cssmenu > ul > li > a:after{content:'';position:absolute;border-right:1px solid;top:-1px;bottom:-1px;right:-2px;z-index:99;border-color:#3c3c3c}
#cssmenu ul li.has-sub:hover > a:after{top:0;bottom:0}
/* tanda panah */
#cssmenu > ul > li.has-sub > a:before{content:'';position:absolute;top:18px;right:6px;border:5px solid transparent;border-top:5px solid #ffffff}
/* tanda panah ketika dihover */
#cssmenu > ul > li.has-sub:hover > a:before{top:19px}
/* sub-list view when link on the top is hovered */
#cssmenu ul li.has-sub:hover > a{background:#0074a2;border-color:#3f3f3f;padding-top:14px;z-index:999}
#cssmenu ul li.has-sub:hover > ul,#cssmenu ul li.has-sub:hover > div{display:block}
#cssmenu ul li.has-sub > a:hover{background:#0074a2;border-color:#3f3f3f}
#cssmenu ul li > ul,#cssmenu ul li > div{display:none;width:auto;position:absolute;top:41px;padding:10px 0;background:#0074a2;border-radius:0 0 5px 5px;z-index:999}
#cssmenu ul li > ul{width:200px}
#cssmenu ul li > ul li{display:block;list-style:inside none;padding:0;margin:0;position:relative}
#cssmenu ul li > ul li a{outline:none;display:block;position:relative;margin:0;padding:8px 20px;font:10pt Arial,Helvetica,sans-serif;color:#ffffff;text-decoration:none;text-shadow:1px 1px 0 rgba(0,0,0,0.5)}
#cssmenu ul ul a:hover{color:#ffffff}
#cssmenu > ul > li.has-sub > a:hover:before{border-top:5px solid #ffffff}


Step 4: 
Masuk ke Appearance > Menus. Anda bisa mengatur sesuka Anda menu apa yang ingin Anda tampilkan.
menus

Step 5: Jika Anda tidak menemukan adanya “Menus”, Anda bisa menambahkan kode di bawah ini di file functions.php.

function sead_widgets_init() {
// Sidebar widget area, located in the sidebar. Empty by default.
register_sidebar( array(
'name' => __( 'Sidebar Widget Area', 'sead' ),
'id' => 'sidebar-widget-area',
'description' => __( 'The sidebar widget area', 'sead' ),
'before_widget' => '
<div class="widget-container %2$s" id="%1$s">',
'after_widget' => '</div>

',
'before_title' => '
<h3 class="widget-title">',
'after_title' => '</h3>

',
'image_scan' => true,
'width' => '100', 'height' => '100', 'image_class' => 'alignleft'
) );
}
add_action( 'widgets_init', 'sead_widgets_init' );

 

Tahapan lengkap cara membuat template WordPress bisa Anda lihat di http://www.kafeinkode.com/membuat-template-wordpress/

Kursus bahasa arab berkualitas

[shareaholic app="recommendations" id="20730868]

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pingback: Membuat Header Blog | KafeinKode