I-WordPress ibiza kanjani imenyu yangokwezifiso yebha yokuzulazula yesibili/yezinga eliphezulu?

Okuningi kweI-Internet Marketingabantu bayakhethaWordPressWozayakha iwebhusayithi, kodwa ibha yokuzula yezinye izingqikithi ayiwasekeli amamenyu esibili/amazinga amaningi.

Ukuguqulwa kuqala ku-header.php Umsebenzi obalulekile kuleli fayela lesifanekiso wukuboniswa kwemenyu.

Uma usebenzisa ikhodi ukubiza isigaba njengemenyu, kungenzeka, kodwa akulula ukuhlunga izinto zemenyu.

Uhla lwemibhalo olunezigaba ezincane akulula ukuluphatha, ngakho-ke ngifuna ukwengeza umsebenzi wemenyu yangokwezifiso endikimbeni yami njengezinye izingqikithi.

Akunzima ukwengeza umsebenzi wokwenza ngokwezifiso imenyu endikimbeni esanda kwenziwa, ikakhulukazi kunezinyathelo ezi-2.

Isinyathelo sokuqala, ukubhaliswa kwemenyu ye-WordPress

Ukuze usebenzise imenyu, kufanele uqale ubhalise, uvule ifayela lemisebenzi ngaphansi kwetimu, bese wengeza ikhodi elandelayo ▼

<?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' => __('底部菜单') ) );
}
?>

• Uma lingekho ifayela le-functions.php ngaphansi kwetimu, yakha entsha bese ukopisha ikhodi engenhla ukuze uyigcine.

登录I-WordPress backend, bese uya kokuthi Ukubukeka→Imenyu.

Uma ubona isikrini esingezansi, kusho ukuthi ubhalise njengo-▼

Okungenhla kubhaliswa amamenyu ama-2:

1. Imenyu ephezulu Ibha yemenyu ephezulu.
2. imenyu enkulu Main ibha yemenyu.

Isinyathelo sesibili, ikholi yemenyu ye-WordPress

Ngemva kokuba imenyu ibhalisiwe, ingabizwa efayeleni lesifanekiso setimu.Faka ikhodi elandelayo ku-header.php ifayela, futhi ungayibiza lapho ufuna ukubonisa khona imenyu.

Efayelini elithi header.php, shayela "imenyu ephezulu"▼

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

Efayelini elithi header.php, shayela "imenyu enkulu"▼

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

'imenyu_navi')); ?>

Shayela "imenyu engezansi" ku-footer.php file▼

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

Isinyathelo sesi-XNUMX: Imenyu yezilungiselelo

Ngemuva kokuthi imenyu ibhalisiwe futhi indawo yokubonisa yemenyu ichazwe efayeleni letimu, ungakha into entsha yemenyu ngemuva kwe-WordPress.

Bese, yabela into yemenyu esanda kwakhiwa kumenyu ebhalisiwe, bese uphakamisa ubudlelwano obuhambisanayo ▼

Yenza ibha yokuzulazula yemenyu enamazinga amaningi e-wordpress

Manje ake sikhulume ngendlela yokwenza imenyu ye-WordPress enamazinga amaningi:

Okokuqala susa ikhodi yemenyu yangempela kufayela lemisebenzi yetimu yakho ye-WordPress.

noma engeza le khodi ngokuqondile ▼

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

• Qaphela: kufanele ungeneKwengezwe ngaphandle.

Bese thola ikhodi ye-PHP ukuze itimu ishayele imenyu, uma iluhlaza, ivamise ukuba kanje ▼

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

isuse bese uyibuyisela esikhundleni ngokuthi ▼

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

• Qaphela: Qiniseka ukuthi le khodi ayiqukethe amanye ama-div, ngaphandle kwalokho izoboshwa i-div yangaphandle.

Isinyathelo esilandelayo ukufaka ikhodi yokusebenza ye-JS eyehlayo bese wengeza ikhodi elandelayo efayeleni le-JS letimu ▼

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

Izitayela ze-CSS zemenyu ye-WordPress

Ekugcineni, isitayela se-CSS sobuhle.

Hlobo luni lomphumela okufanele lube, nikeza umdlalo ogcwele emcabangweni wakho, i-CSS ingakwenza ▼

#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;}

• Engeza ikhodi ye-CSS engenhla kufayela letimu elithi style.css bese uyilondoloza.

Ngemva kokulondoloza, vuselela ikhasi langaphambili lewebhusayithi yakho, ungabona umphumela, ingabe kulula kakhulu?