简单实用的菜单栏
<div id="cnblogs_post_body">黄金周马上要到了,有点小小的激动了,不过还是要先克制一下,做好手上的工作。今天要分享给大家的是,基于JQuery的简单实用的菜单栏的实现。菜单栏相信大家都不会陌生,但是如何做好一个菜单栏,相信方法肯定也有很多,条条大道通罗马,这里仅仅发表一下个人的想法。话不多说,进入今天的主题,首先是今天的HTML页面代码,依旧朴实无华:
<div class="cnblogs_code" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_8a3906dd-180d-4506-b86f-d3ef430d1724" class="cnblogs_code_hide"><!DOCTYPE HTML><html><head> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <title>JQuery Project</title> <link type="text/css" rel="Stylesheet" href="Styles/myStyle.css" /> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="Scripts/myJSFile.js"></script></head><body id="page"> <div id="menu1"> <ul> <li> <span class="menuimg"></span> File <ul> <li><span class="NF"></span>New</li> <li><span class="OF"></span>Open</li> <li><span class="AF"></span>Add</li> <li><span class="CF"></span>Close</li> <li><span class="EF"></span>Exit</li> </ul> </li> <li> <span class="menuimg"></span> Edit <ul> <li><span class="CE"></span>Cut</li> <li><span class="CP"></span>Copy</li> <li><span class="PE"></span>Paste</li> <li><span class="DE"></span>Delete</li> <li><span class="SE"></span>Select</li> </ul> </li> <li> <span class="menuimg"></span> View <ul> <li><span class="DV"></span>Designer</li> <li><span class="TV"></span>Toolbox</li> <li><span class="VT"></span>Toolbars</li> <li><span class="MV"></span>Markup</li> <li><span class="EV"></span>Error List</li> </ul> </li> </ul> </div> <br /></body></html>
页:
[1]