導航條樣式代碼

時間  2019-11-21
標籤 導航 樣式 代碼 简体版
原文   原文鏈接

參考博文:這裏寫連接內容javascript

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程