Question

我的页面顶部有一个导航菜单。让我们说菜单有两个项目：

 Home | Contact.

现在，根据用户的登录情况，菜单项会发生变化。让我们说如果管理员登录，那么导航菜单中会有一个额外的项目，菜单将变为：

Home  |  Contact  |  Admin

但我该怎么办呢？

想到几种方式：

制作单独的菜单，使用php我将使菜单对用户可见，这将是必需的 - 另一个隐藏/不可见。
使用php，添加所需的项目。

我该怎么办呢？

Answer 1

<强> 1。使用javascript模板引擎（如underscore.template）

templateObj + templateString = renderedLayout

<强> 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

如果您有两个以上的用户角色，请使用数据库。为每个菜单项分配所需的角色。
使用PHP添加它，如果只有一个“管理员”＃39;项目

如何更改导航菜单中的项目

2 个答案: