Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Jun 08, 2011 07:41 AM by ignatandrei
Member
7 Points
5 Posts
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
All-Star
134521 Points
21576 Posts
Moderator
MVP
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 ....???
Jun 08, 2011 05:24 AM|LINK
Thanks for your time
They do not appear.
I have
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
Jun 08, 2011 05:45 AM|LINK
DevNet247 copied the css in the site.css
Declaration, please?
DevNet247 copied the javascript
See also
http://msprogrammer.serviciipeweb.ro/2010/10/09/five-common-mistakes-for-asp-net-mvc-accesing-resources-css-js-images-ajax/
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>
Jun 08, 2011 06:07 AM|LINK
@string.Format("<link href='{0}' type='text/css' rel='stylesheet' />", Url.Content("~/Content/Site.css"))
@
string
.Format(
"<link href='{0}' type='text/css' rel='stylesheet' />"
, Url.Content(
"~/Content/Site.css"
))
Jun 08, 2011 07:07 AM|LINK
Hi thanks for your reply
but did not make any difference.Can you expand on what you suggested is meant to be doing.
Jun 08, 2011 07:41 AM|LINK
check the html generated. Do you see any "strange" declaration(js/css)?
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
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
It does not work means ....???
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
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
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
Declaration, please?
Declaration, please?
See also
http://msprogrammer.serviciipeweb.ro/2010/10/09/five-common-mistakes-for-asp-net-mvc-accesing-resources-css-js-images-ajax/
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>ignatandrei
All-Star
134521 Points
21576 Posts
Moderator
MVP
Re: Multilevel Menus in asp.net mvc3.Any tutorials out there
Jun 08, 2011 06:07 AM|LINK
@string.Format("<link href='{0}' type='text/css' rel='stylesheet' />", Url.Content("~/Content/Site.css"))DevNet247
Member
7 Points
5 Posts
Re: Multilevel Menus in asp.net mvc3.Any tutorials out there
Jun 08, 2011 07:07 AM|LINK
Hi thanks for your reply
but did not make any difference.Can you expand on what you suggested is meant to be doing.
ignatandrei
All-Star
134521 Points
21576 Posts
Moderator
MVP
Re: Multilevel Menus in asp.net mvc3.Any tutorials out there
Jun 08, 2011 07:41 AM|LINK
check the html generated. Do you see any "strange" declaration(js/css)?