91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS jquery圓角帶陰影的導航菜單代碼分享

發布時間：2020-08-11 08:52:30 來源：ITPUB博客 閱讀：149 作者：shanshuiboy 欄目：移動開發
  • CSS jquery制作實現的導航菜單效果，用戶交互做的不錯，當鼠標放在菜單上時，菜單背景懸停豪華，仔細看，本款菜單的文字還有陰影效果，菜單項的修飾同樣有陰影效果，這種陰影讓本款菜單的立體感有著很不錯的視覺效果。本款菜單適合做網站的一級導航，并沒有設計二級子菜單，企業站、公司站比較適合使用。

點擊(此處)折疊或打開

  1. <html>
  2. <head>
  3. <title>導航條效果- www.codesc.net </title>
  4. <style>
  5. .navigation{
  6.     position:relative;
  7.     margin:0 auto;
  8.     width:915px;
  9. }
  10. ul.menu{
  11.     list-style:none;
  12.     font-family:"微軟雅黑";
  13.     border-top:1px solid #bebebe;
  14.     margin:0px;
  15.     padding:0px;
  16.     float:left;
  17. }
  18. ul.menu li{
  19.     float:left;
  20. }
  21. ul.menu li a{
  22.     text-decoration:none;
  23.     background:#2d83db url(http://www.codesc.net/jscode/demoimg/201602/bgMenu.png) repeat-x top left;
  24.     padding:15px 0px;
  25.     width:128px;
  26.     color:#333333;
  27.     float:left;
  28.     text-shadow: 0 1px 1px #fff;
  29.     text-align:center;
  30.     border-right:1px solid #a1a1a1;
  31.     border-left:1px solid #e8e8e8;
  32.     font-weight:bold;
  33.     font-size:15px;
  34.     -moz-box-shadow: 0 1px 3px #555;
  35.     -webkit-box-shadow: 0 1px 3px #555;
  36. }
  37. ul.menu li a.hover{
  38.     background-image:none;
  39.     color:#fff;
  40.     text-shadow: 0 -1px 1px #000;
  41. }
  42. ul.menu li a.first{
  43.     -moz-border-radius:0px 0px 0px 10px;
  44.     -webkit-border-bottom-left-radius: 10px;
  45.     border-left:none;
  46. }
  47. ul.menu li a.last{
  48.     -moz-border-radius:0px 0px 10px 0px;
  49.     -webkit-border-bottom-right-radius: 10px;
  50. }
  51. ul.menu li span{
  52.     width:64px;
  53.     height:64px;
  54.     background-repeat:no-repeat;
  55.     background-color:transparent;
  56.     position:absolute;
  57.     z-index:-1;
  58.     top:80px;
  59.     cursor:pointer;
  60. }
  61. </style>
  62. </head>
  63. <style>
  64. body { margin:0px; padding:0px; background-color:#f0f0f0;}
  65. </style>
  66. <body>
  67. <div class="navigation">
  68.   <ul class="menu" id="menu">
  69.     <li><span class="ipod"></span><a href="" class="first">網站源碼</a></li>
  70.     <li><span class="video_camera"></span><a href="">CSS特效</a></li>
  71.     <li><span class="television"></span><a href="">菜單模板</a></li>
  72.     <li><span class="monitor"></span><a href="">圓角菜單</a></li>
  73.     <li><span class="toolbox"></span><a href="">菜單代碼</a></li>
  74.     <li><span class="telephone"></span><a href="">手機菜單</a></li>
  75.     <li><span class="print"></span><a href="" class="last">菜單動畫</a></li>
  76.   </ul>
  77. </div>
  78. <script type="text/javascript" src="http://www.codesc.net/ajaxjs/jquery-1.9.1.min.js"></script>
  79. <script type="text/javascript">
  80. $(function() {
  81.     var d=1000;
  82.     $('#menu span').each(function(){
  83.         $(this).stop().animate({
  84.             'top':'-17px'
  85.         },d+=250);
  86.     });
  87.     $('#menu > li').hover(
  88.     function () {
  89.         var $this = $(this);
  90.         $('a',$this).addClass('hover');
  91.         $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
  92.     },
  93.     function () {
  94.         var $this = $(this);
  95.         $('a',$this).removeClass('hover');
  96.         $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
  97.     }
  98. );
  99. });
  100. </script>
  101. </body>
  102. </html>
引用自原文：http://www.codesc.net/jscss/3332.shtml

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
秭归县| 高碑店市| 房山区| 拉孜县| 新营市| 文安县| 太原市| 昭觉县| 安达市| 虞城县| 湟源县| 望江县| 剑河县| 天祝| 镇安县| 大港区| 彭泽县| 紫阳县| 安化县| 迭部县| 临潭县| 景宁| 吉木乃县| 托里县| 北京市| 承德市| 乌拉特中旗| 弥渡县| 荔波县| 邵武市| 蚌埠市| 陇南市| 南康市| 同德县| 广饶县| 五家渠市| 郧西县| 武安市| 武汉市| 和静县| 宜兴市|