maybe0218 发表于 2012-12-22 21:36:21

简单实用的菜单栏

<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]
查看完整版本: 简单实用的菜单栏