How to change items in navigation menu

I have a navigation menu on top of my page. Lets say the menu has 2 items:

Home | Contact.

Now depending on the login of user the menu items will change. Lets say if admin login's than there will be an extra item in the navigation menu and the menu will become:

Home | Contact | Admin

But how am i going to do it?

Thought of several ways like:

  1. make separate menus and with php i will make the menu visible to user, which will be needed- and the other one hidden/invisible.
  2. Using php, add the items -that are needed.

How can i do it really?

-------------Problems Reply------------

1. use javascript template engine (like underscore.template )

templateObj + templateString = renderedLayout

2. javascript Array.join('|')

use javascript array for prepare to append u menu

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. use 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>

luke.

  1. Use database, if you have more than two user roles. Assign required roles to each menu item.
  2. Use PHP for adding it, if there's only one 'Admin' item.
Category:javascript Views:4 Time:2018-12-30

Related post

  • how to change 'item' on Phil Sturgeon's RESTful API 2010-05-28

    <xml> − <item> <userid>1</userid> <username>example</username> <useremail>[email protected]</useremail> </item> </xml> hi all,im new to CI,just want to know how to change <item> to som

  • How to Display the Javascript Navigation menu On the top of the Flash in all Major Browsers 2010-10-12

    My site has a jQuery drop-down navigation menu and that is displayed beneath the Flash. How can I display the navigation menu above the Flash object? I tried with setting wmode="transparent" but it is not work. Please provide some help to solve this

  • How to create a dynamic navigation menu? 2011-12-17

    How to create a dynamic navigation menu (PHP variable based) that can populate the dynamic links based on the corresponding values of users' ID reserved in Mysql database during a session? --------------Solutions------------- I've resolved the proble

  • How to change item source for a multi-valued field from a linked table to a list that I can type values in? 2013-06-22

    Hi, I am using MS Access 2007. I have created a multi-valued field "Product Category" that lookups data items from a linked table. So, the Data Type for the multi-valued field "Product Category" is Number. Now I want to change the Data Type of "Produ

  • How to change font of a menu item to regular from bold? 2010-01-21

    I want to change font of a menu item from bold to regular. I looked few API's like ModifyMenu SetMenuItemInfo but looks like there is no direct API to change the font. Any suggestions whats the easiest and best way to do that. --------------Solutions

  • how to decorate a zend navigation menu? 2012-02-24

    i have this menu: $menu['talent'] = array( array('id' => 'welcome', 'label' => 'My Profile', 'uri' => '/profile/, 'class' => 'navlink' ) ), array('id' => 'welcome', 'label' => 'My Profile', 'class' => 'navlink', 'uri' => '/pro

  • Android: How to change Items created with a ViewPager? 2011-12-25

    I'm rebuilding my app design and would like to use a ViewPager for it. The implementation wasn't quite the problem, but I can't figure out how to change my TextViews inside the pages. Hours of googling didn't help me either. Maybe you can help me. I

  • how to inlcude this slider navigation menu in jquery mobile theme? 2012-02-29

    Can anyone please guide me how to include the slider navigation of the theme below in jquery mobile frame work...please help me ..totally stuck with this.... slider navigation bar of this : http://indiqo.eu/demos/hotcake/ i want to include that slide

  • Access 2013 how to change Item combo 2014-09-14

    Hi I am binding Data to combo - OK (3 columns ,10 records) trying change Item Combo1.Column(2, 2) = "Change" - Run time error '424' Object required What is a proper way to change item? Thanks for any suugestion --------------Solutions------------- Ch

  • How to change Visual Studio 2008 menu items color ( not the text editor but windows of VS more like skin) 2010-07-14

    i am working in Visual Studio 2008 and is bored of default theme of blue menu items so wanted to chage it. but so far have no clue ho to do it. found a theme editor which changes themes but this is for VS2010: http://visualstudiogallery.msdn.microsof

  • How to change items order in translated main-menu? 2011-09-20

    I have a problem with determining the position of main-menu items after their translation. I can only determine the positions of elements in the original language (polish) when doing a translation, I can not determine the position of the elements in

  • How to get dropdown Jquery navigation menu to expand over web page elements 2011-02-26

    I know this is a pretty basic question, but I don't know how to articulate what I want into a Google search to solve my problem. I am working on a website for a Non-profit, and I am currently using Jquery and CSS to create a dynamic dropdown navigati

  • How to add items in popup menu? 2009-08-27

    In eclipse plugin development, I want to add one item (eg: Mystyle ) in popup menu. For an instance, Project Explorer --> Right Click --> New --> MyStyle How can I achieve this in eclipse plugin development? Regards Mathan --------------Solu

  • How to Style Unique CSS Navigation Menu 2012-01-01

    I have a fair amount of CSS knowledge, but I've been stumped while trying to achieve a unique navigation bar for a website I'm working on. Since pictures are worth over 9000 words, I put together a diagram to represent the scenario. The #container (b

  • How to change a drop-down menu in Visual Studio from click-to-change to just change when selected? 2012-02-04

    I'm using Visual Studio 2010 / VB / dot net 4.0, and I have a drop-down menu in my left column that switches resource languages for the end user. It reads like this: --------English ------- <<- Engish is always the default top language option F

  • Android: how to change color of Options Menu on Click 2012-04-23

    By default Android shows Orange color on Options Menu when an item is selected. How can I set my own color to the OptionsMenu on click?? --------------Solutions------------- Options menu in android can be customized to set the background or change th

  • How to change Joomla Articles Navigation links to images 2011-06-08

    Which php page generates the Pre/Next links in articles, when I have enables "Show navigation" in the advanced parameters section for the menu assigned with the Articles of a particular category. Also how can I replace the Pre/Next button in articles

  • How to change Android's options menu position 2011-11-22

    I just want to know if it is possible to change the position of the options menu in Android, specifically I want to display the menu at the top of the screen, instead at the bottom. Thanks in advance. --------------Solutions------------- The answer i

  • How to change orientation using a menu button? 2012-02-05

    I would like to handle the orientation change of my app with a menu button, so it doesn't change views when the device is turned, but when the user presses a menu item. Can you tell me the best way to do this? Everything that comes to my mind seems t

  • How to properly build a navigation menu that highlights the current page 2009-10-09

    I've setup a menu for a fairly simple site based on icant.co.uk. It's fairly simple with maybe 5 pages. The small site is mainly a mysql browser for a few tables using MATE. Theres a common.php file that contains the header & footer HTML so thats

  • How to make a css navigation menu "selected" option still clickable 2010-04-08

    So I have a fairly simple vertical CSS menu based off of UL. <ul class="vertnav"> <li><a href="unselected1.php">Item1</a></li> <li><a href="unselected2.php">Item2</a></li> <li><a href="se

  • How do I hide the navigation menu in Plone on the home page 2011-06-21

    I'd like to remove the navigation portlet just when someone is viewing the home page. Is this possible? I'm using Plone 2.5.3, Zope 2.9.8. Would I need to upgrade to a newer Plone to do that? I've tried to go to Plone 3 and 4 but I couldn't get the s

  • how to change android webview context menu(open, open inOpen in new window, bookmark link -)? 2011-10-13

    When, I used long press on any web link(URL) on web page, Android will display the Context menu with actions (Open, Open in new window, bookmark link, save link, share link, …. ). As per my under stand these options are provided by the Android. How c

  • How can I create reusable navigation menu in ASP MVC3? 2011-11-29

    I have the following navigation html/code now duplicated across several Views: <ul class="topNav"> <li class="selected">@Html.ActionLink("Dashboard", "Dashboard", new { id = ViewContext.RouteData.GetRequiredString("id") })</li> <

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.183 (s). 11 q(s)