帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» HTML5手机web页面底部菜单
HTML5手机web页面底部菜单
浏览:2663次
-
评论:0次
-
发布时间:2017-12-22
Html
Css
Js
TOP
测试1
QQ
测试3
测试4
测试5
* { box-sizing: border-box; } body { margin: 0; font-family: 微软雅黑; } header { height: 60px; line-height: 60px; width: 100%; color: #fff; font-family: "黑体"; font-weight: 200; font-size: 20px; /*背景色渐变*/ background: linear-gradient(to bottom right, #F56739, #FB9749); } #content { background: linear-gradient(to bottom right, #f5f454, #fbd1b7); } .menu { display: block; position: fixed; bottom: 0; width: 100%; height: 70px; color: #474747; padding-top: 10px; border-top: 1px solid #eee; background-color: #fff; } .subMenu { width: 20%; float: left; cursor: pointer; } .menu_name { height: 30px; width: 100%; line-height: 30px; } img.menu_img { height: 24px; width: 24px; } img { vertical-align: middle; border: 0; } .active { color: #FFA129; } .text-center { text-align: center }
$(document).ready(function() { //添加图片 $("div .subMenu>img").each(function() { var name = $(this).attr("data-imgname"); var src = "http://www.sucainiu.com/themes/images/demo/500x300-" + name + ".png" //设置img的属性和值。 $(this).attr("src", src); }); //点击事件 $("div .subMenu").click(function() { // 取消当前激活状态 var $img = $(".active>img"); //返回被选元素的属性值 var name = $img.attr("data-imgname"); var src = "http://www.sucainiu.com/themes/images/demo/500x300-" + name + ".png"; $img.attr("src", src); $(".active").removeClass("active"); // 添加新状态 $(this).addClass("active"); //找到所有 div(subMenu) 的子元素(img) $img = $(this).children("img"); name = $img.attr("data-imgname"); src = "http://www.sucainiu.com/themes/images/demo/500x300-" + name + ".png"; //设置img的属性和值。 $img.attr("src", src); //content根据点击按钮加载不同的html var page = $(this).attr("data-src"); if (page) { $("#content").load("../html/" + page) } }); // 自动点击第一个菜单 $("div .subMenu")[0].click(); }); /*content高度*/ function initSize() { var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height(); $("#content").height(height + "px"); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>HTML5手机web页面底部菜单-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:用html做的简单的底部菜单
目前图片路径没有提供,此版本兼容各种型号手机,高度也是自适应,获取屏幕宽度再进行处理进行计算出来的
四组纯CSS按钮样式
canvas雪花满天飞效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
2663
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值