一步一步的学习,后面再做个综合页面
1.当前页面高亮显示的导航栏
首先是HTML代码,很简单,ul+li实现菜单
<!...动态添加定位效果了
js里面这样考虑,页面跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果
需要注意的就是如何获取URL,如何从URL里面查找出href信息
$(function...}else {
//默认主页高亮
$(".list li a[href^='index']").addClass("on");
}
});
效果图
2.划入自动切换的导航条...,这样的话就可以垂直分布,再给a设置一个transition,所谓的动画,就是划入后改变把a上移,再给a加个边框好观察,看下图
最后想实现效果,就给包裹菜单的div设置一个溢出隐藏属性即可
*{...子菜单4
接下来设置样式,既然是子菜单,就要脱离文档页面,所以使用absolute