導航菜單

本文轉載自查看原文 2017-10-30 20:01 851 css/ 前端筆記

小穎最近在家看《CSS+DIV網頁樣式布局實戰從入門到精通》看到導航菜單部分，小穎將敲的示例分享下，有興趣的可以看看。嘻嘻，最近天冷啦，大家出門注意保暖呦！！！注意保暖！！！注意保暖！！！嘻嘻，重要的事情說三遍哈哈哈。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自適應的斜角水平菜單實例</title>
    <style type="text/css">
    ul {
        font-family: 宋體;
        font-size: 14px;
        list-style: none;
        text-align: center;
    }

    li {
        float: left;
        width: 80px;
        margin: 0;
    }

    li a,
    li a:visited {
        display: block;
        width: 80px;
        float: left;
        position: relative;
        background-color: #00ccad;
        color: #fff;
        text-decoration: none;
        padding: 6px;
        margin: 1px 0 0 1px;
    }

    li a:hover {
        background-color: #bdbbbb;
        color: #333;
    }
    li a span{
        width: 0;
        height: 0;
        border-bottom: 6px solid #00ccad;
        border-left:6px solid #fff; 
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    li a:hover span{
        border-bottom: 6px solid #bdbbbb;
    }
    </style>
</head>

<body>
    <div class="ul-test">
        <ul class="menu">
            <li><a href="#"><span></span>首頁</a></li>
            <li><a href="#"><span></span>企業簡介</a></li>
            <li><a href="#"><span></span>企業新聞</a></li>
            <li><a href="#"><span></span>產品展示</a></li>
            <li><a href="#"><span></span>聯系我們</a></li>
        </ul>
    </div>
</body>

</html>

自適應的斜角水平菜單實例

2.會跳的多彩菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>會跳的多彩菜單實例</title>
    <style type="text/css">
    ul {
        height: 26px;
        margin: 0;
        padding: 10px;
        list-style: none;
    }

    .item {
        width: 100px;
        float: left;
        margin: 0 -1px 0 0;
        padding: 0;
        font: arial 14px;
        font-weight: bold;
    }

    .item p {
        padding: 0 0 2px 0;
        margin: 0;
        text-align: center;
        background: #cc6;
        border: 1px solid #000;
        border-top-width: 0;
    }

    .item div {
        height: 1px;
        overflow: hidden;
        background: #cc6;
        border-right: 1px solid #000;
        border-left: 1px solid #000;
    }

    .item .pad {
        height: 10px;
        border: 0;
        background: transparent;
    }

    .item .row1 {
        margin: 0 5px;
    }

    .item .row2 {
        margin: 0 3px;
    }

    .item .row3 {
        margin: 0 2px;
    }

    .item .row4 {
        margin: 0 1px;
        height: 2px;
    }

    .item a,
    .item a:visited {
        display: block;
        text-decoration: none;
    }

    .item a:hover {
        background: transparent;
    }

    .item a:hover p {
        background: #884;
        color: #fff;
        /* padding-bottom: 12px; */
    }

    .item a:hover .pad {
        height: 0;
    }

    .item a:hover .row2,
    .item a:hover .row3,
    .item a:hover .row4 {
        background: #884;
    }

    .orange p,
    .orange .row2,
    .orange .row3,
    .orange .row4 {
        background: #fa0;
    }

    .orange a:hover p,
    .orange a:hover .row2,
    .orange a:hover .row3,
    .orange a:hover .row4 {
        background: #fa0;
    }

    .pink p,
    .pink .row2,
    .pink .row3,
    .pink .row4 {
        background: #f9bbc5;
    }

    .pink a:hover p,
    .pink a:hover .row2,
    .pink a:hover .row3,
    .pink a:hover .row4 {
        background: #f9bbc5;
    }

    .yellow p,
    .yellow .row2,
    .yellow .row3,
    .yellow .row4 {
        background: #ff0;
    }

    .yellow a:hover p,
    .yellow a:hover .row2,
    .yellow a:hover .row3,
    .yellow a:hover .row4 {
        background: #ff0;
    }

    .green p,
    .green .row2,
    .green .row3,
    .green .row4 {
        background: #0ec;
    }

    .green a:hover p,
    .green a:hover .row2,
    .green a:hover .row3,
    .green a:hover .row4 {
        background: #0ec;
    }

    .blue p,
    .blue .row2,
    .blue .row3,
    .blue .row4 {
        background: #0cf;
    }

    .blue a:hover p,
    .blue a:hover .row2,
    .blue a:hover .row3,
    .blue a:hover .row4 {
        background: #0cf;
    }
    </style>
</head>

<body>
    <div class="ui-demo">
        <ul>
            <li class="item orange">
                <a href="#">
                    <div class="pad"></div>
                    <div class="row1"></div>
                    <div class="row2"></div>
                    <div class="row3"></div>
                    <div class="row4"></div>
                    <p>首頁</p>
                </a>
            </li>
            <li class="item pink">
                <a href="#">
                    <div class="pad"></div>
                    <div class="row1"></div>
                    <div class="row2"></div>
                    <div class="row3"></div>
                    <div class="row4"></div>
                    <p>企業簡介</p>
                </a>
            </li>
            <li class="item yellow">
                <a href="#">
                    <div class="pad"></div>
                    <div class="row1"></div>
                    <div class="row2"></div>
                    <div class="row3"></div>
                    <div class="row4"></div>
                    <p>企業新聞</p>
                </a>
            </li>
            <li class="item green">
                <a href="#">
                    <div class="pad"></div>
                    <div class="row1"></div>
                    <div class="row2"></div>
                    <div class="row3"></div>
                    <div class="row4"></div>
                    <p>產品展示</p>
                </a>
            </li>
            <li class="item blue">
                <a href="#">
                    <div class="pad"></div>
                    <div class="row1"></div>
                    <div class="row2"></div>
                    <div class="row3"></div>
                    <div class="row4"></div>
                    <p>聯系我們</p>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

會跳的多彩菜單實例

3.雙豎線菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>雙豎線菜單實例</title>
    <style type="text/css">
    ul {
        width: 120px;
        font-size: 14px;
        background: #ccc;
        margin: 0 auto;
        padding: 8px;
        list-style: none;
    }

    ul a,
    ul a:visited {
        display: block;
        height: 16px;
        background-color: #fff;
        padding: 4px 8px;
        text-decoration: none;
        margin: 8px 0;
        border-right: 8px solid green;
        border-left: 8px solid green;
        color: #000;
    }

    a:hover {
        color: red;
        border-right: 8px solid red;
        border-left: 8px solid red;
    }
    </style>
</head>

<body>
    <div class="ul-demo">
        <ul>
            <li><a href="#"><span></span>首頁</a></li>
            <li><a href="#"><span></span>企業簡介</a></li>
            <li><a href="#"><span></span>企業新聞</a></li>
            <li><a href="#"><span></span>產品展示</a></li>
            <li><a href="#"><span></span>聯系我們</a></li>
        </ul>
    </div>
</body>

</html>

雙豎線菜單實例

4.雙斜角橫線菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>雙斜角橫線菜單實例</title>
    <style type="text/css">
    #menu {
        width: 120px;
        margin: 0 auto;
        font-family: 宋體;
        font-size: 14px;
        border: 1px solid #aaa;
        text-align: center;
        background-color: #f98fe7;
    }

    #menu a,
    #menu a:visited {
        display: block;
        text-decoration: none;
        color: white;
        line-height: 30px;
        border: 0.5em solid #fff;
    }

    #menu a:hover {
        color: #fff;
        background-color: #3cf8f8;
        border-color: #ddd #aaa;
        /* 上下邊框淺灰色，左右邊框深灰色 */
    }
    /* div#ceshi {
        width: 100px;
        background-color: pink;
    }

    #ceshi a {
        line-height: 30px;
        text-decoration: none;
        background-color: green;
        border: 0.5em solid #fff;
        border-color: #ddd #9E9E9E;
    } */
    </style>
</head>

<body>
    <div id="menu">
        <a href="#">首頁</a>
        <a href="#">企業簡介</a>
        <a href="#">企業新聞</a>
        <a href="#">產品展示</a>
        <a href="#">聯系我們</a>
    </div>
    <!-- <div id="ceshi">
        <a href="#">aaa</a>
    </div> -->
</body>

</html>

雙斜角橫線菜單實例

5.立體菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>立體菜單實例</title>
    <style type="text/css">
    #menu {
        font-family: 宋體;
        font-size: 14px;
    }

    #menu a,
    #menu a:visited {
        text-decoration: none;
        text-align: center;
        display: block;
        color: #fff;
        width: 10em;
        padding: 0.25em;
        margin: 0.5em auto;
        background-color: #8ab;
        border: 2px solid #fff;
        border-color: #def #678 #345 #cde;
        position: relative;
    }

    #menu a:hover {
        top: 2px;
        border-color: #345 #cde #def #678;
        left: 2px;
    }
    </style>
</head>

<body>
    <div id="menu">
        <a href="#">首頁</a>
        <a href="#">企業簡介</a>
        <a href="#">企業新聞</a>
        <a href="#">產品展示</a>
        <a href="#">聯系我們</a>
    </div>
</body>

</html>

立體菜單實例

6.箭頭菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>箭頭菜單實例</title>
    <style type="text/css">
    #menu {
        font-size: 14px;
        font-family: 宋體;
        margin: 0 auto;
        width: 120px;
        border: 1px solid #ccc;
    }

    #menu a,
    #menu a:visited {
        text-decoration: none;
        text-align: center;
        color: #c00;
        display: block;
        padding: 4px;
        background-color: #fff;
        border: 1px solid #fff;
        height: 1em;
        position: relative;
    }

    #menu a:hover {
        border-color: red;
        background-color: green;
    }

    #menu a:hover span {
        display: block;
        height: 0;
        width: 0;
        overflow: hidden;
        border: 8px solid green;
        position: absolute;
        top: 4px;
    }

    #menu a span.left {
        left: 8px;
        border-left-color: red;
    }
    </style>
</head>

<body>
    <div id="menu">
        <a href="#"><span class="left"></span>首頁</a>
        <a href="#"><span class="left"></span>企業簡介</a>
        <a href="#"><span class="left"></span>企業新聞</a>
        <a href="#"><span class="left"></span>產品展示</a>
        <a href="#"><span class="left"></span>聯系我們</a>
    </div>
</body>

</html>

箭頭菜單實例

7.帶說明信息的菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>帶說明信息的菜單實例</title>
    <style type="text/css">
    #menu {
        font-size: 14px;
        font-family: 宋體;
        font-weight: bold;
        margin: 0 auto;
        width: 120px;
        border: 1px solid #ccc;
    }

    #menu a,
    #menu a:visited {
        text-decoration: none;
        text-align: center;
        color: #21afef;
        display: block;
        padding: 4px;
        background-color: #fff;
        border: 1px solid #fff;
        height: 1em;
        position: relative;
    }

    #menu a span.desc,
    #menu a:visited span.desc {
        display: none;
    }

    #menu a:hover span.desc {
        display: block;
        position: absolute;
        color: #000;
        border: 1px dashed #000;
        width: 80px;
        height: auto;
        top: 0;
        left: 120px;
        background-color: #eee;
    }
    </style>
</head>

<body>
    <div id="menu">
        <a href="#">
            <span class="left"></span>首頁
            <span class="desc">這里是首頁</span>
        </a>
        <a href="#">
            <span class="left"></span>企業簡介
            <span class="desc">這里是企業簡介</span>
        </a>
        <a href="#">
            <span class="left"></span>企業新聞
            <span class="desc">這里是企業新聞</span>
        </a>
        <a href="#">
            <span class="left"></span>產品展示
            <span class="desc">這里是產品展示</span>
        </a>
        <a href="#">
            <span class="left"></span>聯系我們
            <span class="desc">這里是聯系我們</span>
        </a>
    </div>
</body>

</html>

帶說明信息的菜單實例

8.下拉菜單實例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>下拉菜單實例</title>
    <style type="text/css">
    .menu {
        margin: 0;
        padding: 0;
        list-style: none;
        font: 14px 宋體;
    }

    .menu li {
        margin: 0 1px 0 0;
        float: left;
        width: 150px;
        padding: 0;
    }

    .menu li dl {
        margin: 0 0 10px 0;
        width: 150px;
        padding: 0;
    }

    .menu li:hover dd {
        display: block;
    }

    .menu li dl dt {
        margin: 0;
        padding: 5px;
        text-align: center;
        border-bottom: 1px solid red;
    }

    .menu li dl dt.red {
        background-color: red;
    }

    .menu dt a,
    .menu dt a:visited {
        display: block;
        color: white;
        text-decoration: none;
    }

    .menu li dd {
        margin: 0;
        padding: 0;
        color: #fff;
        text-align: center;
        background-color: #47a;
    }

    .menu li dl dd a,
    .menu li dl dd a:visited {
        text-decoration: none;
        display: block;
        color: #fff;
        padding: 4px 5px 4px 5px;
    }

    .menu li dl dd.last {
        border-bottom: 1px solid red;
    }

    .menu li dd {
        display: none;
    }

    .menu li:hover dd,
    .menu li a:hover dd {
        display: block;
    }

    .menu li:hover,
    .menu li a:hover {
        text-decoration: none;
        border: 0;
    }

    .menu li dl dd a:hover {
        background-color: blue;
        color: white;
    }
    </style>
</head>

<body>
    <ul class="menu">
        <li>
            <dl>
                <dt class="red"><a href="#">企業新聞</a></dt>
                <dd><a href="#">視頻新聞</a></dd>
                <dd><a href="#">領導動態</a></dd>
                <dd class="last"><a href="#">行業新聞</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt class="red"><a href="#">企業</a></dt>
                <dd><a href="#">視頻</a></dd>
                <dd><a href="#">領導</a></dd>
                <dd class="last"><a href="#">行業</a></dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt class="red"><a href="#">企業哈哈哈</a></dt>
                <dd><a href="#">視頻哈哈哈</a></dd>
                <dd><a href="#">領導哈哈哈</a></dd>
                <dd class="last"><a href="#">行業哈哈哈</a></dd>
            </dl>
        </li>
    </ul>
</body>

</html>

下拉菜單實例

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 NavMenu 導航菜單 WordPress導航菜單函數首頁導航+左側菜單 element多層導航菜單 vue實現導航菜單導航條——收縮式導航菜單 CSS導航菜單（一級菜單） element UI導航菜單組件左側菜單導航欄的實現 ABP之展現層（導航菜單）