第二十七篇 导航栏和内容块
导航栏和内容块
上节课留下了一个小练习：
老师做了一份，但是没有图片图标，所以代码里没有用到 img 标签。
在写之前，我们要分析吧，这个页面，难度只有左侧的导航栏。因为动态！
我们可以用到jQuery的mouseover()移入方法 和 mouseout()移出方法，还有click()点击方法，点击一级菜单，弹出二级菜单，老师用的是slideToggle()方法，jQuery特效效果，滑动效果。
好啦，光说怎么好学？我们看代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>综合之前的知识，写一个动态页面</title> <!--使用jQuery一定不要忘记引用jQuery文件--> <script src="../js/jquery-1.12.2.min.js"></script> <style> html,body{height: 100%;margin: 0;} #div0{ /*给最外层div宽度，然后居中显示*/ width: 1360px; margin: 0 auto; height: 100%; } #left{ height: 100%; position: fixed; float: left; background-color: #393D49; width: 15%; color:#d9d9d9; padding:0 10px; } .rit{ float: right; } .f1{ font-size: 21px; } .dd{ padding: 10px 0; } .f2{ display: none; } .f3{ padding:10px 0 10px 30px; font-size:17px; } .a{ background-color: #000; color:#fff; font-weight: 700; } .b{ background-color: #009688; color:#fff; cursor: pointer; } #center{ float: right; width: 83%; } #c1{ float: left; width: 100%; margin-top: 20px; padding-bottom:10px; border-bottom:1px solid #dedede; } #a1{ float: left; background-color: #1AA094; color:#fff; padding:10px; text-decoration: none; font-size: 12px; } #f1{ float: right; } #f1 span{ font-size: 14px; border: 1px solid #dedede; font-weight: 700; background-color: #FBFBFB; padding:5px 15px; } #g{ font-size: 15px; border: 1px solid #dedede; padding:3px 15px 4px 15px; margin-left: -9px; } #su{ color:#fff; background-color: #1AA094; border: 1px solid #dedede; margin-left: -5px; padding:6px 7px 5px 7px; } #ta{ float: left; width: 100%; margin-top:20px; } #ta th{ background-color: #F2F2F2; border: 1px solid #dedede; } td{ border: 1px solid #dedede; text-align: center; } </style> </head> <body> <!--给一个最外层div控制宽度，考虑到各位同学和老师电脑分辨率不一样，就演示一下1360px宽度--> <div id="div0"> <div style="float:left;width: 100%;height: 100%;"> <!--这个left div，是左侧导航栏。--> <div id="left"> <!--class="f1" 的都是一级菜单--> <div class="f1"> <div class="dd"> 系统配置 <span class="rit">▼</span> </div> </div> <!--class="f2" 的都是二级菜单--> <div class="f2"> <!--二级菜单里，划分--> <div class="f3">葫芦娃</div> <div class="f3">西游记</div> <div class="f3">三国</div> </div> <div class="f1"> <div class="dd"> 菜单配置 <span class="rit">▼</span> </div> </div> <div class="f2"> <div class="f3">左导航栏</div> <div class="f3">顶导航栏</div> </div> <div class="f1"> <div class="dd"> 内容管理 <span class="rit">▼</span> </div> </div> <div class="f2"> <div class="f3">文章管理</div> <div class="f3">评论管理</div> </div> <div class="f1"> <div class="dd"> 用户管理 <span class="rit">▼</span> </div> </div> <div class="f2"> <div class="f3">普通用户</div> <div class="f3">管理员</div> <div class="f3">权限组</div> <div class="f3">会员等级</div> </div> <div class="f1"> <div class="dd"> 记录管理 <span class="rit">▼</span> </div> </div> <div class="f2"> <div class="f3">聊天记录</div> <div class="f3">登录记录</div> <div class="f3">交易记录</div> </div> <div class="f1"> <div class="dd"> 扩展管理 <span class="rit">▼</span> </div> </div> <div class="f2"> <div class="f3">钩子</div> <div class="f3">插件</div> </div> </div> <!--以上是左侧导航栏--> <!--以下是中间内容部分--> <div id="center"> <div id="c1"> <a id="a1" href="javascript:;">添加用户</a> <form id="f1" action="#" method="post"> <span>关键字</span> <input id="g" type="text" placeholder="请输入关键字"/> <input id="su" type="submit" value="搜索"/> </form> </div> <table cellspacing="0" id="ta"> <tr> <th>ID</th> <th>用户名</th> <th>手机</th> <th>邮箱</th> <th>状态</th> <th>创建时间</th> <th>最后登录时间</th> <th>最后登录IP</th> <th>操作</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> <!--以上是中间内容部分--> </div> </div> <!--以下是写 js --> <script> var a = $(".f1"); //将此类传给我们声明的a来控制 //鼠标移入一级菜单，添加类 a.mouseover(function (){ //addClass()方法是添加此类 $(this).children(".dd").addClass("a"); }); //鼠标移入一级菜单，删除类 a.mouseout(function (){ //removeClass()方法是删除此类 $(this).children(".dd").removeClass("a"); }); //鼠标点击一级菜单，弹出相应的二级菜单 a.click(function (){ //先隐藏所有二级菜单并且改变后面的内容 a.next().slideUp(); a.find(".rit").text('▼'); //判断它的内容，然后做出修改 if($(this).find(".rit").text() == '▼'){ $(this).find(".rit").text('▲'); } else{ $(this).find(".rit").text('▼'); } //现在当前一级菜单下面的二级，使用的是滑动效果 取反向 $(this).next().slideToggle(); }); //以下是二级菜单的 样式 var b =$(".f3");//将此类传给我们声明的b来控制 //移入时候，增加样式 b.mouseover(function (){ $(this).addClass("b"); }); //移出时候，删除样式 b.mouseout(function (){ $(this).removeClass("b"); }); </script> </body> </html>
260行左右的代码，如果我们使用外部css和js，那么html页面的代码就会减少很多。因为老师是演示，就不躲躲藏藏的，就全写在页面上。 同学们重点注意看，左侧导航栏，一级菜单和二级菜单的关系。
老师用到的是jQuery，同学们如果直接copy过去，主要jQuery文件的引用和路径
第二十七篇 导航栏和内容块
