导航条样式代码

参考博文:这里写链接内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>

        a{
            text-decoration: none;
            cursor: pointer;
        }
        nav{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9000;
            width: 100%;
            height: 50px;
            background-color: #ddd;
        }
        nav>div{
            color: #9e9e9e;
            background-color: #ffffff;
            width: 218px;
            left: 0;
            position: absolute;
            top: 0;
            height: 50px;
            cursor: pointer;
        }
        nav>div div{
            position:absolute;
            height: 50px;
            pointer-events: none;
            width: 100%;
            padding-left: 20px;
            box-sizing: border-box;
            transform: translateZ(25px);
        }
        nav>div div:last-child{
            background-color: #000000;
            color: #ffffff;
            transform: rotateX(90deg) translateZ(25px);
        }
        nav>div div h1{
            font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        nav>div div span{
            display: block;
            width: 16px;
            height: 3px;
            margin-left: -1px;
            margin-top: 4px;
            background-color: #c7c7c7;
        }
        nav>div div:last-child span{
            background-color: #e74c4c;
        }
        nav>div a{
            color:#9e9e9e;
            position: absolute;
            height: 50px;
            width: 100%;
            box-sizing: border-box;
            transition:transform .2s;
            transform-style: preserve-3d;
        }
        nav>div:hover a{
            transform: rotateX(-90deg);
        }
    </style>

</head>
<body>


<nav>
    <div>
        <a href="tool.html">
            <div>
                <h1>TOOL</h1>
                <span></span>
            </div>
            <div>
                <h1>TOOL</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="work.html">
            <div>
                <h1>WORK</h1>
                <span></span>
            </div>
            <div>
                <h1>WORK</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="360.html">
            <div>
                <h1>VR/360</h1>
                <span></span>
            </div>
            <div>
                <h1>VR/360</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="directors.html">
            <div>
                <h1>DIRECTORS</h1>
                <span></span>
            </div>
            <div>
                <h1>DIRECTORS</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="awards.html">
            <div>
                <h1>AWARDS</h1>
                <span></span>
            </div>
            <div>
                <h1>AWARDS</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="about.html">
            <div>
                <h1>ABOUT</h1>
                <span></span>
            </div>
            <div>
                <h1>ABOUT</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="contact.html">
            <div>
                <h1>CONTACT</h1>
                <span></span>
            </div>
            <div>
                <h1>CONTACT</h1>
                <span></span>
            </div>
        </a>
    </div>
</nav>






<script src="js/jquery-1.8.2.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
    $("nav>div").css("left", function (i) {
                return i * 220;
            }
    );
    $("nav>div").click(function () {
        var href = $(this).children().eq(0).attr("href");
        $(window).attr("location", href);
    });
</script>
</body>
</html>

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>