Adding a drop down horizontal menu to the ASP.NET MVC 2 template

Question

I am wanting to add a menu look and operation similar to this blog post. I am not using HTML5 and I am not using CSS3. Also, I am a CSS n00b and don't really grasp what each tag does (or can do) so I feel like I am drowning here in understanding what to do. I have been scouring the net looking for an example of what I want to do and have had no luck beyond the link above.

This is the "standard" ASP.NET MVC 2 template. We actually like the look for our internal applications. But the menu is something that needs help yet.

Here is what I have working so far:

Current menu

HTML:

        <div id="menucontainer">
            <ul id="menu">
                <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                <li><%= Html.ActionLink("Sign Timesheet", "Index", "Timesheet") %></li>
                <li>
                    <%= Html.ActionLink("Leave Requests", "Index", "LeaveRequest") %>
                    <ul>
                        <li><%= Html.ActionLink("New Leave Request", "Create", "LeaveRequest")%></li>
                        <li><%= Html.ActionLink("Leave Request History", "History", "LeaveRequest") %></li>
                    </ul>
                </li>
                <%--<li><%= Html.ActionLink("About", "About", "Home")%></li>--%>
                <li><a href="#" target="_blank">NaviLine</a></li>
                <li><%= Html.ActionLink("Help", "Help", "Home") %></li>
            </ul>
        </div>

CSS:

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: none;
}

ul#menu li:hover ul
{
    display: block;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}

ul#menu li ul
{
    position: absolute;
    right: 0px;
    top:34px;
    display: none;
}

just curious. There are tons of javascript enabled menus that you can get as plug-ins. Is there a particular reason why you are not using any of those? — CtrlDot
– CtrlDot, Commented Mar 16, 2011 at 15:17
Before someone asks. This is an internal app and our official browser is IE 8. We have many IE 7 stations yet as well. HTML 5 doesn't make much sense yet internally with that. — Mike Wills
– Mike Wills, Commented Mar 16, 2011 at 15:18
@CtrlDot I guess I was thinking along the lines of CSS mostly so I can try to learn some. If I can do this with jQuery or JavaScript, I am not against it. — Mike Wills
– Mike Wills, Commented Mar 16, 2011 at 15:21

Chris · Accepted Answer · 2011-03-25 16:23:13Z

1

The minor tweaks needed are to just reference #menucontainer instead of the HTML5 markup of nav. In the blog post you would need to adjust the stylesheet reference twice and the first line of the jquery from $("body nav li").each(function () { to $("body #menucontainer li").each(function () { .

Hopes this helps.

answered Mar 25, 2011 at 16:23

Chris

6,3559 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Wills · Accepted Answer · 2011-03-16 16:03:05Z

0

Okay, I tried the article anyway and found that it works just fine with only a few minor tweaks.

answered Mar 16, 2011 at 16:03

Mike Wills

21.3k29 gold badges99 silver badges153 bronze badges

Collectives™ on Stack Overflow

Adding a drop down horizontal menu to the ASP.NET MVC 2 template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related