Multilevel Menus in asp.net mvc3.Any tutorials out there : The Official Microsoft ASP.NET Forums

Reply

DevNet247

Member

7 Points

5 Posts

Multilevel Menus in asp.net mvc3.Any tutorials out there

Jun 08, 2011 04:55 AM|LINK

Hi All,

I am new to web and wondering if you can help me.I am building a website as a learning process and I am really struggling to implement menus.

I have tried to follow the instructions on this link http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html on how to build a menu with sub menus,however when I integrate in my asp.net mvc3 app it does not work.

Again learning so jquery css and stuff are all new and on the agenda.

Question

Does anybody have a template with some menus with submenus that I can use in my learning app? Or can you help me to integrate the above?

thanks a lot

Edited by DevNet247 on Jun 08, 2011 04:57 AM

Reply

ignatandrei

All-Star

134521 Points

21576 Posts

Moderator

MVP

Re: Multilevel Menus in asp.net mvc3.Any tutorials out there

Jun 08, 2011 05:05 AM|LINK

DevNet247
however when I integrate in my asp.net mvc3 app it does not work.

It does not work means ....???

My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools

Reply

DevNet247

Member

7 Points

5 Posts

Re: Multilevel Menus in asp.net mvc3.Any tutorials out there

Jun 08, 2011 05:24 AM|LINK

Thanks for your time

They do not appear.

I have

Created a new mvc3 application
followed the instructions
copied the css in the site.css
copied the menus links in the _layout.cshtml
copied the javascript
they do not appear

Do you want to give it a go ,that would really help me.

My main question is. How do you implement menus with submenus .Any examples out there?

thanks again

Reply

ignatandrei

All-Star

134521 Points

21576 Posts

Moderator

MVP

Re: Multilevel Menus in asp.net mvc3.Any tutorials out there

Jun 08, 2011 05:45 AM|LINK

DevNet247
copied the css in the site.css

Declaration, please?

DevNet247
copied the javascript

Declaration, please?

DevNet247

Member

7 Points

5 Posts

Re: Multilevel Menus in asp.net mvc3.Any tutorials out there

Jun 08, 2011 05:56 AM|LINK

Hi Thanks for your reply

this is the code I have used

/*** MENU CSS ADDED TO SITE.CSS***/
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

/*CODE IN THE _LAYOUT.CSHTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

            $("ul.topnav li span").click(function () { //When trigger is clicked...

                //Following events are applied to the subnav itself (moving subnav up and down)
                $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

                $(this).parent().hover(function () {
                }, function () {
                    $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
                });

                //Following events are applied to the trigger (Hover events for the trigger)
            }).hover(function () {
                $(this).addClass("subhover"); //On hover over, add class "subhover"
            }, function () { //On Hover Out
                $(this).removeClass("subhover"); //On hover out, remove class "subhover"
            });

        });

    </script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                 <ul class="topnav">
                        <li><a href="#">Home</a></li>
                        <li>
                            <a href="#">Tutorials</a>
                            <ul class="subnav">
                                <li><a href="#">Sub Nav Link</a></li>
                                <li><a href="#">Sub Nav Link</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Resources</a>
                            <ul class="subnav">
                                <li><a href="#">Sub Nav Link</a></li>
                                <li><a href="#">Sub Nav Link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Submit</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>