بابهت: [ڤیدیۆ]چۆنیەتى دروستکردنى مێنۆى بزۆک...
بەناوى خوداى گەورە و میهرەبان
لەم بابەتەدا ئەوە دەخەمەڕوو کە چۆن بتوانین مێنۆیەکى بزۆک بۆ وۆردپرێس دروست بکەین , مەبەست لە مێنۆى بزۆک ئەوەیە کە بتوان لە بەڕێوەبەرایەتى دانە بۆ لیستەکە زیادبکەین....
بەشى یەکەم...
بەشى دووەم...
---------------------------------------------------
ئەو کۆدانەى کە لە وانەکە بەکارهاتوون...
١- پەڕگەى functions.php ...
/*
Add choose Navbar in wp-admin.
*/
function Navigation_in_admin() {
register_nav_menu( 'top-menu', __( 'لیستى سەرەوە' ) );
}
add_action( 'after_setup_theme', 'Navigation_in_admin' );
function Navigation_in_admin_args( $args ) {
if ( ! isset( $args['show_home'] ) )
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'Navigation_in_admin_args' );٢- ئەو کۆدانەى کە لە شوێنى مێنۆیە HTML ـەکە دادەنرێت...
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
'container' => 'div',
'container_class' => 'navbar'/* It's Class for the div that the <ul> insde in.*/,
'container_id' => ''/* It's ID for the div that the <ul> insde in.*/,
'menu' => '',
'menu_class' => '',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
) );
?>٣- کۆدە CSS ـەکان...
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
*{
margin: 0;
padding:0;
list-style:none
}
.navbar {
height: 50px;
line-height:50px;
background-color: #333333;
border-bottom:5px solid #A7BC23;
font-family: 'Droid Arabic Naskh', serif;
}
.navbar ul{
}
.navbar ul li{
float:right;
display:inline;
position:relative;
}
.navbar li ul{
background-color: #333;
position:absolute;
visibility: hidden;
opacity: 0;
right:-25px;
top:55px;
transition:all .2s ease;
}
.navbar li:hover > ul {
display: block;
visibility: visible;
opacity: 1;
right: 0;
width:200px;
}
.navbar li li{
float: none;
}
.navbar ul li a{
color:#fff;
text-decoration: none;
padding:0 10px;
transition:all 1s ease;
display:block;
}
.navbar ul li a:hover{
background-color: #A7BC23;
}