首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

Posted in HTML / CSS onMay 17, 2016

下拉菜单
先直接来看效果是怎样：
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

当鼠标移到选单之后，下方会展开并有其它说明内容，我这边是把展开的部份加上图片内容，让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样，所以我才取名为"贺联式选单"。

这样的效果其实只需要 HTML 及 CSS 配合就能做出来了，我们先来看 HTML 的部份：
检视原始码 HTML

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <ul>  
  3.   <li>  
  4.    <a class="t1" href="#">梅干桑   
  5.     <div>自我介绍</div>  
  6.    </a>  
  7.   </li>  
  8.   <li>  
  9.    <a class="t2" href="#">Photoshop   
  10.     <div>上课??!</div>  
  11.    </a>  
  12.   </li>  
  13.   <li>  
  14.    <a class="t3" href="#">Q ＆ A   
  15.     <div>问题讨论</div>  
  16.    </a>  
  17.   </li>  
  18.   <li>  
  19.    <a class="t4" href="#">男丁格尔</a>  
  20.   </li>  
  21.   <li>  
  22.    <a class="t5" href="#">人材   
  23.     <div>丁丁是人材</div>  
  24.    </a>  
  25.   </li>  
  26.   <li>  
  27.    <a class="t6" href="#">格言   
  28.     <div>好话大家说</div>  
  29.    </a>  
  30.   </li>  
  31.   <li>  
  32.    <a class="t7" href="http://www.wowgame.tw">WOWGame</a>  
  33.   </li>  
  34.  </ul>  
  35. </body>  

使用 UL 及 LI 来做选单的项目，每一个 LI 中的 A 连结是我们主要的选单内容，而其 DIV 是更进阶的描述内容，若不需要的话则可以不用加。因为我要让每个选单都有不同的背景图，所以还需要帮 A 连结都加一个独立的 class。

然后，我有 7 个 LI 选单项目，因此我还请梅干帮忙准备了 7 张图片(果然还是要专业的来)。接着就能开始动手写 CSS ?樱?br />检视原始码 CSS

CSS Code复制内容到剪贴板
  1. ul {   
  2.  margin: 0;   
  3.  padding: 0;   
  4.  list-style: none;   
  5. }   
  6.     
  7. ul li {   
  8.  float: left;   
  9. }   
  10.     
  11. ul li a {   
  12.  width: 100px;   
  13.  height: 50px;   
  14.  display: block;   
  15.  line-height: 50px;   
  16.  overflow: hidden;   
  17.  text-align: center;   
  18.  text-decoration: none;   
  19.  color: #fff;   
  20. }   
  21.     
  22. ul li a:hover {   
  23.  height: 150px;   
  24. }   
  25.     
  26. ul li a div {   
  27.  color: #fff;   
  28.  line-height: 16px;   
  29.  font-weight: bold;   
  30.  margin-top: 73px;   
  31.  padding-top: 7px;   
  32.  border-top: 1px dotted #fff;   
  33. }   
  34.     
  35. .t1 { background: #08f2d6 url(01.gif); }   
  36. .t2 { background: #1209f1 url(02.gif); }   
  37. .t3 { background: #a202e2 url(03.gif); }   
  38. .t4 { background: #f4e603 url(04.gif); }   
  39. .t5 { background: #55df07 url(05.gif); }   
  40. .t6 { background: #02a8f3 url(06.gif); }   
  41. .t7 { background: #f6025e url(07.gif); }  

这边用到的 CSS 语法都是很基础的，比较需要注意的是我们一开始 A 连结的 height 是 50px，所以超过的部份会因为 overflow 为 hidden 的关系而被隐藏起来；另外，当鼠标移到 A 连结后，再额外订了一个 a:hover { } 来把它的 height 撑高，因此原本看不到的背景部份就会显现出来了。

到这边就整个都完成了，一开始浏览时就只有一排的选单
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

当鼠标移到选项后就会显示完整的背景内容
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

且我们的选单一样是有超连结的功能，是不是很有趣呢！如果要让效果更优的话，当然还是需要 JavaScript 的配合才行唷！

弹起式页签选单
一样先直接来看效果是怎样：
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

跟上一个例子不同的是在此次是鼠标移到选单后会往上升，就象是突然弹起来一样。

这样的效果一样只需要 HTML 及 CSS 就能做出来了，我们先来看 HTML 的部份：

检视原始码 HTML

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <ul id="menu">  
  3.   <li><a href="#" class="home">首页</a></li>  
  4.   <li><a href="#" class="car">购物车</a></li>  
  5.   <li><a href="#" class="good">推荐商品</a></li>  
  6.   <li><a href="#" class="query">订单查询</a></li>  
  7.  </ul>  
  8. </body>  

同样是用 UL 及 LI 来做选单的项目，每一个 LI 中的 A 连结是我们主要的选单内容，且为了让每个选单都有不同的选单图片，所以还帮 A 连结都加一个独立的 class。

接着开始动手写 CSS ?樱?br />检视原始码 CSS

CSS Code复制内容到剪贴板
  1. #menu {   
  2.  margin: 20px 0 0;   
  3.  padding: 0;   
  4.  height: 62px;  /* 选单图片的高 */  
  5.  list-style: none;   
  6.  overflow: hidden;   
  7.  width: 432px;  /* 98 * 4 + 5 * 8 */  
  8.  border-bottom: 1px solid #ccc;   
  9. }   
  10. #menu li {   
  11.  float: left;   
  12.  padding: 0 5px;   
  13. }   
  14. #menu li a {   
  15.  display: block;   
  16.  width: 98px;  /* 选单图片的宽 */  
  17.  height: 62px;  /* 选单图片的高 */  
  18.  line-height: 62px; /* ie suck */  
  19.  text-indent: -9999px;   
  20.  margin-top: 31px; /* 需要设定为图片宽/2 */  
  21.  background-repeat: no-repeat;   
  22. }   
  23. #menu li a:hover {   
  24.  margin-top: 1px; /* 当鼠标移到选单上时... */  
  25. }   
  26. /* 帮每一个 A 连结都加入不同选单图片 */  
  27. .home {background:url(home.gif);}   
  28. .car {background:url(car.gif);}   
  29. .good {background:url(good.gif);}   
  30. .query {background:url(query.gif);}  

这边要注意的是 A 连结的 margin-top 是选单图片高的一半 - 31px，所以超过的部份就不会显示出来；另外，当鼠标移到 A 连结后，再额外订了一个 a:hover { } 来减少它的 margin-top，因此原本看不到的背景部份就会显现出来了。

到这边就整个都完成了，一开始浏览时就只有一排的选单
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

当鼠标移到选项后就会弹起来??~
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 #HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 #HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 #HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 #HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 #HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 #HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 #HTML / CSS
内置模块(1) 双人对弈(1) 限流(2) IP(1) tokenizer(1) 递归(1) Parser(1) 后端(1) 限速(1) tcp/ip(1)
You might like
十大催泪虐心动漫，你能坚持看到第几部?
2020/03/04 日漫
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php返回相对时间（如：20分钟前，3天前）的方法
2015/04/14 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
深入分析Cookie的安全性问题
2015/03/01 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python清除函数占用的内存方法
2018/06/25 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python循环实现n的全排列功能
2019/09/16 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
绿化先进工作者事迹材料
2014/01/30 职场文书
医学生个人求职信范文
2014/02/07 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书