前端案例 - 导航条菜单的制作
每个网站都包含导航条菜单,在此做一些 HTML 和 CSS 基础回顾。
本文主要跟随课程完成导航栏菜单的制作,课程来源 imooc导航条菜单的制作。
推荐学习前端的朋友可以看看,简简单单一个小课程,对于刚有前端基础的人来说很友好,整体清晰易懂,逻辑通顺,后期稍微涉及一丢丢 JS,很不错。
垂直菜单栏
导航菜单用什么元素制作呢,通过之前学习的网页设计结构表现原则我们可以得知,导航目录条目性的语义 与 无序列表 非常接近,所以选用无序列表。
垂直菜单栏的整体结构如下:
HTML 代码:
<body><ul><li><a href="#">首页</a></li><li><a href="#">新闻快讯</a></li><li><a href="#">产品展示</a></li><li><a href="#">售后服务</a></li><li><a href="#">联系我们</a></li></ul>
</body>
CSS 样式:
* {margin: 0;padding: 0;font-size: 14px;
}
ul {list-style: none;width: 100px;
}
a {text-decoration: none;display: block;height: 30px;line-height: 30px;width: 100px;background-color: #ccc;margin-bottom: 1px;text-indent: 10px;
}
a:hover {background-color: #f60;color: #fff;
}
实现垂直菜单栏效果如下:
水平菜单栏
水平菜单栏如何制作,将垂直放平就是了,所以给 li 添加浮动,浮动后,我们将 ul 的宽度删掉,使 ul 宽度自己被撑起。
接下来对 a 链接文字位置修改居中即可,改动如下:
CSS 样式:
ul {list-style: none;
}
li {float: left;
}
a {...text-align: center;
}
水平菜单栏效果图如下:
伸缩菜单栏-改变高度
要求:当鼠标经过菜单项的时候,菜单的高度发生了变化。
首先想到的肯定是在:hover 的状态下改变 height。我们进行尝试。
a:hover {...height: 40px;
}
我们发现样式没有达到我们想要的向上增高的效果,那我们如何实现呢?
采用 margin-top:负值 的方法去实现。然后将文字的 line-height 修改正确即可。
代码如下:
ul {list-style: none;height: 50px;padding-left: 30px;border-bottom: 5px solid #f60;
}
li {float: left;margin-top: 20px;
}
a {text-decoration: none;display: block;height: 30px;line-height: 30px;width: 120px;background-color: #ccc;margin-bottom: 1px;text-align: center;
}
a:hover {background-color: #f60;color: #fff;margin-top: -10px;height: 40px;line-height: 40px;
}
菜单栏水平伸缩
水平伸缩,采用 JavaScript 脚本实现,JS 代码如下:
window.onload = function () {var aA = document.getElementsByTagName("a");for (var i = 0; i < aA.length; i++) {aA[i].onmouseover = function () {var This = this;This.time = setInterval(function () {This.style.width = This.offsetWidth + 8 + "px";if (This.offsetWidth > 160) {clearInterval(This.time);}}, 30);};aA[i].onmouseout = function () {var This = this;This.time = setInterval(function () {This.style.width = This.offsetWidth - 8 + "px";if (This.offsetWidth <= 120) {clearInterval(This.time);}}, 30);};}
};
效果如下:
总结
- Q: 通常用什么构建导航条菜单?
- A: 使用无序列表。
- Q: 如何将垂直菜单变为水平?
- A: 使用 float: left;
- Q: 制作改变高度延伸,用什么实现?
- A: 使用 margin-top: 负值;
- Q: JS 改变水平宽度时,this 表示什么?
- A: 表示当前 dom 元素,即 a 元素。
放在最后
如果您喜欢我的文章,拜托点赞+收藏+关注,博主会根据大家喜好来推出相关系列文章~
更多精彩内容也可以访问我的博客Aelous-BLog
前端案例 - 导航条菜单的制作相关推荐
- HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...
- css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
- WHMCS 6 如何修改导航条菜单(主菜单)
如果你刚升级了 WHMCS 6 ,你会发现导航条菜单连产品分类都没有. 如果你是做 WHMCS 模板开发的,你会发现 WHMCS 6 的主菜单已经不能直接在模板修改了. 那如何修改 WHMCS 6 导 ...
- 前端——菜鸟网站横向CSS导航条菜单:带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
- CSS导航条菜单:带小三角形
很多网页的导航条都会有小三角形,其实实现这个功能也挺简单. 拿菜鸟教程首页导航做个例子 首先写一个大的div_nav,而"首页""菜鸟笔记""菜鸟工具 ...
- Web前端案例——学成网首页制作
简易的学成网网站制作.代码均有注释,可以说十分新手向了. 相关知识:html+css,主要学习的是css的浮动布局.下一篇文章会在这个网页的基础上添加定位盒子. 运行效果图: html部分: < ...
- 前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
- [CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
- bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
最新文章
- 应用在机器学习中的聚类数据集产生方法
- jQuery中的$el是什么意思
- QT 在定义新的类型时候,注意了(定义了ReadXml),在实现的时候加上Qlabel
- pkpm板按弹性计算还是塑性_双向板按弹性方法还是按塑性方法计算
- postgresql c语言,任意语言访问PostgreSQL:C语言接口
- 信息学奥赛一本通(1211:判断元素是否存在)
- 基于JAVA+SpringMVC+Mybatis+MYSQL的手表销售系统
- 给创业前的你4点建议
- leetcode题目整理
- python读取excel_Python简单读取Excel示例
- Vue 返回记住滚动条位置详解
- 基于单片机的红外光电计数器(双探头)
- 目标检测——手把手带你实现SSD(Single Shot MultiBox Detector)训练和检测自己的数据集
- 函数的傅立叶展开掐死我吧_如果看了这篇文章你还不懂傅里叶变换,那就过来掐死我吧(二)...
- R数据分析——回归分析
- android按返回键和Home键都进入后台
- 公司企业网站怎么制作呢?这2种方式要了解
- 【AI达人创造营三期】在地平线X3上部署车牌识别系统
- Laya 【U3D场景的 .ls场景】 【Laya.URL.basePath远程加载】 【加载分包】,【进度条】
- Java中的多态,引用类型的转换