程序博客网 > 解码软件下载

html css 仿微信底部自定义菜单

来源：互联网 发布：解码软件下载 编辑：程序博客网 时间：2024/05/20 21:42

        最近几个月一直从事微信开发,从刚开始的懵懂渐渐成长了一点。今天觉得微信底部自定义菜单,如果能在html的页面上也能显示就好了.

记得以前看过某个网页有类似效果.查找了该网页的css.  ok现在html css 实现微信自定义菜单效果.

不多说直接上代码。

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  * 仿微信自定义菜单 
  3.  *  
  4.  * @author xuyw 
  5.  * @email xyw10000@163.com 
  6.  * @date 2014-07-27 
  7.  */  


[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <link rel="stylesheet" type="text/css" href="menu.css" media="all">  
  10.  </head>  
  11.   
  12.  <body>  
  13.  <div class="bg">  
  14.                 <img src="imgs/home-default17.jpg" width="100%" height="100%;">  
  15.             </div>  
  16. <div data-role="widget" data-widget="nav4" class="nav4">  
  17.             <nav>  
  18.                 <div id="nav4_ul" class="nav_4">  
  19.                     <ul class="box">  
  20.                                 <li>  
  21.                                                                     <a href="javascript:;" class=""><span>关于我们</span></a>  
  22.                                                                       
  23.                                   
  24.                                                                     <dl>  
  25.                                                                                     <dd>  
  26.                                                                                                     <a href="#"><span>电话</span></a>  
  27.                                                                                             </dd>  
  28.                                                                                     <dd>  
  29.                                                                                                     <a href="#"><span>地址</span></a>  
  30.                                                                                             </dd>  
  31.                                                                                     <dd>  
  32.                                                                                                     <a href="#"><span>在线客服</span></a>  
  33.                                                                                             </dd>  
  34.                                                                                     <dd>  
  35.                                                                                                     <a href="#"><span>在线QQ</span></a>  
  36.                                                                                             </dd>  
  37.                                                                             </dl>  
  38.                                                             </li>  
  39.                                                                                                     <li>  
  40.                                                                     <a href="javascript:;" class=""><span>电商</span></a>  
  41.                                                                       
  42.                                   
  43.                                                                     <dl>  
  44.                                                                                     <dd>  
  45.                                                                                                     <a href="#"><span>微信会员卡</span></a>  
  46.                                                                                             </dd>  
  47.                                                                                     <dd>  
  48.                                                                                                     <a href="#"><span>微社区</span></a>  
  49.                                                                                             </dd>  
  50.                                                                                     <dd>  
  51.                                                                                                     <a href="#"><span>微投票</span></a>  
  52.                                                                                             </dd>  
  53.                                                                                     <dd>  
  54.                                                                                                     <a href="#"><span>微调研</span></a>  
  55.                                                                                             </dd>  
  56.                                                                             </dl>  
  57.                                                             </li>  
  58.                                                                                                         <li>  
  59.                                                                     <a href="javascript:;" class="on"><span>会员专区</span></a>  
  60.                                                                       
  61.                                   
  62.                                                                     <dl>  
  63.                                                                                     <dd>  
  64.                                                                                                     <a href="#"><span>微商城</span></a>  
  65.                                                                                             </dd>  
  66.                                                                                     <dd>  
  67.                                                                                                     <a href="#"><span>微餐饮</span></a>  
  68.                                                                                             </dd>  
  69.                                                                                     <dd>  
  70.                                                                                                     <a href="#"><span>微团购</span></a>  
  71.                                                                                             </dd>  
  72.                                                                                     <dd>  
  73.                                                                                                     <a href="#"><span>微汽车</span></a>  
  74.                                                                                             </dd>  
  75.                                                                             </dl>  
  76.                                                             </li>  
  77.                                                                                               
  78.                                                 </ul>  
  79.                 </div>  
  80.             </nav>  
  81.             <div id="nav4_masklayer" class="masklayer_div on"> </div>  
  82.             <script src="nav4.js"></script>  
  83.             <script type="text/javascript">  
  84.                 nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));  
  85.             </script>  
  86.         </div>  
  87.                                                                   
  88.  </body>  
  89. </html>  

css

[css] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. *{padding:0; margin:0;}  
  2. .bg {  
  3. position: absolute;  
  4. z-index: -1;  
  5. top: 0;  
  6. left: 0;  
  7. right: 0;  
  8. bottom: 0;  
  9. opacity: 0.8;  
  10. }  
  11. ul, ol, li, dl {  
  12. list-style-type: none;  
  13. }  
  14. .box {  
  15. width: 100%;  
  16. display: -webkit-box;  
  17. display: -moz-box;  
  18. -webkit-box-orient: horizontal;  
  19. -moz-box-orient: horizontal;  
  20. -webkit-box-sizing: border-box;  
  21. -moz-box-sizing: border-box;  
  22. }  
  23. .box > * {  
  24. -webkit-box-flex: 1;  
  25. -moz-box-flex: 1;  
  26. }  
  27. a:link, a:visited {  
  28. color: #575757;  
  29. text-decoration: none;  
  30. }  
  31. a {  
  32. text-decoration: none;  
  33. -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);  
  34. }  
  35. a:link, a:visited {  
  36. color: #575757;  
  37. text-decoration: none;  
  38. }  
  39. a {  
  40. text-decoration: none;  
  41. -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);  
  42. }  
  43.   
  44. .nav4{  
  45.     height:45px;  
  46. }  
  47. .nav4 ul{  
  48.     position:fixed;  
  49.     z-index:200;  
  50.     bottom:0;  
  51.     left:0;  
  52.     width:100%  
  53. }  
  54. .nav4 li{  
  55.     border:1px solid rgba(190,190,190,1);  
  56.     height:45px;  
  57.     border-bottom:0;  
  58.     border-right:0;  
  59.     position:relative;  
  60.     -webkit-box-shadow:inset 0 0 3px #fff;  
  61. }  
  62. .nav4 li:nth-of-type(1){border-left;0;}  
  63. .nav4 li>a{  
  64.     font-size:15px;  
  65.     -webkit-box-sizing:border-box;  
  66.     box-sizing:border-box;  
  67.     /*border:1px solid #f9f8f9;*/  
  68.     -webkit-tap-highlight-color:rgba(0,0,0,0);  
  69.     border-bottom:0;  
  70.     display:block;  
  71.     line-height:45px;  
  72.     text-align:center;  
  73.     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc), color-stop(35% ,#ededed), color-stop(50%, #e3e3e3) );  
  74. }  
  75. .nav4 li>a:only-child span{  
  76.     background:none;  
  77.     padding-left:0;  
  78. }  
  79. .nav4 li>a.on + dl{  
  80.     display: block;  
  81. }  
  82. .nav4 li>a span{  
  83.     color: #4f4d4f;  
  84.     display: inline-block;  
  85.     padding-left: 15px;  
  86.     background: url(imgs/1.svg#2) no-repeat 4px 18px;  
  87.     -webkit-background-size: 9px auto;  
  88.     text-shadow:0px 1px 0px #ffffff;  
  89. }  
  90. /***********************/  
  91. .nav4 dl{  
  92.     display:none;  
  93.     position:absolute;  
  94.     z-index:220;  
  95.     bottom:60px;  
  96.     left:50%;  
  97.     width:100px;  
  98.     margin-left:-50px;  
  99.     background:red;  
  100.     /*min-height:100px;*/  
  101.     background:#e4e3e2;  
  102.     /*border:1px solid #afaeaf;*/  
  103.     border-radius:5px;  
  104.     -webkit-box-shadow:inset 0 0 3px #fff;  
  105.     background:url(imgs/2.svg#3) no-repeat center center;  
  106.     -webkit-background-size:100%;  
  107.     background-size:100%;  
  108. }  
  109. /*, .nav4 dl:after*/  
  110. .nav4 dl:before{  
  111.     content:"";  
  112.     display:inline-block;  
  113.     position:absolute;  
  114.     z-index:240;  
  115.     bottom:0;  
  116.     left:50%;  
  117.     /*width:0; 
  118.     height:0; 
  119.     border:8px solid red; 
  120.     border-color:#afaeaf transparent transparent transparent; 
  121.     margin-left:-8px; 
  122.     margin-bottom:-16px;*/  
  123.     width:10px;  
  124.     height:8px;  
  125.     background: url(imgs/1.svg#2) no-repeat center -55px;  
  126.     -webkit-background-size: 10px auto;  
  127.     bottom: -7px;  
  128.     margin-left: -5px;  
  129. }  
  130. /*.nav4 dl:after{ 
  131.     z-index:241; 
  132.     border-color:#e4e3e2 transparent transparent transparent; 
  133.     margin-bottom:-15px; 
  134. }*/  
  135. .nav4 dl dd{  
  136.     line-height:45px;  
  137.     text-align:center;  
  138.     background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8)));  
  139.     background-size:80% 1px;  
  140.     background-repeat:no-repeat;  
  141.     background-position: center bottom;  
  142.     /*background: url(imgs/3.svg#4) no-repeat center bottom; 
  143.     -webkit-background-size:100px 1px;*/  
  144. }  
  145. .nav4 dl dd:last-of-type{  
  146.     background:none;  
  147. }  
  148. .nav4 dl dd a{  
  149.     font-size: 15px;  
  150.     display:block;  
  151.     color:#4f4d4f;  
  152.     text-shadow:0px 1px 0px #ffffff;  
  153.     white-space: pre;  
  154.     overflow: hidden;  
  155.     text-overflow: ellipsis;  
  156. }  
  157. .nav4 .masklayer_div{  
  158.     display: none;  
  159.     position: fixed;  
  160.     top: 0;  
  161.     left: 0;  
  162.     width: 100%;  
  163.     height: 100%;  
  164.     z-index: 180;  
  165.     background: rgba(0,0,0,0);  
  166. }  
  167. .nav4 .masklayer_div.on{display: block;}  
js

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. var nav4 =(function(){  
  2.     bindClick = function(els, mask){  
  3.         if(!els || !els.length){return;}  
  4.         var isMobile = "ontouchstart" in window;  
  5.         for(var i=0,ci; ci = els[i]; i++){  
  6.             ci.addEventListener("click", evtFn, false);  
  7.         }  
  8.   
  9.         function evtFn(evt, ci){  
  10.             ci =this;  
  11.             for(var j=0,cj; cj = els[j]; j++){  
  12.                 if(cj != ci){  
  13.                     console.log(cj);  
  14.                     cj.classList.remove("on");  
  15.                 }  
  16.             }  
  17.             if(ci == mask){mask.classList.remove("on");return;}  
  18.             switch(evt.type){  
  19.                 case "click":  
  20.                     var on = ci.classList.toggle("on");  
  21.                     mask.classList[on?"add":"remove"]("on");  
  22.                 break;  
  23.             }  
  24.         }  
  25.         mask.addEventListener(isMobile?"touchstart":"click", evtFn, false);  
  26.     }  
  27.     return {"bindClick":bindClick};  
  28. })();  


微信自定义菜单

效果图

附上下载链接 http://download.csdn.net/detail/a714115852/7684935

最后欢迎大家一起学习共同进步

转载自http://blog.csdn.net/xuyw10000/article/details/38188151

0 0
解码软件下载 解码软件下载
原创粉丝点击
热门IT博客
2017年房地产成交数据2017年房地产成交数据
oced数据库oced数据库
贴吧顶贴软件
java添加空格代码
人工智能的应用的益处
光之教堂平面图数据
http www.java.com
java map 排序
玄武吉他教室淘宝
手机开通淘宝网店步骤
中国命案破案率数据
二代身份证模版软件
逍遥助手连不上网络
java多线程与并发
js radio触发选中事件
淘宝网男裤子
淘宝黑店曝光
idata软件
手机电池容量检测软件
01科比季后赛数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 勋兴吧 三国杀文功武勋勇武 勋章菊 勋章菊价格 勋章菊的种植方法 勋章菊的养殖方法 勋读音 勋怎么读音 勐海 勐海县 勐海县属于哪个市 勐海县酒店查询预订 勐腊镇 勐腊县邮编 勒克斯 勒克猫 罗勒叶在中国叫什么 勒布朗布朗尼全美排名 勒布朗球鞋系列 勒布朗英文 勒布朗系列篮球鞋 戈登布朗 克里夫兰骑士队 lbj是谁 lebronjames james lbj 紧身裤勒沟 勒出b沟的 勒布沟 勒拿河 美国队长勒晕机器人 勒杜鹃的养植方法 勒杜鹃价格 勒杜鹃的养殖方法 三角梅勒杜鹃 勒杜鹃的种植方法 勒杜鹃图片 勒梦佳 紧身勒b裤 勒逼裤

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里