本文转自:http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template-using-CSS-and-jQuery

Today I was playing around with using jQuery to create a drop down menu. I thought I’d share an example of adding a drop down menu to the new ASP.NET MVC HTML5 Template that I created on Day 2.

Before we begin, you’ll need to create a new site using the code from Day 2. You can either copy/paste the code from the article, or download the full source code. You’ll find the download link at the bottom of the post for Day 2.

Here’s a screenshot of the finished dropdown menu:

Here’s another screenshot of the menu in Chrome:

Add Sub-Menu Items

First, modify the <nav> item in the Site.Master file to include sub-menu items as <ul> child elements added to the “nav ul” element. Below is an example:

<nav>
<ul>
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li>
<a href="#">Customers</a>
<ul>
<li><a href="#">Create New</a></li>
<li><a href="#">Latest</a></li>
<li><a href="#">View All</a></li>
</ul>
</li>
<li>
<a href="#">Orders</a>
<ul>
<li><a href="#">Create New</a></li>
<li><a href="#">Latest: Last 30 Days</a></li>
<li><a href="#">Search: Date Range</a></li>
<li><a href="#">Search: Customer</a></li>
<li><a href="#">View All</a></li>
</ul>
</li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</nav>

Of course don’t forget to replace the “<a href” tags with “Html.ActionLink” calls to wire up the Views in your application. For this article, we’ll just leave the code like this.

Add CSS Styles to the Sub-Menus

We do not need to modify the styles in the “Site.css” file for this. We just need to add some CSS to style the sub-menus appropriately.

Here’s the minimum styles necessary for the sub-menu to display correctly:

<style>
body nav ul ul {
display: none;
position:absolute;
}
</style>

Even though the above style will make the sub-menus display correctly (hide on page load, and absolutely positioned), we still need to style them to match the overall style of the ASP.NET MVC site template.

Here’s the full CSS necessary to style the sub-menus in the new ASP.NET MVC HTML5 Template:

<style>
body nav ul ul {
display: none;
position:absolute;
width: 100%; background: #5C87B2;
border-top: 5px solid #5C87B2;;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
body nav ul ul li a{
line-height: 3.1em;
}
</style>

This CSS colors the background of the sub-menu area the same color blue as the page, but it also makes it semi-transparent. So any content behind the sub-menu will show through just a little bit.

Let’s wire things up with jQuery

Now we just need a little jQuery code to wire up our sub-menus to display when the use hovers the mouse over their parents. The jQuery code I’m using for this was inspired by Dan Wellman’s “How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery” post.

$(function () {
$("body nav li").each(function () {
if ($(this).find("ul").length > 0) { //show subnav on hover
$(this).mouseenter(function () {
$(this).find("ul").stop(true, true).slideDown();
}); //hide submenus on exit
$(this).mouseleave(function () {
$(this).find("ul").stop(true, true).slideUp();
}); $(this).find("ul").mousemove(function () {
$(this).stop(true, true).show();
});
}
});
});

As you can see, with jQuery the javascript code necessary to wire this up is rather short. Oh, and did I mention that the sub-menus slide down into place?

Conclusion

I know this post isn’t so much HTML5 as it is jQuery and CSS. But, after all, isn’t HTML5 really about the same thing as jQuery? RIA.

I know, yesterday, I said that today I would move on to adding some “patch” code to add some HTML5 support to older browsers. I decided to take a detour back to the ASP.NET MVC HTML5 template. We shall see, again, where tomorrow takes us.

[转]HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery的更多相关文章

  1. add a path cgi-bin to asp.net mvc

    1.简单,但是会丢失请求数据 protected void Application_BeginRequest() { string url = HttpContext.Current.Request. ...

  2. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  3. show drop down menu within/from action bar

    show drop down menu within/from action bar */--> pre { background-color: #2f4f4f;line-height: 1.6 ...

  4. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

  5. [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...

  6. Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor

    Webservice WCF WebApi   注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...

  7. html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。

    html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...

  8. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  9. 炫酷的html5(Drag 和 drop)拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

随机推荐

  1. const int * 和 int * const 傻傻分不清楚

    const int * a和int const *a一样,定义时不是必须初始化,指针可以指向其他变量,但是指向的变量的值不能修改. int * const定义时必须初始化,即必须指明指向哪个变量,定义 ...

  2. 【Codeforces 986B】Petr and Permutations

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] n为奇数时3n和7n+1奇偶性不同 n为偶数时也是如此 然后交换任意一对数 逆序对的对数的奇偶性会发生改变一次 求出逆序对 对n讨论得出答案. ...

  3. [luoguP2659] 美丽的序列(单调栈)

    传送门 单调栈大水题 l[i] 表示 i 能扩展到的左边 r[i] 表示 i 能扩展到的右边 ——代码 #include <cstdio> #include <iostream> ...

  4. sharepoint第三方程序认证尝试失败记录

    本来想用REST服务开发第三方的插件的,下面的文章说明REST API是非常好用的 https://technet.microsoft.com/zh-cn/library/jj164022(v=off ...

  5. [转][MEF插件式开发] 一个简单的例子

    偶然在博客园中了解到这种技术,顺便学习了几天. 以下是搜索到一些比较好的博文供参考: MEF核心笔记 <MEF程序设计指南>博文汇总 先上效果图 一.新建解决方案 开始新建一个解决方案Me ...

  6. ubuntu刪除升級后多余的内核

    列出所安装的内核 带有image的就是内核文件dpkg --get-selections|grep linuxlibselinux1 installlinux-386 installlinux-ima ...

  7. Linux经常使用命令-文件搜索命令-文件搜索命令find

    命令名称:find 命令所在路径:/bin/find 语法:find [搜索范围] [匹配条件] 功能描写叙述:文件搜索 演示样例 find /etc - name init 在文件夹/etc 中查找 ...

  8. Android-spinner

    Android-spinner 一 Adapter概念 spinner:下拉栏里面的TextView 指定系统spinner:在xml文件中面的spinner中的属性android:entries=& ...

  9. Powershell远程在Azure A7虚拟机执行Java JVM失败

    近期.使用Powershell脚本在A7 (8核,56G内存)配置的 Azure VM(Virtual Machine.虚拟机)上远程运行Java JVM时 (java.exe -version).总 ...

  10. Android:仿手机QQ好友动态的ListView

    1.介绍: 本博客使用XListView模仿Android版QQ好友动态的ListView效果.效果截图例如以下: 效果图1 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...