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

【问题标题】：How to change items in navigation menu如何更改导航菜单中的项目
【发布时间】：2015-06-17 08:06:18
【问题描述】：

我的页面顶部有一个导航菜单。假设菜单有 2 个项目：

 Home | Contact.

现在根据用户的登录，菜单项将发生变化。假设如果管理员登录，导航菜单中会有一个额外的项目，菜单将变为：

Home  |  Contact  |  Admin

但是我该怎么做呢？

想了几个办法，比如：

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

我该怎么做呢？

【问题讨论】：

要么。这不是一个非常适合 SO 的问题

标签： javascript php jquery html css

【解决方案1】：

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

templateObj + templateString = 渲染布局

2。 javascript Array.join('|')

使用 javascript 数组准备附加 u 菜单

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>

卢克。

【讨论】：

whao..didnt 甚至不知道这些东西。对不起，这里是网页设计的新手。 :-)

【解决方案2】：

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

【讨论】：