বন্ধুরা আপনারা সবাই হইতো ভালো আছেন। আমার অনেক আনন্দ লাগছে, যে আমি টেকটিউনসে এই প্রথম লিখতে পারছি। প্রায় ১ বছর ধরে শুধু দেখেই যাচ্ছি, কোন টিউন বা টিউমেন্ট করতে পারতাম না বলে অনেক খারাপ লাগতো। এখন থেকে নিয়মিত আপনাদের সুন্দর সুন্দর টিউন উপহার দেওয়ার চেষ্টা করবো।

তো শুরু করছি আজকের টিউন। আপনাদের ওনেকেরি হইতো ওয়াডপ্রেস সাইট আছে। তবে তাদের মেনুগুলো এমন সুন্দর না। তাই আজ নিয় নিন প্রিমিয়াম থিমের মতো একটি মেনু।

Step #1

প্রথমে WordPress Editor থেকে header.php ওপেন করুন এবং আপনার আগের মেনু ডিলেট করে দিন। এর পর এই কডটি পেস্ট করে দিন।

<nav id="cssmenu">
<?php
 wp_nav_menu(array(
 'menu' => 'Main Menu',
 'container_id' => 'cssmenu',
 'walker' => new CSS_Menu_Maker_Walker()
 ));
 ?>

 </nav>

Step #2

এবার আপনার থিমের functions.php ওপেন করে আগের যে মেনু ফাংশন দিওয়া ছিলো তা ডিলেট করে দিন। এবার এই কোডটি পেস্ট করুন।

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 ? 'pln" style="margin: 0px; padding: 0px; font-size: 1em; outline: none; color: rgb(238, 238, 238);"> . 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 #3


এবার CSS যোগ করার পালা। তা style.css edit করে এই নিচের কোডটি ড়েস্ট করে দিন।

/* Starter CSS for Menu */
#cssmenu {
 padding: 0;
 margin: 0;
 border: 0;
 width: auto;
}
#cssmenu ul,
#cssmenu li {
 list-style: none;
 margin: 0;
 padding: 0;
}
#cssmenu ul {
 position: relative;
 z-index: 597;
}
#cssmenu ul li {
 float: left;
 min-height: 1px;
 vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
#cssmenu ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
#cssmenu ul ul li {
 float: none;
}
#cssmenu ul ul ul {
 top: 0;
 left: 190px;
 width: 190px;
}
#cssmenu ul li:hover > ul {
 visibility: visible;
}
#cssmenu ul ul {
 bottom: 0;
 left: 0;
}
#cssmenu ul ul {
 margin-top: 0;
}
#cssmenu ul ul li {
 font-weight: normal;
}
#cssmenu a {
 display: block;
 line-height: 1em;
 text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
 background: #333333;
 border-bottom: 4px solid #1b9bff;
 font-family: 'sans-serif';
 font-size: 12px;
}
#cssmenu > ul {
 *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
 content: '';
 display: block;
 clear: both;
}
#cssmenu ul {
 text-transform: uppercase;
}
#cssmenu ul ul {
 border-top: 4px solid #1b9bff;
 text-transform: none;
 min-width: 190px;
}
#cssmenu ul ul a {
 background: #1b9bff;
 color: #ffffff;
 border: 1px solid #0082e7;
 border-top: 0 none;
 line-height: 150%;
 padding: 16px 20px;
 font-size: 12px;
}
#cssmenu ul ul ul {
 border-top: 0 none;
}
#cssmenu ul ul li {
 position: relative;
}
#cssmenu ul ul li:first-child > a {
 border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
 background: #4eb1ff;
 color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
 -moz-border-radius: 0 0 3px 3px;
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 -moz-box-shadow: 0 1px 0 #1b9bff;
 -webkit-box-shadow: 0 1px 0 #1b9bff;
 box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
 -moz-border-radius: 0 0 0 3px;
 -webkit-border-radius: 0 0 0 3px;
 border-radius: 0 0 0 3px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
 content: '+';
 position: absolute;
 top: 50%;
 right: 15px;
 margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
 background: #1b9bff;
 color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
 content: '+';
 margin-left: 5px;
}
#cssmenu ul li.last ul {
 left: auto;
 right: 0;
}
#cssmenu ul li.last ul ul {
 left: auto;
 right: 99.5%;
}
#cssmenu a {
 background: #333333;
 color: #CBCBCB;
 padding: 0 20px;
}
#cssmenu > ul > li > a {
 line-height: 48px;
 font-size: 12px;
}

HTML source file Download করুন এখান থেকে। DOWNLOAD প্রথম টিউন করছি তাই ভুল হলে ক্ষামা করবেন। আর একটা কথা আমি আমি টিউনের ভিতর ইমেজ এড করতে পারছি না। আমার ওয়েবসাইট WebProjectBD ঘুরে আসেন। আমার ফেসবুক | Dipto Paul