为了账号安全,请及时绑定邮箱和手机立即绑定

形形色色的下拉菜单

难度初级
时长 3小时21分
学习人数
综合评分9.57
145人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.5 逻辑清晰
  • 动画实现方法
    查看全部
  • JQuery库引用方法
    查看全部
  • 下拉菜单
    查看全部
  • 动画的三种实现方法
    查看全部
  • CSS实现下拉菜单显示和隐藏<br> 1、为避免鼠标移到li上时点击无效,将a标签设置成块级元素,padding控制间距;<br> 2、用display:none隐藏二级菜单(ul),用display:block显示二级菜单;<br> 3、用 #nav ul li:hover ul{display:block} 控制鼠标移到一级菜单时显示对应的二级菜单;<br> 4、absolute要配合top,left来使用;<br> 5、垂直居中使用height和lineheight一样来实现,水平居中使用text-align:center。
    查看全部
  • padding{0 value}宽度自适应
    查看全部
  • JS实现下拉菜单:<br> 1.先做好静态页面(下拉菜单要隐藏)<br> 2.给有下拉菜单的li元素添加事件(onmouseover,onmouseout),通过事件调用自定义函数,给函数传入触发事件的元素(li.getElementsByTagName("ul")[0]获取li对应的下拉菜单,再设置其display属性)
    查看全部
  • 如何在一级菜单下加下拉菜单: 1、在每一个要加下拉菜的li中,加入无序列表 2、先使用display:none隐藏下拉菜单,hover时使用display:block显示下拉菜单 3、将下拉菜单设置成绝对定位,定位参照物为其父级标签(tips:absolute,relative)
    查看全部
  • JS与JQ制作下拉菜单的比较
    查看全部
  • <style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ line-height:40px; text-align:center; position:relative; float:left; } a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none;margin-top:2px; background-color:#eee; } ul li ul{width:90px; position:absolute; display:none; } ul li:hover ul{display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">HELLO</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • 自适应高度 宽度用padding
    查看全部
  • $("#rList").on("click",function(){ if($("ul li").hasClass("active")){ $("ul li").css("visibility","hidden").removeClass("active"); }else{ $("ul li").css("visibility","visible").addClass("active"); } })
    查看全部
  • <script type="text/javascript"> window.onload = function(){ var isIE = !!window.ActiveXObject; /*只有当浏览器为IE时返回‘是’*/ var isIE6 = isIE && !window.XMLHttpRequest; /*是不是IE6,是的话支持XMLHttpRequest,不是的话不支持XMLHttpRequest判断为IE6以下版本*/ if(isIE6){ var Lis = document.getElementsByTagName("li") /*如果是IE6的话找到所有的"li"标签*/ for (var i =0 ; i < Lis.lengthl;i++){ /*循环语句*/ Lis[i].onmouseover = function(){ var u= this.getElementsByTagName("ul")[0]; if(u!=underfined){ u.style.display="block"; } } Lis[i].onmouseout = function(){ var u= this.getElementsByTagName("ul")[0]; if(u!=underfined){ u.style.display="none"; } } } } } </script>
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • 三级菜单制作大体步骤:<br> 1、一级菜单横向显示。<br> 2、去电列表项目符号。<br> 3、隐藏二级和三级菜单。(注:二级菜单是三级菜单的包含快,隐藏二级菜单时也隐藏了三级菜单) 4、鼠标滑过一级菜单时显示二级菜单、隐藏三级菜单 .top_nav li:hover ul{display:block;} .top_nav li:hover ul li ul{display:none;} 5、鼠标滑过二级菜单时显示三级菜单 .top_nav li ul li:hover ul{display:block;} 注:ul默认是向下瀑布流排列,实现三级菜单效果时,可以用position:relative;定义二级菜单,再用position:absolute;定义三级菜单,然后设置相应的偏移量即可。
    查看全部
  • overflow:auto;并不会在该元素上清楚浮动,它将清楚自己。意思就是说应用了overflow:auto;的元素,将会扩展到它需要的大小,以便包含它里面浮动的元素
    查看全部

举报

0/150
提交
取消
课程须知
1.您至少具备Html、Css相应的基础知识。 2.您须了解JavaScript和jQuery基础语法和引用方法;
老师告诉你能学到什么?
运用CSS、JavaScript和jQuery三种技术实现下拉菜单制作方法。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!