html移动端底部导航菜单按钮(仿各大app底部)

最新推荐文章于 2025-05-01 14:30:13 发布

要变得更懂'你'

最新推荐文章于 2025-05-01 14:30:13 发布

阅读量1.3w

点赞数 3

分类专栏：前端文章标签：底部导航移动端导航移动端底部导航

本文链接：https://blog.csdn.net/Java_mouse/article/details/100989001

版权

前端专栏收录该内容

4 篇文章

订阅专栏

不多说直接上代码:

<!DOCTYPE html>
<meta name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部导航实现点击切换页面</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .menu {
            display: block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 150px;
            color: white;
            padding-top: 10px;
            border-top: 1px solid #eee;
            background-color: #010791;
        }

        .subMenu {
            width: 25%;
            float: left;
            cursor: pointer;
        }

        .menu_name {
            height: 30px;
            width: 100%;
            line-height: 30px;
            font-size: 40px;
        }

        .active {
            color: #01cd3f;
        }

        .text-center {
            text-align: center
        }

        button{
            border-style: none;

        }
    </style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body onload="initSize()" onresize="initSize()">
<!--content-->
<div id="content"></div>
<!--bottom-->
<div id="menu" class="menu">
    <div id="one" class="subMenu text-center" data-src="radar.html">
        <span class="glyphicon glyphicon-edit btn-lg" style="font-size:40px;"></span>
        <div class="menu_name">考核</div>
    </div>
    <div id="two" class="subMenu text-center" data-src="cha.html">
        <span class="glyphicon glyphicon-list btn-lg" style="font-size:40px;"></span>
        <div class="menu_name">特征</div>
    </div>
    <div id="three" class="subMenu text-center" data-src="advise.html">
        <span class="glyphicon glyphicon-comment btn-lg" style="font-size:40px;"></span>
        <div class="menu_name">建议</div>
    </div>
    <div id="four" class="subMenu text-center" data-src="position.html">
        <span class="glyphicon glyphicon-sort-by-attributes-alt btn-lg" style="font-size:40px;"></span>
        <div class="menu_name">排名</div>
    </div>
</div>

</body>
<script>
    //$(function () {});
    $(document).ready(function () {
        //点击事件
        $("div .subMenu").click(function () {

            $(".active").removeClass("active");

            // 添加新状态
            $(this).addClass("active");
            //content根据点击按钮加载不同的html
            var page = $(this).attr("data-src");
            if(page){
                $("#content").load(page)
            }
        });

        // 自动点击第一个菜单
        $("div .subMenu")[0].click();
    });

    /*content高度*/
    function initSize() {
        var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
        $("#content").height(height + "px");
    }
</script>

</html>

<div id="one" class="subMenu text-center" data-src="radar.html">
        <span class="glyphicon glyphicon-edit btn-lg" style="font-size:40px;"></span>
        <div class="menu_name">考核</div>
    </div>

//data-src="radar.html"中改成自己小的html,其他的css样式的设置,自己动手吧