Heim > Artikel > Web-Frontend > Reine CSS3-Navigation

Reine CSS3-Navigation

羽Original: 2017-10-08 12:55:321152Durchsuche

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .MenuItem{list-style: none;float: left;display: block;}
        .MenuItem a{color:beige;background: #000;}
        a, .MenuItemChildItem>a {
            float: left;
            color: #fff;
            padding: 10px 0px 10px 0px;
            text-align: center;
            font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
            cursor: pointer;
            width: 170px;
        }
        .MenuItem>a:hover {
            background-color: #252525;
        }
        .MenuItem:first-child>a {
            -webkit-border-radius: 5px 0 0 0;
            -moz-border-radius: 5px 0 0 0;
            border-radius: 5px 0 0 0;
        }
        .MenuItem:hover #MenuMark {
            width: 100%;
        }
        #MenuItemChild {
            margin: 0;
            visibility:hidden;
            padding: 0;
            width: 100%;
            float: left;
        }
        #MenuItemChild>li>a {
            background-color: #333;

        }
        .MenuItemChildItem {
            list-style: none;
            color: #fff;
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            -ms-perspective: 300px;
            -o-perspective: 300px;

            perspective: 300px;
        }
        .MenuItemChildItem>a {
            border-bottom: 1px solid #222222;
            border-top: 1px solid #555555;
            -webkit-transform: rotateY(90deg);
            transition-duration: 0.5s;
            -webkit-perspective: 400px;
            -moz-perspective: 400px;
            -ms-perspective: 400px;
            -o-perspective: 400px;
            perspective: 400px;
            opacity:0;
        }
        .MenuItem:hover #MenuItemChild{
            visibility:visible;
        }
        .MenuItemChildItem>a:hover {
            background-color: #252525 !important;
        }
        .MenuItem:hover #MenuItemChild>li:nth-child(1)>a {
            opacity: 1;

            -webkit-transform: rotateY(0deg);
        }
        .MenuItem:hover #MenuItemChild>li:nth-child(2)>a {
            opacity: 1;
            transition-delay: 0.2s;
            -webkit-transform: rotateY(0deg);
        }
        .MenuItem:hover #MenuItemChild>li:nth-child(3)>a {
            opacity: 1;
            transition-delay: 0.4s;
            -webkit-transform: rotateY(0deg);
        }
        .MenuItem:hover #MenuItemChild>li:nth-child(4)>a {
            opacity: 1;
            transition-delay: 0.5s;
            -webkit-transform: rotateY(0deg);
        }
        .MenuItem:hover #MenuItemChild>li:nth-child(5)>a {
            opacity: 1;
            transition-delay: 0.6s;
            -webkit-transform: rotateY(0deg);
        }
        .MenuItem:hover #MenuItemChild>li:nth-child(6)>a {
            opacity: 1;
            transition-delay: 0.8s;
            -webkit-transform: rotateY(0deg);
        }
    </style>
</head>
<body>
<ul>
    <li><a>菜单1</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单1-1</a></li>
            <li><a>菜单1-2</a></li>
            <li><a>菜单1-3</a></li>
            <li><a>菜单1-4</a></li>
            <li><a>菜单1-5</a></li>
            <li><a>菜单1-6</a></li>
        </ul>
    </li>
    <li><a>菜单2</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单2-1</a></li>
            <li><a>菜单2-2</a></li>
            <li><a>菜单2-3</a></li>
            <li><a>菜单2-4</a></li>
            <li><a>菜单2-5</a></li>
            <li><a>菜单2-6</a></li>
        </ul>
    </li>
    <li><a>菜单3</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单3-1</a></li>
            <li><a>菜单3-2</a></li>
            <li><a>菜单3-3</a></li>
            <li><a>菜单3-4</a></li>
            <li><a>菜单3-5</a></li>
            <li><a>菜单3-6</a></li>
        </ul>
    </li>
    <li><a>菜单4</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单4-1</a></li>
            <li><a>菜单4-2</a></li>
            <li><a>菜单4-3</a></li>
            <li><a>菜单4-4</a></li>
            <li><a>菜单4-5</a></li>
            <li><a>菜单4-6</a></li>
        </ul>
    </li>
    <li><a>菜单5</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单5-1</a></li>
            <li><a>菜单5-2</a></li>
            <li><a>菜单5-3</a></li>
            <li><a>菜单5-4</a></li>
            <li><a>菜单5-5</a></li>
            <li><a>菜单5-6</a></li>
        </ul>
    </li>
    <li><a>菜单6</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单6-1</a></li>
            <li><a>菜单6-2</a></li>
            <li><a>菜单6-3</a></li>
            <li><a>菜单6-4</a></li>
            <li><a>菜单6-5</a></li>
            <li><a>菜单6-6</a></li>
        </ul>
    </li>
    <li><a>菜单7</a>
        <div id="MenuMark"></div>
        <ul id="MenuItemChild">
            <li><a>菜单7-1</a></li>
            <li><a>菜单7-2</a></li>
            <li><a>菜单7-3</a></li>
            <li><a>菜单7-4</a></li>
            <li><a>菜单7-5</a></li>
            <li><a>菜单7-6</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

Das obige ist der detaillierte Inhalt vonReine CSS3-Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Anzeige des CSS3-Boxmodells: Detaillierte Erläuterung der BoxanwendungNächster Artikel：Anzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung

In Verbindung stehende Artikel

Mehr sehen