要实现一个固定底部导航菜单。如图
==================
摘要:
100% 25%。4个div均分。前面三个div右边有边框,采取25%会挤掉下去。添加
$(document).ready(function() {
$(".bottommenu li").click(function(e) {
if ($(this).find(".pop-layer").is(':hidden')) {
$(".bottommenu li .pop-layer").hide();
$(this).find(".pop-layer").show();
} else {
$(".bottommenu li .pop-layer").hide();
}
e.stopPropagation(); // 阻止冒泡
});
$(".pop-layer li").click(function(e) {
$(".pop-layer li").css('background', '#fff');
$(this).css('background', '#f0f0f0');
$(this).parent().show();
e.stopPropagation(); // 阻止冒泡
});
$(document).click(function() { // 点击空白消失
$(".bottommenu li .pop-layer").hide();
});
});
=========================
使用到了阻止冒泡事件,可以进一步调研学习
===========
http://blog.csdn.net/auphiria/article/details/7703386
参考这篇实现,底部,右下三角,纯css实现三角形。
==================
BottomMenu-PC端V1.0链接地址:http://files.cnblogs.com/files/leshao/BottomMenu-PC%E7%AB%AFV1.0.rar
BottomMenu-移动端V1.0链接地址:http://files.cnblogs.com/files/leshao/BottomMenu-%E7%A7%BB%E5%8A%A8%E7%AB%AFV1.0.rar
=========================
感谢诸位群友,朋友大牛,使得完美。