html选择弹出列表实例,CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
下拉菜单先直接来看效果是怎样:
当鼠标移到选单之后,下方会展开并有其它说明内容,我这边是把展开的部份加上图片内容,让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样,所以我才取名为"贺联式选单"。
这样的效果其实只需要 HTML 及 CSS 配合就能做出来了,我们先来看 HTML 的部份:
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
梅干桑
自我介绍Photoshop
上课囉!!Q & A
问题讨论男丁格尔
人材
丁丁是人材格言
好话大家说WOWGame
使用 UL 及 LI 来做选单的项目,每一个 LI 中的 A 连结是我们主要的选单内容,而其 DIV 是更进阶的描述内容,若不需要的话则可以不用加。因为我要让每个选单都有不同的背景图,所以还需要帮 A 连结都加一个独立的 class。
然后,我有 7 个 LI 选单项目,因此我还请梅干帮忙准备了 7 张图片(果然还是要专业的来)。接着就能开始动手写 CSS 囉:
检视原始码 CSS
CSS Code复制内容到剪贴板
ul {
margin: 0;
padding: 0;
list-style:none;
}
ul li {
float:left;
}
ul li a {
width:100px;
height:50px;
display:block;
line-height:50px;
overflow:hidden;
text-align:center;
text-decoration:none;
color:#fff;
}
ul li a:hover {
height:150px;
}
ul li a div {
color:#fff;
line-height:16px;
font-weight:bold;
margin-top:73px;
padding-top:7px;
border-top:1pxdotted#fff;
}
.t1 {background:#08f2d6url(01.gif); }
.t2 {background:#1209f1url(02.gif); }
.t3 {background:#a202e2url(03.gif); }
.t4 {background:#f4e603url(04.gif); }
.t5 {background:#55df07url(05.gif); }
.t6 {background:#02a8f3url(06.gif); }
.t7 {background:#f6025eurl(07.gif); }
这边用到的 CSS 语法都是很基础的,比较需要注意的是我们一开始 A 连结的 height 是 50px,所以超过的部份会因为 overflow 为 hidden 的关系而被隐藏起来;另外,当鼠标移到 A 连结后,再额外订了一个 a:hover { } 来把它的 height 撑高,因此原本看不到的背景部份就会显现出来了。
到这边就整个都完成了,一开始浏览时就只有一排的选单
当鼠标移到选项后就会显示完整的背景内容
且我们的选单一样是有超连结的功能,是不是很有趣呢!如果要让效果更优的话,当然还是需要 JavaScript 的配合才行唷!
弹起式页签选单一样先直接来看效果是怎样:
跟上一个例子不同的是在此次是鼠标移到选单后会往上升,就象是突然弹起来一样。
这样的效果一样只需要 HTML 及 CSS 就能做出来了,我们先来看 HTML 的部份:
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
首页购物车推荐商品订单查询
同样是用 UL 及 LI 来做选单的项目,每一个 LI 中的 A 连结是我们主要的选单内容,且为了让每个选单都有不同的选单图片,所以还帮 A 连结都加一个独立的 class。
接着开始动手写 CSS 囉:
检视原始码 CSS
CSS Code复制内容到剪贴板
#menu{
margin:20px0 0;
padding: 0;
height:62px;/* 选单图片的高 */
list-style:none;
overflow:hidden;
width:432px;/* 98 * 4 + 5 * 8 */
border-bottom:1pxsolid#ccc;
}
#menuli {
float:left;
padding: 05px;
}
#menuli a {
display:block;
width:98px;/* 选单图片的宽 */
height:62px;/* 选单图片的高 */
line-height:62px;/* ie suck */
text-indent: -9999px;
margin-top:31px;/* 需要设定为图片宽/2 */
background-repeat:no-repeat;
}
#menuli a:hover {
margin-top:1px;/* 当鼠标移到选单上时... */
}
/* 帮每一个 A 连结都加入不同选单图片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.gif);}
这边要注意的是 A 连结的 margin-top 是选单图片高的一半 - 31px,所以超过的部份就不会显示出来;另外,当鼠标移到 A 连结后,再额外订了一个 a:hover { } 来减少它的 margin-top,因此原本看不到的背景部份就会显现出来了。
到这边就整个都完成了,一开始浏览时就只有一排的选单
当鼠标移到选项后就会弹起来囉~~
html选择弹出列表实例,CSS3制作炫酷的下拉菜单及弹起式选单的实例分享相关推荐
- js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- 纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册 整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
- html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
- dropdownlist三级联动怎么实现_Excel下拉菜单不会做?15秒教会你制作一二三级联动下拉菜单,从此做表不求人!...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
- dw二级联动下拉菜单插件 宋君墨_Excel下拉菜单不会做?15秒教会你制作一二三级联动下拉菜单,从此做表不求人!...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
- 动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
- CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- 纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
最新文章
- 程序员感悟----路该怎么走
- mysql 实时聚合分析,mysql累积聚合原理与用法实例分析
- c++11 字符串与int类型的转换
- 绕过web认证学习总结
- QT窗体控件自适应大小
- QInputDialog Multiple Inputs 输入多个变量的对话框
- 设置mac的全局命令
- 麒麟linux百度云,百度网盘 Linux 版发布,搭配优麒麟运行更完美!
- 深度学习之 OHEM (Online Hard Example Mining)
- 【华为云技术分享】解密如何使用昇腾AI计算解决方案构建业务引擎
- java update 8_版本任你发,我用Java 8!JDK的更新,改变了哪些你写代码的方式?...
- Java-ReentrantLock-NonfairSync/FairSync
- poj 3984 迷宫问题(bfs 打印路径)
- uboot移植——uboot的硬件驱动部分
- 如何让移动硬盘在Mac和Windows上通用使用
- 电脑自动关机后文件丢失,如何恢复
- ecu故障现象_案例-报ECU系统软件重置故障处理方案
- 嵌入式--深入理解单片机(一)单片机程序是如何运行起来的以及单片机的ROM和RAM
- 覃卫平java,湖南省职业教“十一五”省级重点建设项目验收通过的项目.doc
- lastfm 1k user 数据集简介