导航栏和内容块

上节课留下了一个小练习：

老师做了一份，但是没有图片图标，所以代码里没有用到 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文件的引用和路径

第二十七篇导航栏和内容块

转载于:https://www.cnblogs.com/longfeng995/p/7597147.html

第二十七篇导航栏和内容块相关推荐

微信小程序 - 实现导航栏和内容上下联动功能
今日给大家分享一下如何实现导航栏(nav)和内容部分上下联动(相关代码模块我已单独整理放到github上面了,欢迎前来start). github地址:https://github.com/sun ...
学完css，做了一个csdn导航栏（一步一步做csdn导航栏，内容满满）
学完css,做了一个csdn导航栏,内容满满步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示知识点完整代码番外:本来打算做 ...
navbar fixed top.css,Bootstrap个人博客给nav设置navbar-fixed-top定位后导航栏遮盖内容完美解决方案！...
这也是我在使用Bootstrap3开发完美解决方案一:使用两个导航占位大致意思就是给页面设置两个导航nav一个是空的导航栏一个则是设置navbar-fixed-top的导航栏 .......... ...
Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
Python之路(第二十七篇) 面向对象进阶：内置方法、描述符
一.__call__ 对象后面加括号,触发执行类下面的__call__方法. 创建对象时,对象 = 类名() :而对于 __call__ 方法的执行是由对象后加括号触发的,即:对象() 或者类()( ...
小程序导航栏与内容区上下联动的实现
前言之所以把这个功能写出来,是经常看到小伙伴问类似的问题,在这里就详细讲解下整个实现过程,虽然没涉及到什么难点,但希望可以帮助到对这方面还有困惑的朋友. 使用框架及技术 mpvue官方文档小程序官 ...
单片机怎么跳出循环_自学单片机第二十七篇：矩阵按键的硬件测试
我们继续来说矩阵按键的问题,这次是用在实际电路中的.在仿真中我们没有发现问题,但是文章最后我提出了,这个电路在实际应用中一定是存在问题的,那么问题在哪里呢? 这是我们分析的电路. 前几篇我们也对硬件进 ...
Android UI开发第二十七篇——实现左右划出菜单
年前就想写左右滑动菜单,苦于没有时间,一直拖到现在,这篇代码实现参考了网上流行的SlidingMenu,使用的FrameLayout布局,不是扩展的HorizontalScrollView. 程序中自 ...
第二十七篇网页数据解析三种方法: 正则表达--BeautifulSoup--xpath 满满的干货
心得: 生活不允许自己懈怠自己,革命尚未成功,同志还须努力,有句话说的好,你尽管努力,剩下的交给天意. 我们从网页上抓取的原始数据大多都是html的数据格式,那如何从html中提取想要的字符串,得需要 ...

第二十七篇导航栏和内容块

导航栏和内容块

第二十七篇导航栏和内容块相关推荐

最新文章

热门文章

第二十七篇 导航栏和内容块

导航栏和内容块

第二十七篇 导航栏和内容块相关推荐

最新文章

热门文章

第二十七篇导航栏和内容块

第二十七篇导航栏和内容块相关推荐