WordPress hu li cas theem nrab / ntau theem navigation bar kev cai ntawv qhia zaub mov?

ntau ntauKev Lag Luam Hauv Internetneeg xaivWordPressLostsim lub vev xaib, tab sis cov navigation bar ntawm qee cov ntsiab lus tsis txhawb cov ntawv qhia theem nrab / ntau theem. Yog tias koj tsis txaus siab, koj tuaj yeem sim manually ntxiv lossis hloov kho cov ntawv qhia zaub mov ntawm lub ntsiab lus.

Qhov kev hloov kho pib los ntawm header.php Ib qho tseem ceeb hauv cov ntaub ntawv template no yog cov zaub ntawm cov ntawv qhia zaub mov.

Yog tias koj siv cov cai hu rau qeb raws li cov ntawv qhia zaub mov, nws kuj tseem ua tau, tab sis nws tsis yooj yim rau txheeb xyuas cov khoom noj.

Cov npe nrog subcategories tsis yooj yim rau lis, yog li kuv kuj xav ntxiv cov ntawv qhia zaub mov kev cai rau kuv lub ntsiab zoo li lwm cov ntsiab lus.

Nws tsis yooj yim rau ntxiv cov ntawv qhia zaub mov customization muaj nuj nqi rau lub ntsiab lus tshiab, muaj 2 kauj ruam.

Thawj kauj ruam, WordPress ntawv sau npe

Txhawm rau siv cov ntawv qhia zaub mov, koj yuav tsum xub sau npe, qhib cov haujlwm ua haujlwm hauv qab lub ntsiab lus, thiab ntxiv cov lej hauv qab no ▼

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

• Yog tias tsis muaj cov ntaub ntawv functions.php hauv qab lub ntsiab lus, tsim ib qho tshiab thiab luam cov cai saum toj no kom txuag tau nws.

Teev nyob rau hauvWordPress backend, thiab tom qab ntawd mus rau Appearance → Menu.

Yog tias koj tuaj yeem pom qhov screen hauv qab no, nws txhais tau tias koj tau sau npe ua ▼

Cov saum toj no sau npe 2 menus:

1. Ib daim ntawv qhia sab saum toj Top Menubar.
2. lub ntsiab zaub mov Main menubar.

Cov kauj ruam thib ob, WordPress zaub mov hu

Tom qab cov ntawv qhia zaub mov tau sau npe, nws tuaj yeem raug hu rau hauv cov ntaub ntawv template, muab cov cai hauv qab no rau hauv cov ntaub ntawv header.php, thiab koj tuaj yeem hu rau qhov chaw koj xav tso saib cov ntawv qhia zaub mov.

Hauv cov ntaub ntawv header.php, hu rau "cov ntawv qhia zaub mov saum toj" ▼

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

Hauv cov ntaub ntawv header.php, hu rau "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')); ?>

Hu rau "cov ntawv qhia hauv qab" hauv footer.php file▼

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

Kauj ruam XNUMX: Settings menu

Tom qab cov ntawv qhia zaub mov tau sau npe thiab qhov chaw tso saib ntawm cov ntawv qhia zaub mov tau txhais hauv cov ntsiab lus, koj tuaj yeem tsim cov ntawv qhia zaub mov tshiab hauv WordPress keeb kwm yav dhau.

Tom qab ntawd, muab cov ntawv qhia zaub mov tsim tshiab rau cov ntawv teev npe, thiab qhia txog kev sib raug zoo ▼

Ua wordpress multi-level menu navigation bar

Tam sim no cia peb tham txog yuav ua li cas ua WordPress ntau qib zaub mov:

Ua ntej rho tawm thawj cov ntawv qhia zaub mov hauv cov ntaub ntawv ua haujlwm ntawm koj tus kheej WordPress ntsiab.

lossis ntxiv cov lej no ncaj qha ▼

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

• Nco tseg: yuav tsum nyob hauvNtxiv sab nraud.

Tom qab ntawd nrhiav PHP code rau lub ntsiab lus hu rau cov ntawv qhia zaub mov, yog tias nws nyoos, nws feem ntau zoo li qhov no ▼

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

tshem nws thiab hloov nws nrog ▼

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

• Nco tseg: Nco ntsoov tias cov cai no tsis muaj lwm yam divs, txwv tsis pub nws yuav raug khi los ntawm sab nraud div.

Cov kauj ruam tom ntej yog ntxiv cov dropdown JS muaj nuj nqi code thiab ntxiv cov lej hauv qab no rau lub ntsiab JS cov ntaub ntawv ▼

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

WordPress zaub mov CSS styles

Thaum kawg, CSS style beautification.

Cov txiaj ntsig zoo li cas yuav tsum yog, muab kev ua si tag nrho rau koj qhov kev xav, CSS tuaj yeem ua nws ▼

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

• Ntxiv cov lej CSS saum toj no rau lub ntsiab lus style.css cov ntaub ntawv thiab txuag nws.

Tom qab txuag, rov ua dua nplooj ntawv pem hauv ntej ntawm koj lub vev xaib, koj tuaj yeem pom cov txiaj ntsig, nws yooj yim heev?