基于HTML5+CSS3的气泡式导航的实现

作者:未知

  摘要:导航是网页设计中的重要组成内容之一。应用HTML5设计网页过程中,恰当设置css属性可以实现特殊效果的导航菜单。该文在分析HTML5和CSS3技术优势特点上,以某一注册页面气泡式导航为例分析其实现原理,阐述其实现过程的关键代码,为其他技术人员提供参考。
  关键词:HTML5;CSS3;气泡式导航
  中图分类号:TP311 文献标识碼:A
  文章编号:1009-3044(2020)33-0220-02
  开放科学(资源服务)标识码(OSID):
  导航菜单是网页设计中的重要组成内容之一。通过导航,用户可以快速浏览访问到所需要的内容[1]。在HTML5中恰当设置css属性可以实现各种效果的导航菜单。在浏览网页(例如一些注册页面)时,我们经常会看到把鼠标放到导航上时,下面会出现小三角,当鼠标离开时,小三角随之消失,这一类的导航称为气泡式导航。本文在分析HTML5和CSS3技术优势特点上,以某一注册页面气泡式导航为例分析其实现原理,阐述了实现过程的关键代码,为其他网页设计人员提供参考。
  1 HTML5概述
  作为当前主流的Web前端开发技术,与HTMLI相比,HT-ML5的功能更加强大,对网页设计开发支持的力度更加强大,支持网页的功能更加全面[2],主要体现在统一规范处理语义,新增等语义化标签和属性,如、和的autofocus属性等,降低代码编写难度,简化开发程序,提高工作效率;提供强大而全面的API支持,来实现更加复杂多变的网页功能;无须任何特定工具和插件,HTML5通过设置自带的audio标签和video标签,就可以实现网页中音视频的顺利播放;新增canvas元素可绘制图像、制作动画。
  2 CSS3概述
  css( Cascading Style Sheets)即层叠样式表,是用于控制网页显示效果的技术[3],其可以有效地控制网页的布局、字体、颜色、背景和其他效果,美化网页。css3是css规范的最新版本,在css2.1的基础上增加了很多强大的新功能,如圆角功能、多背景、透明度、阴影等,正是这些新的功能,完美地帮助开发人员解决一些以前需要用复杂的JavaScript脚本、非语义标签才能完成的功能[4];其优势主要体现在增加边框属性,用border-color设置边框颜色,border-image设置边框图像,border-radius设置边框圆角,可以分别设置边框上、下、左、右四个方向不同属性,实现网页边框的线条感和立体感;设置CSS3属性实现渐变,让网页效果绚丽多变;运用CSS3强大的Animation属性设置图像的缩放、旋转等,实现网页中的动画效果;借助CSS3中的RGBA命令能够更改或重设元素的色彩与透明度,更易实现网页元素色彩等等。此外,在CSS3中给出伪元素的概念,是用来创建一些文档语言无法生成的虚拟元素[5]。比如运用::before描述在特定元素之前添加内容,运用::first-line描述特定元素的第一行文本等。
  随着网络技术的深入发展,网页设计与制作人员会综合HTML5和CSS3技术优势,以实现丰富多彩的网页效果。常见的有利用HTML5+CSS3技术进行响应式页面布局,让不同终端设备的用户获得更舒适的界面、更友好的体验;在HTML5+CSS3技术基础上结合Jsp脚本语言实现页面跨浏览器设计等。
  3 实现原理
  3.1功能描述
  气泡式导航具有一定的指示性,表现为当鼠标移动到导航某一栏目上时,相应栏目下面会有一个突起的小三角,指向特定的内容;鼠标离开后,该栏目还原为初始的状态。常用在一些注册页面、电商页面某一频道栏目等。本文设计的是某一注册页面的气泡式导航,其在谷歌浏览器下预览效果,如图所示。
  3.2 关键技术
  实现该气泡式导航关键之处有两点:一是导航下方突起的小三角,二是鼠标滑到导航栏目时,出现小三角;鼠标离开后,恢复原始状态。本文运用CSS3设置边框制作小三角,结合伪元素来实现,可分解为以下四步:
  第一步:生成三角形。将当前元素显示为块状元素,宽、高设置为0,设置border属性的大小(依据三角形大小确定)、线型是实线、颜色透明。
  第二步:显示指定方向的三角形。该气泡式导航需要取出下方的三角形,只需设置上边框的颜色,显示指向下方的三角形。在网页设计过程,根据实际需要设置上、下、左、右不同方向的三角形,设置下边框颜色显示指向上方的三角形,设置左边框颜色显示指向右方的三角形,设置右边框颜色显示指向左方的三角形。
  第三步,确定小三角位置。将position属性设为relative,left属性中间偏左一些,相对当前元素位置居中显示。
  第四步,鼠标滑过出现三角形,鼠标移开,小三角消失。当鼠标滑到导航栏目时,在a:hover后添加::after伪元素,在其后插入小三角。伪元素是虚拟元素,在文档中不存在,当鼠标移开导航后,小三角就自动消失了。
  4 实现过程
  在HTML5页面中应用气泡式导航时,先确定设置气泡式导航的版块,在其中插入无序列表制作导航栏,然后创建样式,定义合适的选择器美化列表,最后对于实现特定效果,设置合适属性。
  4.1设置导航栏目
  在HTML5页面的<cke:body>内的某一栏目或版块内,插入无序列表<ul>,每一列<li>内添加导航栏目,运用<a>设置超链接。参考HTML代码如下:
  <ul>
  <li><a data-cke-saved-href=”#” href=”#”>1验证身份信息<,a></li>   <li><a data-cke-saved-href=”#” href=”#”>2设置用户信息</a></li>
  <li><a data-cke-saved-href=’’#” href=’’#”>3完成</a></li>
  </ul>
  4.2 美化導航栏目
  创建<style>,在其内定义合适的选择器,如标签选择器或类选择器,美化列表:设置css属性清除列表默认样式,居中等;美化列表项:设置CSS属性向左浮动,让列表项水平呈现,宽度(所有列表项宽度和小于列表总宽度),背景色,文本颜色,文本居中,列表项居中等。参考HTML代码定义的标签选择器,如下:
  ul{
  /*无序列表样式*/
  list-style: none;/$清除默认样式*/
  margin:0 auto;/*居中*/
  width: 6lOpx;}/*列表宽*/
  ul lif
  /*每一列样式*/
  float: left;/*左浮动*/
  width: 200px;/*宽度*/
  height: 30px;/*高度* /
  background-color:#C7C3C3:/*背景色*/
  color: #000;/*文本颜色*/
  text-align: center;/*文本居中*/
  margin:0 lpx;/*居中*/
  line-height: 30px;】/*行高*/
  4.3 创建导航超链接样式
  在上面的<style>标签内,运用CSS3美化超链接:显示为块状,宽度和高度(与列表项宽高一样),清除超链接默认样式等;设置鼠标移动到超链接上背景色和文本颜色,并添加::after伪元素,在列表项中间生成指向下方的小三角。参考HTML代码如下:
  ulli a{
  display: block;/*显示为块状元素*/
  width: 200px; /*宽度*/
  height: 30px; / *高度*/
  text-decoration: none;/*去除下划线*/
  color: #000;1/*文本颜色*/
  ul li a:hoverf
  background-color: #0195d3;/*背景色*/
  color: #fff;】/*文本颜色*/
  ul li a:hover::after{/*鼠标滑到导航栏目,出现小三角*/
  display:block;/*显示为块状元素*/
  content:…’;/* 添加元素*/
  width:0:
  height:0;
  border: 8px solid transparent;
  border-top-color: #0195d3;/*生成下方小三角*/
  position:relative;
  left: 46%;1/*小三角居中*/
  5 结束语
  本文应用HTML5+CSS3技术所设计的气泡式导航代码简单,扩展性好,在实际工作中,网页制作人员可以根据实际情况调整、完善相关语句,以实现适合自身网页的导航效果。当前,HT-ML5与CSS3的有机结合在网页设计与制作领域占据着重要的位置,为广大网页设计人员拓展了网页设计视觉处理空间,提升了网页制作效率。同时,面对互联网技术的迅速发展,广大网页设计入员也要从浏览网页用户体验出发,巧妙运用HTML5+CSS3设计出界面更加友好、交互性更强的网页作品。
  参考文献:
  [1]杨花雨,郝胜华.DIV+CSS在实现导航下拉子菜单效果中的应用[J].电脑与电信,2019(7):43-45.
  [2]李微.HTML5+CSS3在网页设计中的特性及优势[J].信息与电脑(理论版),2018(22):13-15.
  [3]黄志刚.CSS3渐变教学难点深度解析[J].课程教育研究,2019 (47):242-243.
  [4]李雅萍,浅淡css3的新特性[J].电脑迷,2018(9):48.
  [5]赵文艳.深入挖掘css伪元素[J].信息通信,2019,32(10):281,283.
  【通联编辑:谢媛媛】
  作者简介:杨梅(1982-),女,江苏海安人,讲师,硕士,研究方向为网页设计与制作、信息化教育。</p>
转载注明来源:https://www.xzbu.com/8/view-15387641.htm

服务推荐