In website development, navigation menu is a very important part. As a modern content management system, PbootCMS provides rich navigation menu functions to meet different needs. This article will introduce how to use the navigation menu of Pboot CMS, and realize the effect of multi-level menu and multilingual menu.
Basic Usage
The navigation menu of PbootCMS is very simple to use. The following is an example code for basic usage:
{pboot:nav num=10 parent=0} <a href="{nav:url}">{nav:name}</a> {/pboot:nav}
The above code will generate a top-level navigation menu based on the number set by the num parameter. The parent parameter is used to specify the parent menu ID, which is 0 by default. The configuration of the navigation menu can be completed by adding the corresponding link and name.
Multi level menu implementation
If you need to implement multi-level menus, you can refer to the official website to add secondary menus. Then, add an if judgment to the loop, and the loop will be triggered only when the menu has submenus to avoid blank content. The following is sample code:
{pboot:nav num=10 parent=0} <a href="{nav:url}">{nav:name}</a> {pboot:if([nav:soncount]>0)} {pboot:2nav parent=[nav:scode]} <a href="{2nav:url}">{2nav:name}</a> {/pboot:2nav} {/pboot:if} {/pboot:nav}
Through the above code, the effect of the secondary menu can be achieved. The operation is basically similar to that of three-level menus or more.
Highlight the current menu
In order to let users know where they are when browsing the website, we need to highlight the current menu. PbootCMS provides a judgment statement to realize this function. You only need to add an active selector. The following is sample code:
<li class="nav-item {pboot:if('[nav:scode]'=='{sort:tcode}')}active{/pboot:if}" > <a class="nav-link" href="{nav:url}">{nav:name}</a> </li>
Use [nav: score] and {sort: tcode} in the above code to compare whether the ID values of the current menu and the column to which the page belongs are equal. If they are equal, add an active selector to highlight the current menu.
Multilingual menu implementation
PbootCMS also provides multi language menu function, which can display different navigation menus according to different languages. The following is sample code:
<li class="nav-item {pboot:if('{pboot:sitelanguage}'=='cn')} display-none {/pboot:if} {pboot:if(0=='{sort:scode}')}active{/pboot:if}"> <a class="nav-link" href="{pboot:sitepath}/" ><i class="fa fa-home"></i> HOME</a> </li> <li class="nav-item {pboot:if('{pboot:sitelanguage}'=='en')} display-none {/pboot:if} {pboot:if(0=='{sort:scode}')}active{/pboot:if}"> <a class="nav link" href="{pboot: sitepath}/"><i class="fa fa home"></i>Home</a> </li>
{pboot: sitelanguage} in the above code is a tag that comes with PbootCMS to obtain the current language. Different navigation menus are displayed by comparing the language types configured by PbootCMS.
summary
PbootCMS provides rich and flexible navigation menu functions. You can complete tasks or specify specific topics according to your needs. I can continue to write an article for you.
