У меня проблема с моей навигационной панелью, особенно с моим меню DropDown.
Моя навигационная панель переходит в подменю / мобильную навигационную панель, если устройство пользователя недостаточно широкое, чтобы отображать всеМои ссылки навигационной панели, однако, когда этот вид загружен, мое выпадающее меню не отображается правильно (я предоставлю рисунок ниже).
https://gyazo.com/0be3c18b17ca6844b45504ccf7bef943
Как показано в GIFмое «Главное» меню переходит в верхний левый угол, а «Мобильное меню переключения» переходит в нижний правый угол, есть ли способ исправить это?Мне бы все же хотелось, чтобы дом находился слева, а мобильное меню - справа, я бы хотел, чтобы они были правильно выровнены (левый центр и правый центр), поскольку на данный момент они имеют диагональ, которая неВыглядит хорошо.По какой-то причине он также увеличивает высоту меню, оставляя пустое пространство, что не является идеальным, поскольку весь смысл «Мобильного представления» заключается в экономии места на странице.
Любая помощь по исправлениювопросы выравнивания приветствуются.
(Раскрывающееся меню также выравнивается по центру, в то время как в «Мобильном представлении» есть способ выровнять раскрывающееся подменю с левой стороны, как и другие элементы вмобильное представление?)
CSS & Html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Change Navbar view if device has a small width -->
<script>
function MobileNav() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
<style>
html {
color: white;
margin: 0 auto;
width: 90%;
height: 90%;
}
.navbar, .holder, .dropdown, .dropbtn, dropdown-content {
text-align: center;
}
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: hidden;
}
/* Navbar links */
.navbar a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: #4CAF50;
}
/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
display: none;
}
/*--------------------------------------------------------*/
/* Related to Dropdown Menu */
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: inline-block
}
/* Style the dropdown button to fit inside the navbar */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on navbar links and the dropdown button on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown container - to position the dropdown content */
.dropdown {
display: inline-block;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* When the screen is less than 680 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 680px) {
/*Hide all menu's except for "Home"*/
.navbar a:not(:first-child), .dropdown .dropbtn {
display: none;
overflow:hidden;
}
/* Align "Home" to left side*/
.navbar a:first-child {
float: left;
display: inline-block;
}
/* Align Mobile Navbar to right side*/
.navbar a.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 680px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .dropdown {
float: none;
}
.navbar.responsive .dropdown-content {
position: relative;
}
.navbar.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar" id="myTopnav">
<div class="holder">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
<div class="dropdown">
<button class="dropbtn">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="MobileNav()">☰</a>
</div>
</body>
</html>