Ko WordPress inodaidza sei sekondari / yakawanda-level navigation bar tsika menyu?

zvizhinji网络 营销vanhu vanosarudzaWordPressUyaikuvaka webhusaiti, asi iyo navigation bar yemamwe madingindira haitsigire masecond/multi-level menyu Kana usingagutsikane, unogona kuedza kuwedzera nekugadzirisa mamenu maitiro edingindira.

Iko kugadziridzwa kunotanga kubva kuheader.php.Chinhu chakakosha mune iyi template faira kuratidzwa kwemenu.

Kana iwe ukashandisa iyo kodhi kudaidza chikamu semenu, zvinogoneka, asi hazvisi nyore kuronga zvinhu zvemenu.

Iyo dhairekitori ine subcategories haisi nyore kubata, saka ini ndinodawo kuwedzera tsika menyu basa kune yangu dingindira semamwe madingindira.

Hazvina kuoma kuwedzera menyu kugadzirisa basa kune ichangobva kugadzirwa dingindira, pane zvakanyanya 2 nhanho.

Nhanho yekutanga, WordPress menyu kunyoresa

Kuti ushandise menyu, unofanira kutanga wanyoresa, wovhura faira remabasa pasi pedingindira, uye woisa iyo inotevera kodhi ▼.

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• Kana pasina function.php faira pasi pemusoro, gadzira imwe itsva uye kopi kodhi iri pamusoro kuti uichengetedze.

Log inWordPress backend, uye wozoenda kuChitarisiko→Menu.

Kana iwe uchigona kuona iyo skrini pazasi, zvinoreva kuti wakanyoresa se ▼

Izvo zviri pamusoro zvinonyoresa 2 menyu:

1. A top menu Top Menubar.
2. menyu huru Main menubar.

Nhanho yechipiri, iyo WordPress menyu kufona

Mushure mokunge menyu yakanyoreswa, inogona kudanwa mumusoro we template file.Isa code inotevera mumusoro.php file, uye iwe unogona kuidana kwaunoda kuratidza menyu.

Mumusoro.php faira, dana iyo "yepamusoro menyu"▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

Mumusoro.php faira, dana iyo "main menu"▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi')); ?>

Dana iyo "pasi menyu" mu footer.php faira▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

Nhanho yechitatu, menyu yezvigadziriso

Mushure mekunge menyu yanyoreswa uye nzvimbo yekuratidzira yemenu inotsanangurwa mune theme faira, unogona kugadzira chinhu chitsva chemenu mune iyo WordPress kumashure.

Wobva wapa iyo ichangobva kugadzirwa menyu chinhu kune yakanyoreswa menyu, uye kurudzira hukama hunoenderana ▼

Ita wordpress multi-level menu navigation bar

Zvino ngatitaure nezve maitiro ekugadzira WordPress multi-level menyu:

Kutanga bvisa iyo yekutanga menyu kodhi mune mafaera faira eyako WordPress theme.

kana wedzera iyi kodhi zvakananga ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• Cherechedza: inofanira kunge iri mukatiYakawedzerwa kunze.

Wobva watsvaga iyo PHP kodhi yedingindira rekudaidza menyu, kana iri mbishi, inowanzoita seizvi ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

bvisa woitsiva ne ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• Cherechedza: Ita shuwa kuti iyi kodhi haina mamwe ma div, zvikasadaro inosungwa neyekunze div.

Nhanho inotevera ndeyekuwedzera kudonhedza JS basa kodhi uye kuwedzera inotevera kodhi kune iyo theme's JS faira ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

WordPress Menu CSS Styles

Pakupedzisira, CSS maitiro ekushongedza.

Ndeupi mhedzisiro inofanirwa kuve, ipa yakazara kutamba kune yako fungidziro, CSS inogona kuzviita ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• Wedzera iri pamusoro CSS kodhi kune theme's style.css faira uye chengeta.

Mushure mekuchengetedza, zorodza peji rekutanga rewebhusaiti yako, unogona kuona maitiro, zviri nyore here?