固定菜单中的下拉菜单

时间：2018-12-20 12:34:33

标签： javascript html css bootstrap-4

我的问题是关于固定topnav中的下拉菜单。 当我单击“配置文件”下拉菜单时，下拉菜单会更改topnav的大小。我不希望下拉菜单更改topnav的尺寸。我该如何解决？

我的topnav固定在顶部，为此我使用了引导程序。

还有如何将我的按钮的大小设置为下拉菜单中的按钮大小。

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
.topnav {
    overflow: hidden;
    background-color: #333;
    box-shadow: 0 8px 6px -6px black;
}
  
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.actives {
    background-color: #4CAF50;
    color:black;
}
  
.topnav .icon {
    display: none;
}
  
.dropdown {
    float: right;
    overflow: hidden;
}
  
.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 5px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
  
.dropdown-content {
    display: none;
    position: static;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
  
.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: #ddd;
    color: black;
}
  
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}
  
.dropdown:hover .dropdown-content {
    display: block;
}
  
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}
  
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Nav bar -->
    <div class="sticky-top">
            <div class="topnav" id="myTopnav">
                <a href="index.php" class="actives">Početna</a>
                <a href="#about">O nama</a>
           
                <a href="products.php">Proizvodi</a>
                <a href="contact.php">Kontakt</a>
                <div class="dropdown">
                    <button class="dropbtn">Profil
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="">Dodaj proizvod</a>
                        <a href="">Odjava</a>
                    </div>
                </div>
                <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
            </div> 
        </div> 
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>

2 个答案:

答案 0 :(得分：0)

请放在CSS下方

.sticky-top #myTopnav .dropdown {
    position: absolute;
    right: 0;
}

答案 1 :(得分：0)

添加Fixed位置和right 0和top 50像素

.dropdown-content {
        display: none;
        position: fixed;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        right:0;
        top: 50px;
    }


function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
.topnav {
    overflow: hidden;
    background-color: #333;
    box-shadow: 0 8px 6px -6px black;
}
  
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.actives {
    background-color: #4CAF50;
    color:black;
}
  
.topnav .icon {
    display: none;
}
  
.dropdown {
    float: right;
    overflow: hidden;
}
  
.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 5px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
  
.dropdown-content {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right:0;
    top:50px;
}
  
.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: #ddd;
    color: black;
}
  
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}
  
.dropdown:hover .dropdown-content {
    display: block;
}
  
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}
  
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
   .dropdown-content {top:0;}
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Nav bar -->
    <div class="sticky-top">
            <div class="topnav" id="myTopnav">
                <a href="index.php" class="actives">Početna</a>
                <a href="#about">O nama</a>
           
                <a href="products.php">Proizvodi</a>
                <a href="contact.php">Kontakt</a>
                <div class="dropdown">
                    <button class="dropbtn">Profil
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="">Dodaj proizvod</a>
                        <a href="">Odjava</a>
                    </div>
                </div>
                <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
            </div> 
        </div> 
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>

相关问题
最新问题