html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

CSS3的一个简单导航栏实现_Div+Css教程

2015-08-05 13:19:36 [小 大] 已经帮助：人解决问题

 AcGHTML5中文学习网 - HTML5先行者学习网

 
 

201583185706841.jpg (266×269)AcGHTML5中文学习网 - HTML5先行者学习网

上面是一个效果图，代码在下面：AcGHTML5中文学习网 - HTML5先行者学习网

htmlAcGHTML5中文学习网 - HTML5先行者学习网

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:AcGHTML5中文学习网 - HTML5先行者学习网

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

（责任编辑：）
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助

CopyRight © 2011-2018 html5中文学习网 html5cn.Com.cn, All Rights Reserved. 京ICP备18048875号