形形色色的下拉菜单_学习笔记

首页免费课形形色色的下拉菜单笔记

形形色色的下拉菜单

                
                zongran
            Web前端工程师

                    查看讲师更多课程 
                    zongran讲师的其他课程
                
商城分类导航效果
初级·63742
免费课程
                                
                难度初级
            
                时长 3小时21分
            
                学习人数
            
综合评分9.57
                            145人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.5
                                逻辑清晰

最热最新

夏小月 09:13

bootstrap的局限性是样式是写死的，要实现更丰富的响应式布局还要自己改CSS样式和布局

查看全部

6 采集收起来源：Bootstrap实现响应式菜单
2015-12-19
scbzyj

jQuery方法实现下拉菜单显示和隐藏 1、引入 jQuery 库（方法：下载到本地、引用在线服务器上的） 2、在子列表中添加类用于 jQuery 引用对象 3、事件函数体普通方法 $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) on 建议方法 $(".navmenu").on("mouseout",function(){ $(this).children("ul").hide(); }) hover 方法 $(".navmenu").hover(function(){ $(this).children("ul").toggle(); })

查看全部

4 采集收起来源：jQuery方法实现下拉菜单显示和隐藏
2018-03-22
Rstudy

@medai only sereen and(min-width:) 某值以上 @media only screen and(min-width:) and (max-width:) 两者之间 @medai only sereen and(max-width:) 某值以下

查看全部

3 采集收起来源：响应式菜单实现
2015-08-26
lanse_ah

.top-nav li:hover ul{ display: block; } .top-nav li:hover ul li ul { display: none; } .top-nav li ul li:hover ul { display: block; } JavaScript参考代码: <script type="text/javascript"> window.onload = function () { var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; if (isIE6) { var Lis = document.getElementsByTagName("li"); for (var i = 0; i < Lis.length; i++) { Lis[i].onmouseover = function () { var u = this.getElementsByTagName("ul")[0]; if (u != undefined) { u.style.display = "block"; } } Lis[i].onmouseout = function () { var u = this.getElementsByTagName("ul")[0]; if (u != undefined) { u.style.display = "none"; } } } } } </script>

查看全部

3 采集收起来源：编程练习
2018-03-22
scbzyj

ok?

查看全部

2 采集收起来源：编程练习
2015-03-20
scbzyj

下拉菜单布局 1、无序列表嵌套，使用链接包裹内容 2、列表项浮动，链接块级化 3、父级相对定位，子级绝对定位 CSS 实现下拉菜单显示和隐藏 li:hover ul{display:block}

查看全部

2 采集收起来源：HTML/CSS方法实现下拉菜单
2014-12-11
囧小宝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0p

查看全部

2 采集收起来源：HTML/CSS方法实现下拉菜单
2018-03-22
ahatom

英文导航替换掉中文导航

查看全部

2 采集收起来源：编程练习
2015-03-14
TraJoe_Wu

_margin 在IE6中能够识别 Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。 Zoom的使用方法： zoom : normal | number normal :　默认值。使用对象的实际尺寸 number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等

查看全部

2 采集收起来源：CSS3实现动画菜单尖角
2015-01-21
wxhuyu

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。

查看全部

2 采集收起来源：HTML/CSS方法实现下拉菜单
2018-03-22
慕桂英9800889 01:32

动画实现三种方法： 1.JS； 2.JQuery； 3.CSS；

查看全部

1 采集收起来源：动画菜单展示及原理分析
2016-04-17
木可我最大

1】一级菜单宽度自适应：a{ display:block; padding:0 10px;} 2】IE7下a需设置宽高 3】不受父元素样式的影响，选择器：ul li ul li a{} 4】由于二级菜单li受一级菜单li样式的控制已经浮动，故需清除浮动：ul li ul li{ float:none;}

查看全部

1 采集收起来源：HTML/CSS方法实现下拉菜单
2015-04-06
jeanneze 13:58

同时设置多种颜色盒子阴影，多组值之间使用“,”分隔，如，同时设置两组值--box-shadow:0 1px 0 #111,0 2px 0 #666;其中，属性值1表示水平阴影，属性值2表示垂直阴影，属性值3表示模糊距离（此值不是必须），属性值4表示阴影颜色

查看全部

1 采集收起来源：CSS3实现动画菜单
2014-12-01
青宁呀 15:08

有点复杂

查看全部

1 采集收起来源：HTML/CSS方法实现下拉菜单
2014-11-30
枫小白

ul li:hover ul{display:block;} 鼠标移到li上面下面那个ul显示

查看全部

1 采集收起来源：HTML/CSS方法实现下拉菜单
2014-11-30