navigation 導(dǎo)航菜單

[基礎(chǔ)用法]

標(biāo)簽:navigation描述:易優(yōu)導(dǎo)航菜單標(biāo)簽,可以循環(huán)嵌套標(biāo)簽。通常用于獲取導(dǎo)航菜單信息用法: {eyou:navigation position_id='1' currentclass='active'} <li class="{$field.currentclass}"><a href='{$field.nav_url}' {$field.target} {$field.nofollow}>{$field.nav_name}</a> </li> {/eyou:navigation}屬性: position_id='' 導(dǎo)航分類ID,獲取某導(dǎo)航分類下全部菜單   (position_id與nav_id,只需傳其中一個值即可)
nav_id='' 菜單ID,獲取某個菜單下的子菜單  (position_id與nav_id,只需傳其中一個值即可)   currentclass='' 應(yīng)用樣式class類名 name='' 數(shù)組類型的變量名(二級/三級菜單時用到) empty='' 沒有數(shù)據(jù)時顯示的文案 id='' 可以任意指定循環(huán)里的變量名替代field,假設(shè)id='field1',模板調(diào)用如:{$field.title} 變成 {$field1.title}涉及表字段: 請查閱易優(yōu)數(shù)據(jù)字典,找到表名 ey_nav_list  
-------------------------------效果展示--------------------------------


1,調(diào)用導(dǎo)航頂級菜單
模板調(diào)用代碼

{eyou:navigation position_id='1' currentclass='active'} 

<li class="{$field.currentclass}"><a href='{$field.nav_url}' {$field.target} {$field.nofollow}>{$field.nav_name}</a> </li>

{/eyou:navigation}


2.當(dāng)前導(dǎo)航下所有層級菜單
模板調(diào)用代碼

{eyou:navigation position_id='1' id='field1' currentclass='active'} // 第一級菜單循環(huán)開始 

<li>

<a href="{$field1.nav_url}" title="{$field1.nav_name}" class="{$field1.currentclass}" {$field1.target} {$field1.nofollow}>

{$field1.nav_name}

{eyou:notempty name='$field1.children'}

有子菜單時才顯示這里的html代碼,比如:箭頭、圖標(biāo)等

{/eyou:notempty}

</a>

{eyou:notempty name='$field1.children'} // 判斷是否有子菜單(第二級菜單)start

<div>

{eyou:navigation name='$field1.children' id='field2'} //第二級菜單循環(huán)開始

<div>

<a href="{$field2.nav_url}" class="dropdown-item {$field2.currentclass}" {$field2.target} {$field2.nofollow}>{$field2.nav_name}</a>

{eyou:notempty name='$field2.children'} // 判斷是否有子菜單(第三級菜單)start

<div class="dropdown-menu animate">

{eyou:navigation name='$field2.children' id='field3' } //第三級菜單循環(huán)開始

<a href="{$field3.nav_url}" class="dropdown-item {$field3.currentclass}" {$field3.target} {$field3.nofollow}>{$field3.nav_name}</a>

{/eyou:navigation} //第三級菜單循環(huán)結(jié)束

</div>

{/eyou:notempty} // 判斷是否有子菜單(第三級菜單)end

</div>

{/eyou:navigation} // 第二級菜單循環(huán)結(jié)束

</div>

{/eyou:notempty} // 判斷是否有子菜單(第二級菜單)end

</li>

 {/eyou:navigation} //第一級菜單循環(huán)結(jié)束


3.當(dāng)前菜單下子菜單調(diào)用
模板調(diào)用代碼

{eyou:navigation nav_id='1' currentclass='active'} 

<li class="{$field.currentclass}"><a href='{$field.nav_url}' {$field.target} {$field.nofollow}>{$field.nav_name}</a> </li> 

{/eyou:navigation}


4.當(dāng)前菜單下所有層級菜單(最高支持調(diào)用兩級)

{eyou:navigation nav_id='1' id='field1' currentclass='active'} // 第二級菜單循環(huán)開始

<li>

<a href="{$field1.nav_url}" title="{$field1.nav_name}" class="{$field1.currentclass}" {$field1.target} {$field1.nofollow}>

{$field1.nav_name}

{eyou:notempty name='$field1.children'}

有子菜單時才顯示這里的html代碼,比如:箭頭、圖標(biāo)等

{/eyou:notempty}

</a>

{eyou:notempty name='$field1.children'} // 判斷是否有子菜單(第三級菜單)start

<div>

{eyou:navigation name='$field1.children' id='field2'} //第三級菜單循環(huán)開始

<div>

<a href="{$field2.nav_url}" class="dropdown-item {$field2.currentclass}" {$field2.target} {$field2.nofollow}>{$field2.nav_name}</a>

</div>

{/eyou:navigation} //第三級菜單循環(huán)結(jié)束

</div>

{/eyou:notempty} // 判斷是否有子菜單(第三級欄目)end

</li>

{/eyou:navigation} //第二級菜單循環(huán)結(jié)束


文檔最后更新時間:2023-10-23 17:31:02

文檔
目錄

深色
模式

切換
寬度