zoukankan      html  css  js  c++  java
  • 多彩图标按钮动画下拉菜单

    支持IE、Chrome、火狐等多种浏览器。

    效果预览可以点击这里查看:http://keleyi.com/keleyi/phtml/menu/2.htm


    HTML源代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8" />
     5 <title>多彩图标按钮动画下拉菜单-柯乐义</title><base target="_blank" />
     6 <!-- Our CSS stylesheet file -->
     7 <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/menu/2/assets/css/styles.css" />
     8 <!-- Font Awesome Stylesheet -->
     9 <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/menu/2/assets/font-awesome/css/font-awesome.css" />
    10 <!-- Including Open Sans Condensed from Google Fonts -->
    11 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic" />
    12 <!--[if lt IE 9]>
    13 <script src="http://keleyi.com/keleyi/phtml/menu/2/assets/keleyi/html5.js"></script>
    14 <![endif]-->
    15 </head>
    16 
    17 <body>
    18 <div style="400px;height:90px;margin:0px auto"><a href="http://keleyi.com/a/bjac/cu727al8.htm">原文</a><h2>多彩图标按钮动画下拉菜单</h2></div>
    19 <nav id="colorNav">
    20 <ul>
    21 <li class="green">
    22 <a href="http://keleyi.com" class="icon-home"></a>
    23 <ul>
    24 <li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li>
    25 <li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li>
    26 <li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>
    27 <li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li>
    28 </ul>
    29 </li>
    30 <li class="red">
    31 <a href="http://keleyi.com/a/bjac/mt97p5y9.htm" class="icon-cogs"></a>
    32 <ul>
    33 <li><a href="http://keleyi.cn">三级菜单</a></li><li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">图片走马灯</a></li><li><a href="http://keleyi.com/a/bjac/90b914o0.htm">jQ的toggle</a></li>
    34 </ul>
    35 </li>
    36 <li class="blue">
    37 <a href="http://keleyi.com/a/bjac/otjlqc2l.htm" class="icon-twitter"></a>
    38 <ul>
    39 
    40 <li><a href="http://keleyi.com/a/bjac/lx3u7na0.htm">使a链无效</a></li><li><a href="http://keleyi.com/a/bjac/4prgqlce.htm">ready的简写</a></li>
    41 </ul>
    42 </li>
    43 <li class="yellow">
    44 <a href="http://keleyi.com/a/bjac/kjsrt3b0.htm" class="icon-beaker"></a>
    45 <ul>
    46 <li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">当前时间</a></li>
    47 <li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">替换图片</a></li><li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="jQuery友善的图片轮播(含首页和尾页)">图片轮播</a></li><li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">appendTo方法</a></li>
    48 </ul>
    49 </li>
    50 <li class="purple">
    51 <a href="http://keleyi.com/a/bjac/vrvmmqhu.htm" class="icon-envelope"></a>
    52 <ul>
    53 <li><a href="http://keleyi.com/about/">关于我们</a></li>
    54 </ul>
    55 </li>
    56 </ul>
    57 </nav>
    58 <footer>
    59 <h2><i>Keleyi:</i>柯乐义多彩图标按钮动画下拉菜单</h2>
    60 <a class="tzine" href="http://keleyi.com/a/bjac/cu727al8.htm">访问<i><b>柯乐义</b>Web前端资源</i>查看最新版本</a>
    61 </footer>
    62 
    63 </body>
    64 </html>

    点击这里下载

    原文:http://keleyi.com/a/bjac/cu727al8.htm

    汇总:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    Java异常处理和设计
    一次qps测试实践
    Alternate Task UVA
    Just Another Problem UVA
    Lattice Point or Not UVA
    Play with Floor and Ceil UVA
    Exploring Pyramids UVALive
    Cheerleaders UVA
    Triangle Counting UVA
    Square Numbers UVA
  • 原文地址:https://www.cnblogs.com/jihua/p/colormenu.html
Copyright © 2011-2022 走看看