javascript - 使用 w3schools 方法嵌套下拉菜单

标签 javascript jquery html css drop-down-menu

我使用 this 设计了一个菜单链接。
现在我在使用嵌套下 zipper 接时遇到问题。
我尝试了几种方法，但因为我现在没有使用标准的 ul 和 li 标签，所以我无法解决这个问题。
在这里，我将复制我的代码，以便您可以看到我在做什么，并且我还附上了一些屏幕截图。 

jQuery(".search-form-header-icon").click(function () {
    jQuery(".header-search-form-input").toggle('fast', function () {
        if (jQuery(this).css("display") == "block")
            jQuery(this).css('display','inline-block');
    });
});
jQuery(window).on('scroll', function () {
    var s = jQuery(window).scrollTop(),
        d = jQuery(document).height(),
        c = jQuery(window).height();
    var scrollPercent = (s / (d - c)) * 100;
    var pagePercent = Math.round(scrollPercent)
    var gradient_bar_header_width = pagePercent + "%"
    jQuery(".gradient-bar-header").css("width", gradient_bar_header_width);
});

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menu_function() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
/*  Header Redesigned   */
.gradient-bar-header {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 99999;
    height: 3px;
    background-image: -o-repeating-linear-gradient(right, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1 100%);
    background-image: repeating-linear-gradient(270deg, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1);
}

header {
    background-color: #F8F9FA;
}

.topnav {
    overflow: hidden;
    background-color: #F8F9FA;
    padding-bottom: 20px;

}

.topnav a {
    padding: 12px;
    float: right;
    display: block;
    color: #343a40;
    text-align: center;
    padding: 8px 10px 8px 10px;
    text-decoration: none;
    font-size: 1em;
}

.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropbtn i {
    padding-left: 6px;
}

.dropdown .dropbtn {
    font-size: 1em;
    border: none;
    outline: none;
    color: #343a40;
    padding: 0px 10px 0px 10px !important;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    box-shadow: unset !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #DFE0E1;
    color: #343a40;
    text-decoration: none;
}

.dropdown-content a {
    text-align: right;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.header-social-div a {
    font-size: 20px;
    color: #808080;
    padding: 7px;
}

.header-cta-div {
    display: flex;
}

.search-form-header-icon {
    color: grey;
    font-size: 1.5em;
    vertical-align: middle;
    margin-left: 4px;
}

.header-search-form-input{
    background: white !important;
    border-radius: 3px !important;
    font-family: inherit !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: grey !important;
    font-size: 1em !important;
    padding-right: 5px !important;
    display: none;
    background-color: white !important;
    line-height: unset !important;
    height: unset !important;
    width: unset !important;
}

@media screen and (min-width: 991px) {
    .search-form-header-icon {
        margin-right: 20px;
    }

    .header-search-form {
        display: contents;
    }

    .header-cta-div {
        float: left;
        margin-left: 5px;
    }

    .topnav {
        max-width: 90%;
        margin: auto;
        padding-top: 13px;
    }

    .header-phone-div {
        text-align: right;
    }

    .header-social-div {
        text-align: left;
    }

    .Logo-header {
        background-image: url(https://nikpardakht.com/wp-content/themes/nikpardakht/images/logo/nikpardakht-logo.png);
        background-repeat: no-repeat;
        width: 80px;
        height: 80px;
        margin: -17px 0px 6px 13px;
    }

    .dropbtn, .topnav a:hover {
        border-radius: 5px;
    }

    .dropdown-content a:hover {
        border-radius: 0px;
    }
}

@media screen and (max-width: 990px) {
    .header-search-form {
        display: block;
        margin-top: 20px;
    }

    .search-form-header-icon {
        margin-right: 20px;
    }

    .Logo-header {
        width: 170px;
        height: 60px;
        background-image: url(https://nikpardakht.com/wp-content/uploads/2017/10/header-mobile-logo.png);
        background-repeat: no-repeat;
        margin: -5px 0px 6px 13px;
    }

    .header-cta-div {
        width: 100%;
    }

    .header-cta-div a {
        display: block !important;
        margin: auto;
        min-width: 40%;
    }

    .header-phone-div, .header-social-div {
        text-align: center;
    }

    .topnav a, .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: left;
        display: block;
        font-size: 1.5em;
        margin-left: 15px;
    }

    .topnav a.icon:hover {
        background-color: unset;
    }

    .Logo-header {
        display: block !important;
    }

    .topnav {
        padding-top: 13px;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        left: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }

    .topnav.responsive .dropdown {
        float: none;
    }

    .topnav.responsive .dropdown-content {
        position: relative;
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .links-header-menu {
        background: #f1f1f1;
        margin-bottom: 15px;
        line-height: 2em;
    }
}

@media screen and (max-width: 575px) {
    .header-mini-nav {
        max-width: 90%;
    }
}

.dropdown {
    position: unset !important;
}

.Logo-header {
    vertical-align: middle;
}

.Logo-header:hover {
    background-color: unset !important;
    color: unset !important;
}

.header-mini-nav {
    background: #f1f1f1;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    border-top: unset;
    padding-bottom: 10px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.header-phone-div, .header-social-div {
    padding-top: 14px;
    font-size: 14px;
}

.header-phone-number {
    color: #343a40;
    text-decoration: none;
    background: #0b87ce;
    padding: 10px;
    border-radius: 13px;
    color: white;
    vertical-align: middle;
}

.header-phone-number:hover {
    background: #013495;
    color: white;
    text-decoration: none;
}

.header-cta-a {
    margin-right: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #0b87ce;
    color: #0b87ce !important;
    padding: 4px 12px 4px 12px !important;
    border-radius: 5px !important;
}

.header-cta-a:hover {
    color: white !important;
    background-color: #0b87ce !important;
}

.header-cta-a i {
    vertical-align: middle;
}

.hvr-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Icon Bounce */
.hvr-icon-bounce {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-icon-bounce .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Icon Rotate */
.hvr-icon-rotate {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-icon-rotate .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=10, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<div class="gradient-bar-header"></div>
<header>
    <div class="container header-mini-nav">
        <div class="row">
            <div class="col-sm-12 col-lg-6 header-phone-div">
                <a class="header-phone-number hvr-icon-rotate" href="tel:02144026590"><i
                        class="fas fa-phone hvr-icon"></i> ۰۲۱۴۴۰۲۶۵۹۰</a>
                <i class="fas fa-search search-form-header-icon"></i>
                <form action="/" method="get" class="header-search-form">
                    <input class="header-search-form-input" type="text" name="s" placeholder="متن + Enter">
                </form>
            </div>
            <div class="col-sm-12 col-lg-6 header-social-div">
                    <a href="https://t.me/nikpardakht" rel="nofollow" target="_blank"><i
                            class="fab fa-telegram telegram-icon"></i></a>
                    <a href="https://www.instagram.com/nikpardakht/" rel="nofollow" target="_blank"><i
                            class="fab fa-instagram instagram-icon"></i></a>
                    <a href="https://www.facebook.com/Nikpardakht-1808046642656435" rel="nofollow" target="_blank"><i
                            class="fab fa-facebook-square facebook-icon"></i></a>
                    <a href="https://www.linkedin.com/company/nikpardakht" rel="nofollow" target="_blank"><i
                            class="fab fa-linkedin linkedin-icon"></i></a>
                    <a href="https://twitter.com/NPardakht" rel="nofollow" target="_blank"><i
                            class="fab fa-twitter-square twitter-icon"></i></a>
            </div>
        </div>
    </div>
    <div class="topnav" id="myTopnav">
        <a href="#" class="Logo-header"></a>
        <div class="links-header-menu">
            <!--<a href="#home" class="active">خانه</a>-->
            <a href="#">پی پال</a>
            <a href="#">مستر کارت</a>
            <a href="#">آزمون های بین المللی</a>
            <a href="#">پرداخت های ارزی</a>
            <a href="#">پرداخت های سفارت</a>
            <a href="#">درباره ما</a>
            <div class="dropdown">
                <button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
                </button>
                <div class="dropdown-content">
                    <a href="#"><i class="fas fa-angle-left"></i> Link 1</a>
                    <a href="#"><i class="fas fa-angle-left"></i> Link 2</a>
                    <a href="#"><i class="fas fa-angle-left"></i> Link 3</a>
                </div>
            </div>
            <a href="javascript:void(0);" class="icon" onclick="menu_function()">&#9776;</a>
        </div>
        <div class="header-cta-div">
            <a class="header-cta-a header-cta-a-enter hvr-wobble-horizontal" href="https://panel.nikpardakht.com/login"><i
                    class="fas fa-sign-in-alt"></i> ورود</a>
            <a class="header-cta-a header-cta-a-reg hvr-wobble-horizontal"
               href="https://panel.nikpardakht.com/user/register"><i class="fas fa-user-plus"></i> ثبت نام</a>
        </div>
    </div>
</header>
<body style="direction: rtl">
<div class="body-sec" style="background: #BFBFC0">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
<script src="header.js"></script>

</body>
</html>

现在看起来像这样:
enter image description here
我想成为这样的人:
enter image description here
如何添加嵌套菜单项？

最佳答案

谈到嵌套下拉菜单，考虑使用嵌套列表。

给你!我刚刚包装了 <a>在下拉内容中放入列表项。

试试这个。

jQuery(".search-form-header-icon").click(function () {
    jQuery(".header-search-form-input").toggle('fast', function () {
        if (jQuery(this).css("display") == "block")
            jQuery(this).css('display','inline-block');
    });
});
jQuery(window).on('scroll', function () {
    var s = jQuery(window).scrollTop(),
        d = jQuery(document).height(),
        c = jQuery(window).height();
    var scrollPercent = (s / (d - c)) * 100;
    var pagePercent = Math.round(scrollPercent)
    var gradient_bar_header_width = pagePercent + "%"
    jQuery(".gradient-bar-header").css("width", gradient_bar_header_width);
});

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menu_function() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
/*  Header Redesigned   */
.gradient-bar-header {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 99999;
    height: 3px;
    background-image: -o-repeating-linear-gradient(right, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1 100%);
    background-image: repeating-linear-gradient(270deg, #9079e1 0, #2cd6aa 25%, #28aff8 50%, #9079e1);
}

header {
    background-color: #F8F9FA;
}

.topnav {
    overflow: hidden;
    background-color: #F8F9FA;
    padding-bottom: 20px;

}

.topnav a {
    padding: 12px;
    float: right;
    display: block;
    color: #343a40;
    text-align: center;
    padding: 8px 10px 8px 10px;
    text-decoration: none;
    font-size: 1em;
}

.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropbtn i {
    padding-left: 6px;
}

.dropdown .dropbtn {
    font-size: 1em;
    border: none;
    outline: none;
    color: #343a40;
    padding: 0px 10px 0px 10px !important;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    box-shadow: unset !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    overflow-y: auto;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #DFE0E1;
    color: #343a40;
    text-decoration: none;
}

.dropdown-content a {
    text-align: right;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.header-social-div a {
    font-size: 20px;
    color: #808080;
    padding: 7px;
}

.header-cta-div {
    display: flex;
}

.search-form-header-icon {
    color: grey;
    font-size: 1.5em;
    vertical-align: middle;
    margin-left: 4px;
}

.header-search-form-input{
    background: white !important;
    border-radius: 3px !important;
    font-family: inherit !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: grey !important;
    font-size: 1em !important;
    padding-right: 5px !important;
    display: none;
    background-color: white !important;
    line-height: unset !important;
    height: unset !important;
    width: unset !important;
}

@media screen and (min-width: 991px) {
    .search-form-header-icon {
        margin-right: 20px;
    }

    .header-search-form {
        display: contents;
    }

    .header-cta-div {
        float: left;
        margin-left: 5px;
    }

    .topnav {
        max-width: 90%;
        margin: auto;
        padding-top: 13px;
    }

    .header-phone-div {
        text-align: right;
    }

    .header-social-div {
        text-align: left;
    }

    .Logo-header {
        background-image: url(https://nikpardakht.com/wp-content/themes/nikpardakht/images/logo/nikpardakht-logo.png);
        background-repeat: no-repeat;
        width: 80px;
        height: 80px;
        margin: -17px 0px 6px 13px;
    }

    .dropbtn, .topnav a:hover {
        border-radius: 5px;
    }

    .dropdown-content a:hover {
        border-radius: 0px;
    }
}

@media screen and (max-width: 990px) {
    .header-search-form {
        display: block;
        margin-top: 20px;
    }

    .search-form-header-icon {
        margin-right: 20px;
    }

    .Logo-header {
        width: 170px;
        height: 60px;
        background-image: url(https://nikpardakht.com/wp-content/uploads/2017/10/header-mobile-logo.png);
        background-repeat: no-repeat;
        margin: -5px 0px 6px 13px;
    }

    .header-cta-div {
        width: 100%;
    }

    .header-cta-div a {
        display: block !important;
        margin: auto;
        min-width: 40%;
    }

    .header-phone-div, .header-social-div {
        text-align: center;
    }

    .topnav a, .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: left;
        display: block;
        font-size: 1.5em;
        margin-left: 15px;
    }

    .topnav a.icon:hover {
        background-color: unset;
    }

    .Logo-header {
        display: block !important;
    }

    .topnav {
        padding-top: 13px;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        left: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }

    .topnav.responsive .dropdown {
        float: none;
    }

    .topnav.responsive .dropdown-content {
        position: relative;
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .links-header-menu {
        background: #f1f1f1;
        margin-bottom: 15px;
        line-height: 2em;
    }
}

@media screen and (max-width: 575px) {
    .header-mini-nav {
        max-width: 90%;
    }
}

.dropdown {
    position: unset !important;
}

.Logo-header {
    vertical-align: middle;
}

.Logo-header:hover {
    background-color: unset !important;
    color: unset !important;
}

.header-mini-nav {
    background: #f1f1f1;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    border-top: unset;
    padding-bottom: 10px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.header-phone-div, .header-social-div {
    padding-top: 14px;
    font-size: 14px;
}

.header-phone-number {
    color: #343a40;
    text-decoration: none;
    background: #0b87ce;
    padding: 10px;
    border-radius: 13px;
    color: white;
    vertical-align: middle;
}

.header-phone-number:hover {
    background: #013495;
    color: white;
    text-decoration: none;
}

.header-cta-a {
    margin-right: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #0b87ce;
    color: #0b87ce !important;
    padding: 4px 12px 4px 12px !important;
    border-radius: 5px !important;
}

.header-cta-a:hover {
    color: white !important;
    background-color: #0b87ce !important;
}

.header-cta-a i {
    vertical-align: middle;
}

.hvr-wobble-vertical {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }
    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }
    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Icon Bounce */
.hvr-icon-bounce {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-icon-bounce .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Icon Rotate */
.hvr-icon-rotate {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-icon-rotate .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

li{list-style:none;}
.dropdown-content ul li {position:relative;}
.dropdown-content ul li ul{display:none; margin-left:35px; background:#fff; box-shadow:0 0 3px 0 rgba(0,0,0,0.3);z-index:99; padding:15px; border-radius:3px; width:170px; margin-left:auto; margin-right:auto;position: absolute; left: 110px; top: 0;}
.dropdown-content ul li:hover ul {display:block;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=10, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<div class="gradient-bar-header"></div>
<header>
    <div class="container header-mini-nav">
        <div class="row">
            <div class="col-sm-12 col-lg-6 header-phone-div">
                <a class="header-phone-number hvr-icon-rotate" href="tel:02144026590"><i
                        class="fas fa-phone hvr-icon"></i> ۰۲۱۴۴۰۲۶۵۹۰</a>
                <i class="fas fa-search search-form-header-icon"></i>
                <form action="/" method="get" class="header-search-form">
                    <input class="header-search-form-input" type="text" name="s" placeholder="متن + Enter">
                </form>
            </div>
            <div class="col-sm-12 col-lg-6 header-social-div">
                    <a href="https://t.me/nikpardakht" rel="nofollow" target="_blank"><i
                            class="fab fa-telegram telegram-icon"></i></a>
                    <a href="https://www.instagram.com/nikpardakht/" rel="nofollow" target="_blank"><i
                            class="fab fa-instagram instagram-icon"></i></a>
                    <a href="https://www.facebook.com/Nikpardakht-1808046642656435" rel="nofollow" target="_blank"><i
                            class="fab fa-facebook-square facebook-icon"></i></a>
                    <a href="https://www.linkedin.com/company/nikpardakht" rel="nofollow" target="_blank"><i
                            class="fab fa-linkedin linkedin-icon"></i></a>
                    <a href="https://twitter.com/NPardakht" rel="nofollow" target="_blank"><i
                            class="fab fa-twitter-square twitter-icon"></i></a>
            </div>
        </div>
    </div>
    <div class="topnav" id="myTopnav">
        <a href="#" class="Logo-header"></a>
        <div class="links-header-menu">
            <!--<a href="#home" class="active">خانه</a>-->
            <a href="#">پی پال</a>
            <a href="#">مستر کارت</a>
            <a href="#">آزمون های بین المللی</a>
            <a href="#">پرداخت های ارزی</a>
            <a href="#">پرداخت های سفارت</a>
            <a href="#">درباره ما</a>
            <div class="dropdown">
                <button class="dropbtn"><i class="fa fa-caret-down"></i>وبلاگ
                </button>
                <div class="dropdown-content">
                   <ul> <li><a href="#"><i class="fas fa-angle-left"></i> Link 1</a>
                  <ul><li>Item 1<li>
                    <li>Item 2<li>
                    <li>Item 3<li>
                  </ul></li>
                  <li>  <a href="#"><i class="fas fa-angle-left"></i> Link 2</a><ul><li>Item 1<li>
                    <li>Item 2<li>
                    <li>Item 3<li>
                  </ul></li>
                   <li> <a href="#"><i class="fas fa-angle-left"></i> Link 3</a><ul><li>Item 1<li>
                    <li>Item 2<li>
                    <li>Item 3<li>
                  </ul></li></ul>
                </div>
            </div>
            <a href="javascript:void(0);" class="icon" onclick="menu_function()">&#9776;</a>
        </div>
        <div class="header-cta-div">
            <a class="header-cta-a header-cta-a-enter hvr-wobble-horizontal" href="https://panel.nikpardakht.com/login"><i
                    class="fas fa-sign-in-alt"></i> ورود</a>
            <a class="header-cta-a header-cta-a-reg hvr-wobble-horizontal"
               href="https://panel.nikpardakht.com/user/register"><i class="fas fa-user-plus"></i> ثبت نام</a>
        </div>
    </div>
</header>
<body style="direction: rtl">
<div class="body-sec" style="background: #BFBFC0">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
<script src="header.js"></script>

</body>
</html>

还有一个现场代码笔示例来玩转:https://codepen.io/Ev1tw1n/pen/OrOxQE

关于javascript - 使用 w3schools 方法嵌套下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53985235/

上一篇：javascript - 在嵌套 for 循环内的 super 测试响应后修改对象的问题

下一篇：javascript - 在 jquery 或 javascript 中排序项目

相关文章：

javascript - 有没有办法创建从另一个站点加载源的 SharedWorker ？

javascript - Backbone .js |我如何存储 View 的元素以供以后检索？

javascript - 更高效的可折叠列表定位

html - 单击按钮时如何更改 div 中的文本？

javascript - 如何使我的下拉菜单正常工作(下 zipper 接不起作用)

javascript - 在单击以在Angular 9中上传文件之前显示图像？

Javascript变量范围混淆

javascript - javascript中相同对象名称的总和

javascript - 为什么 javascript 无法获取 php 生成的 html 的值？

javascript - 单选按钮+复选框组合

©2024 IT工具网  联系我们