导航条菜单的制作_技术问答

首页免费课导航条菜单的制作问答

导航条菜单的制作

全部评论问答未解决精华

这人不懒_学习刻苦

没javascript的童鞋们，用这个方法吧
width: 140px;
margin-top: -10px;
line-height: 40px;

0 5-1 伸缩菜单的制作——水平方向

2017-06-05

这人不懒_学习刻苦

语法一脸懵逼！虽然有点C语言基础看到这教程思路能看懂！

0 5-1 伸缩菜单的制作——水平方向

2017-06-05

clinna

文本居中推荐使用text-align:center

0 1-1 垂直菜单的制作

2017-06-05

慕哥7472598

虽然感觉这个js事件做伪类hover能做的事完全没有必要，还不能平稳退化；css更适合，但能加深对原生js的理解也是不错的！！！1

1 5-1 伸缩菜单的制作——水平方向

2017-06-04

风飘叶摇

我是看完JS进阶才发现还有这个课程，纯粹想练习下CSS排版的，居然发现还有JS！
首先，下拉菜单不应该设置高度，预防没那么多选项或者选项更多；其次那么复杂的JS代码就为了实现个CSS一句话能实现的效果，这违背了学习IT的初衷，IT要求的就是效率！
我的实现思路是，下拉菜单的过渡效果交给CSS，隐藏显示交给JS。
其实，都可以直接用CSS实现的，连JS都用不上。
首先设置.subNav的display为none;去除高度限制；然后设置a:hover>.subNav{dispaly:block};即可实现鼠标移入即显示下拉菜单的效果。

0 6-2 编程挑战

2017-06-01

小白鼠丨

为啥孤月还那么多人赞。自己写写不就知道行不行了么

3 1-3 编程练习

2017-06-01

小董君同学

.nav > li:hover .subNav{
height:120px;
}一行CSS代码即可，但没有动的过程，只有结果，如果要有动的过程就需要css3

0 6-2 编程挑战

2017-06-01

小董君同学

a 设置成块级元素之后，文字依然能居中，证据在此 https://codepen.io/taosang1992/pen/qmzOqJ。
想一想就明白了，h1~h6，p这都是块级元素，不是照样可以居中，因为居中的不是元素本身，而是里边的字。

0 1-3 编程练习

2017-06-01

小董君同学

0 1-3 编程练习

2017-06-01

qq_天子道_0

a.on, a:hover { background: #F60; color: #fff; width:160px; }

0 5-2 编程练习

2017-05-31

qq_天子道_0

ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px;
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}

0 5-2 编程练习

2017-05-31

qq_天子道_0

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
CSS3里面的过渡效果就可以实现，暂时不需要javascript，可以去将上一段代码拿去复制试试...随便建立一个div就可以了

4 5-1 伸缩菜单的制作——水平方向

2017-05-31