Water Cooler v2 Water Cooler v2 - 4 months ago 9
CSS Question

How do I make a <ul> into a dropdown menu?

The ASP.NET MVC 5 template that comes with Visual Studio creates this HTML in the _LoginPartial partial view.

It looks like this:

<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">@string.Format("Hello " + User.Identity.GetUserName() + "!")</a>
</li>
<li>
@Html.ActionLink("Change password", "ChangePassword", "Account", routeValues: null, htmlAttributes: new { title = "Change Password" })
</li>

@{
var o = Session["CurrentUserIsAdmin"];
if (o != null)
{
var currentUserIsAdmin = (bool)o;

if (currentUserIsAdmin)
{
<li>
@Html.ActionLink("Create New Admin User", "Register", "Account",
routeValues: null, htmlAttributes: new { title = "Create New Admin User" })
</li>
}
}
}
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>


It produces this:

enter image description here

I would like to change it so that:

1) One item, say, First Item is shown in the navigation bar.

2) The rest of the items, i.e. the items that you presently see in the navigation bar, i.e all the items that are in the
<ul>
should become a drop-down menu that also sits on the navigation bar just after First Item.

I don't know enough CSS and bootstrap to do it myself. Could you please help me?

Answer

Try this one:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">First item</a>
        <ul class="dropdown-menu">
            <li>
                @string.Format("Hello " + User.Identity.GetUserName() + "!")
            </li>
            <li>
                @Html.ActionLink("Change password", "ChangePassword", "Account", routeValues: null, htmlAttributes: new { title = "Change Password" })
            </li>
            @{
                var o = Session["CurrentUserIsAdmin"];
                if (o != null)
                {
                    var currentUserIsAdmin = (bool)o;

                    if (currentUserIsAdmin)
                    {
                        <li>
                            @Html.ActionLink("Create New Admin User", "Register", "Account",
                            routeValues: null, htmlAttributes: new { title = "Create New Admin User" })
                        </li>
                    }
                }
            }
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    </li>
</ul>
Comments