html css js导航点击菜单后自动改变背景颜色

1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。

2、设置一个简易的导航栏。

3、加css 控制菜单的样式，并加入背景图片。

4、为li添加id，创建函数fun ，并传递传递参数。

5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"

6、加入改变文字大小的代码

element.style.color="black"

//修改文字大小

  element.style.fontSize="18px"

7、然后就完成了。

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

5、制作导航css：

以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。

第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。

未显示时属性为（ display: none）显示时属性为（display: block），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...

除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。

list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。

同样是通过overflow: hidden实现隐藏，但是是通过visibility:visible显示隐藏，动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block改为visibility:visible

以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。

比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden和visibility:visible实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。

---