本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于CSS导航条菜单的实现(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。很多网页的导航条都会有小三角形,其实实现这个功能也挺简单。
拿菜鸟教程首页导航做个例子
首先写一个大的div_nav,而“首页”“菜鸟笔记”“菜鸟工具”“参考手册”等则作为div包含在div_nav中。div_nav背景色设置为对应的颜色。
背景色的设置代码如下:
1 2 3 4 | .blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
color:#fff;
background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}
|
即:
1 | .blue #slatenav ul li a:hover,.blue #slatenav ul li a.current
|
上图代码的注解为:
id为menu中的ul的li。也就是导航栏里的每一个元素。鼠标放上去后会出来的效果。
在后面又加了ul说明弹出的是一个ul元素
整个这里面的css就是规定这个ul元素里的样式。
说白了就是鼠标划过导航栏的效果
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover 代表鼠标划过
a:current应该就是代表获取焦点。
而小三角形也很好设置
1 2 3 4 5 6 7 8 9 | .blue #slatenav
{position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif)repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
}
|
通过background来设置"首页"等小p的背景图片。
而上文设置过鼠标滑过标签的效果,因此当鼠标滑到别的标签是,也会显示小三角形的背景。
鼠标滑过其他标签的时候:
好了,这样一个带小三角形的导航就做好了,至于其他的细节问题,可以自己慢慢调整。
注:代码中声明了文档的命名空间。
单独写<html>标签没有声明文档的命名空间,而加上xmlns="http://www.w3.org/1999/xhtml"的话,声明了文档的命名空间。声明了命名空间,浏览器在解析你的HTML文档的标签时,就会按照这个规范进行。一般使用时,不会感觉得出这二者有多大的区别。
特殊情况在于一些标签的解释上,比如xhtml的命名规范,要求标签都必须严格闭合,单标签的要在末尾加上"/",如果你使用了xhtml的命名规范,而在标签的书写上不按照规范来的话,有可能发生无法解析该标签的情况。所以,好的书写习惯是建议都加上结束标签。
附上源码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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=gb2312" />
<meta name= "keywords" content= " " />
<meta name= "description" content= " " />
<title>横版导航</title>
<link rel= "stylesheet" href= "style.css" type= "text/css" />
</head>
<body style= "text-align:center" >
<p> </p>
<p class = "blue" >
<p id= "slatenav" >
<ul>
<li><a href= "http://sc.chinaz.com/" title= "css menus" class = "current" >首页</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >菜鸟笔记</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >菜鸟工具</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >参考手册</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >用户笔记</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >测验/考试</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >本地书签</a></li>
<li><a href= "http://sc.chinaz.com/" title= "css menus" >登录</a></li>
</ul>
</p>
</p>
</body>
</html>
|
以上就是CSS导航条菜单的实现(附源码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css的优势是什么
响应式css前端框架有哪些
页面使用css的形式主要包括哪三种
css 怎么可以不继承样式
css中主要有哪三种选择符
css阴影效果如何实现
css keyframes 是什么
koala如何压缩css
css3跟css区别是什么
@keyframes是什么
更多相关阅读请进入《前端》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS导航条菜单的实现(附源码)