show/hide css menu item depending user role using


Problem :

I have the css layout: One column fixed width layout, from

I have two menu items defined like the following:

<div id="navigation">
            <li><a href="#">Data Entry</a></li>
            <li><a href="#">Reports</a></li>

Now, let's say that I have two roles: guest and operator, and I want that for example if a user with role guest is logged in, then just the Report item from the menu appear, and in case of a user operator is logged in, then both options appear.

How can I accomplish that?


Based on your responses, I'll go with the server side logic to deal with this:

<div id="navigation">
            <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
            <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>                


Solution :

You can put this in the Page_Load..

    Dim cs As ClientScriptManager = Page.ClientScript

    If Not cs.IsClientScriptBlockRegistered(Me.GetType(), "RoleVariable") Then
        Dim js As New String
        js = "var _role = " & role & ";"
        cs.RegisterStartupScript(Me.GetType(), "RoleVariable", js, True)
    End If

And from there, you will have the role in the Javascript realm, where you can manipulate the visibility of the items you want.


<script type="text/javascript">
    function hideStuff() {
        if (_role === "operator") {
            // hide/show your elements here
        else if (_role === "guest") {
            // hide/show your elements here

Keep in mind that this approach is all client-side and is therefore easy for another developer to manipulate if they really wanted to. But on the other hand, it's the simplest. Don't use this approach for high-security situations.

    CSS Howto..

    How can I insert text before an item with CSS?

    CSS, how to add picture in the corner of every columns

    In CSS, how to grow the button + button image when the button is focused?

    how to div.width css property using js or jquery?

    How do I change the order of elements and control flow in responsive css

    How to hide a div off the viewport responsively, and always showing the bottom 50px?

    How to add a centered div that fades-in from the top over my content?

    How can I get the dots that surround some elements to go away/become solid lines?

    version control: how to control css and js compressed/minified versions between environments

    How to apply inline and/or external CSS loaded dynamically with jQuery

    How to show only the div with id while hiding other divs using CSS only

    css: how to make the third div line up with the first div

    How to draw a Normal Distribution Curve (Bell curve) using CSS and JavaScript?

    Make a slide show by fading in background images [closed]

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    how can i update these css classes to generate a blue box behind the first letter of a word?

    How to add new fonts in CSS for local testing

    How to write a CSS selector that works on nested divs and selects the closest match?

    Angularjs: How to *retrieve* css property from element in directive?

    How to Fade In Background on Page Load - jQuery

    How to make 1 css value dependent on another?

    How to force free CSS resize on input element when its width is specified?

    How to grows up a div height with a table that has your rows added dynamically?

    HTML/JavaScript - How can I hide the links and cursor?

    How to align element based on the other element that is above

    How to have background color outside of radius border in a tbody in chrome?

    How to add pictures around a background through CSS?

    JavaFX how to apply CSS theme

    In javascript, how to get a class name from a td cell?

    How can I set a CSS property on the html element with jQuery?