CSS3的一个简单导航栏实现

问说网 · 发布于 2017-04-08 · 字数15604 · 浏览 805 · 评论 0

上面是一个效果图,代码在下面:

html

XML/HTML Code复制内容到剪贴板
  1. <nav>
  2. <ul class=”nav-ul”>
  3. <li>
  4. <a href=”/”>首页</a>
  5. </li>
  6. <li>
  7. <a href=”/category/frontend”>Web前端</a>
  8. <ul>
  9. <li class=”nav-effect-1″>
  10. <a href=”/category/frontend/javascript”>JavaScript</a>
  11. </li>
  12. <li class=”nav-effect-2″>
  13. <a href=”/category/frontend/jq”>JQuery</a>
  14. </li>
  15. <li class=”nav-effect-3″>
  16. <a href=”/category/frontend/style”>CSS</a>
  17. </li>
  18. <li class=”nav-effect-4″>
  19. <a href=”/category/frontend/html”>HTML</a>
  20. </li>
  21. </ul>
  22. </li>
  23. <li>
  24. <a href=”/category/end”>后端</a>
  25. <ul>
  26. <li class=”nav-effect-1″>
  27. <a href=”/category/end/python-end”>Python</a>
  28. </li>
  29. <li class=”nav-effect-2″>
  30. <a href=”category/end/php”>PHP</a>
  31. </li>
  32. </ul>
  33. </li>
  34. <li>
  35. <a href=”/category/trivial”>琐碎杂类</a>
  36. <ul>
  37. <li class=”nav-effect-1″>
  38. <a href=”/category/trivial/linux”>Linux</a>
  39. </li>
  40. <li class=”nav-effect-2″>
  41. <a href=”/category/trivial/ajax”>Ajax</a>
  42. </li>
  43. </ul>
  44. </li>
  45. <li>
  46. <a href=”/category/life”>我的生活</a>
  47. <ul>
  48. <li class=”nav-effect-1″>
  49. <a href=”/category/life/college”>College</a>
  50. </li>
  51. <li class=”nav-effect-2″>
  52. <a href=”/category/life/review”>Review</a>
  53. </li>
  54. <li class=”nav-effect-3″>
  55. <a href=”/category/life/sentiment”>Sentiment</a>
  56. </li>
  57. </ul>
  58. </li>
  59. <li>
  60. <a href=”#”>关于我</a>
  61. <ul>
  62. <li class=”nav-effect-1″>
  63. <a href=”/contribute”>友情链接</a>
  64. </li>
  65. <li class=”nav-effect-2″>
  66. <a href=”/message”>留言板</a>
  67. </li>
  68. </ul>
  69. </li>
  70. </ul>
  71. </nav>

css:

CSS Code复制内容到剪贴板
  1. *{
  2. margin:0 auto;
  3. }
  4. body{
  5. background-color: #EEEEEE;
  6. font-family: Microsoft Yahei,Arial,sans-serif;
  7. }
  8. nav{
  9. width: 100%;
  10. background-color: #455552;
  11. position: relative;
  12. width: 650px;
  13. margin-top: 100px;
  14. }
  15. .nav-ul{
  16. list-style: none;
  17. }
  18. .nav-ul>li{
  19. display: inline-block;
  20. position: relative;
  21. }
  22. .nav-ul a{
  23. text-decoration: none;
  24. color: #FFF;
  25. display: inline-block;
  26. padding: 10px 20px;
  27. }
  28. .nav-ul a:hover{
  29. background-color: #1ABC9C;
  30. }
  31. .nav-ul a:hover+ul li{
  32. opacity:1;
  33. -webkit-transform: rotateY(0deg);
  34. transform: rotateY(0deg);
  35. }
  36. .nav-ul a+ul{
  37. list-style: none;
  38. position: absolute;
  39. transition: opacity 0.5s;
  40. -webkit-perspective: 800;
  41. -webkit-transform-style: preserve-3d;
  42. }
  43. .nav-ul a+ul:hover li{
  44. opacity: 1;
  45. -webkit-transform: rotateY(0deg);
  46. transform: rotateY(0deg);
  47. }
  48. .nav-ul a+ul li{
  49. position: relative;
  50. left: -40px;
  51. opacity: 0;
  52. width: 150px;
  53. transition: transform 1.5s,opacity 0.8s;
  54. }
  55. .nav-ul a+ul a{
  56. display: inline-block;
  57. width: 75%;
  58. background-color: rgba(26,188, 156, 0.75);
  59. }
  60. .nav-effect-1{
  61. transform: rotateY(90deg) translateX(10px);
  62. }
  63. .nav-effect-2{
  64. transform: rotateY(120deg) translateX(20px);
  65. }
  66. .nav-effect-3{
  67. transform: rotateY(150deg) translateX(30px);
  68. }
  69. .nav-effect-4{
  70. transform: rotateY(180deg) translateX(40px);
  71. }
  72. .nav-ul a+ul a:hover{
  73. background-color: rgba(69,85, 82, 0.75);
  74. }

查看demo:demo

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2016-07-15Intel Tick-Tock策略简介
  • 2016-09-24紫色背景扁平化iPhone5手机样机素材
  • 2016-10-03Blogify简约扁平化博客主题PSD模板
  • 2016-10-21多彩好看的淘宝销售标签箭头EPS素材
  • 2017-02-17问说网站长分享提升WordPress访问速度优化
  • 2017-04-01Wordpress固定链接伪静态的设置方法
  • 2017-04-04java中的Runable和Thread
  • 2017-04-05解决mysql无法远程访问的问题
  • 发布评论

    为您推荐

    Intel Tick-Tock策略简介
    问说网 · 发布于 2016-07-15

    Intel Tick-Tock策略简介

    tic-toc是Intel从2008年引入的一个CPU研发和生产策略。简单的说就是,每一代CPU都会对应tic或者toc。

    紫色背景扁平化iPhone5手机样机素材
    问说网 · 发布于 2016-09-24

    紫色背景扁平化iPhone5手机样机素材

    紫色背景扁平化iPhone5手机样机素材,扁平化样机素材免费下载分享,iPhone5手机样机PSD素材设计,扁平化手机素材投影,倾斜的手机样机素材。

    Blogify简约扁平化博客主题PSD模板

    Blogify简约扁平化博客主题PSD模板,Blogify是博客风格的完美小主题。利用Blogify是干净的,审美和简单的功能,确保你的博客有别于简约精致的休息…

    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    • Blogify简约扁平化博客主题PSD模板
    问说网 · 发布于 2016-10-03 · 浏览 1118 · 评论 0
    多彩好看的淘宝销售标签箭头EPS素材
    问说网 · 发布于 2016-10-21

    多彩好看的淘宝销售标签箭头EPS素材

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送
    问说网 · 发布于 2016-12-26

    恒创主机2017跨年盛典 主机/云服务器/独立服务器买就送

    恒创这次跨年促销,活动力度大,活动产品多。国内/香港/韩国/美国所有节点,新购/续费多重福利,满390元送小米VR眼镜。还可以免费抽奖,蓝牙耳机,小米充电宝等。

    问说网 · 发布于 2017-02-17

    问说网站长分享提升WordPress访问速度优化

    问说网创建也有5年了,最开始并不是使用的WordPress,是使用国内的DedeCMS开源程序,中间被黑客入侵了就换成了WordPress一直用到现在,随着文章…

    问说网 · 发布于 2017-04-01

    WordPress固定链接伪静态的设置方法

    今天,想着在我机器上测试一下wordpress,虽然之前也有这个开源的程序,可是一直没有安装呢,再加上最近一直忙于其他的工作,也忽略了不少,突然想建立一个属于自…

    问说网 · 发布于 2017-04-04

    java中的Runable和Thread

    在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口;Thread类是在java.lang包中定义的。一个类只要继承了T…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    495 评论
    2019 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2472

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2325

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2375

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1862

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2030

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!