如何更改導航菜單中的項目

Question

我的頁面頂部有一個導航菜單。 假設菜單有 2 個項目：

 Home | Contact.

現在，根據用戶的登錄情況，菜單項將發生變化。 假設如果管理員登錄，導航菜單中將有一個額外的項目，菜單將變為：

Home  |  Contact  |  Admin

但是我該怎么做呢？

想到了幾種方法，比如：

1. 制作單獨的菜單，並使用 php 我將使菜單對用戶可見，這是需要的 - 而另一個隱藏/不可見。

2. 使用 php，添加需要的項目。

我怎樣才能真正做到？

Answer 1

1. 使用 javascript 模板引擎（如 underscore.template ）

templateObj + templateString = 渲染布局

2.javascript Array.join('|')

使用 javascript 數組准備附加菜單

 var renderMenu = function(menu){ menu = menu || [ '<a href="/lalala" >Home</a>', '<a href="/lololo" >Contact</a>' ]; menu = menu.join(' | '); document.getElementById('menu_holder').innerHTML= menu; }; //first run renderMenu(); ///button handlers var withoutUser = function() { renderMenu(); }; var user = function() { var menu = [ '<a href="/lalala" >Home</a>', '<a href="/lololo" >Contact</a>', '<a href="/profile">Admin</a>' ]; renderMenu(menu); };

 <button onclick="user()">render with user</button> <button onclick="withoutUser()">render withOUT user</button> <div id="menu_holder"></div>

3.使用CSS

 .menu-item { list-style:none; display: inline-block; } .menu-item:before { content: '|'; } .menu-item:first-child:before { content: ''; }

 <li class="menu-item"> <a class="menu-link"href="#">Home</a> </li> <li class="menu-item"> <a class="menu-link"href="#">Contacts</a> </li> <li class="menu-item"> <a class="menu-link"href="#">Admin</a> </li>

盧克。

Answer 2

1. 如果您有兩個以上的用戶角色，請使用數據庫。 為每個菜單項分配所需的角色。

2. 如果只有一個“管理員”項，請使用 PHP 添加它。