【发布时间】：2021-01-28 13:48:36
【问题描述】：
我的汉堡菜单有一个小错误。当我单击汉堡包图标时，它按应有的方式运行并打开和关闭，问题是当它关闭时，我可以看到导航菜单顶部的顶部链接的一小部分。您可以在图像中看到的小线是导航链接右侧 1px 的边框。导航链接的标题向左浮动。
这是打开后的样子：
/* ---------------------------------------------------------------------------------------------------------------------------
START OF NAVIGATION MENU
--------------------------------------------------------------------------------------------------------------------------- */
.header a {
color: #000;
} /* Sets colour of the links within the navigation bar */
.header {
background-color: #fff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
position: static;
overflow: hidden;
width: 100%;
z-index: 3;
} /* Sets colour, adds box shadow underneath nav, makes nav static and sets positioning */
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
padding: 10px 0px;
} /* Sets positioning and background colour of the nav links */
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #b3b2b2;
text-decoration: none;
text-transform: uppercase;
} /* Sets positioning, adds border line, and removes any text decoration */
.header li a {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
} /* Sets positioning, adds border line, and removes any text decoration */
.header li a:hover,
.header .menu-btn:hover,
.header li a:focus {
background-color: #f8f7f7;
background-size: 100% 2px;
} /* Sets background colour of nav links when you hover over them */
.header .logo {
display: block;
float: left;
font-size: 3em;
padding: 10px 0px;
text-decoration: none;
margin-left:15%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .25s ease-out;
margin-right: 15%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
margin-right: 5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
.header .menu-icon .navicon:before {
top: 5px;
} /* Sets positioning of the third part of the hamburger menu */
.header .menu-icon .navicon:after {
top: -5px;
} /* Sets positioning of the first part of the hamburger menu */
.header .menu-btn {
display: none;
} /* Prevents small additional hamburger button from appearing on the screen */
.header .menu-btn:checked ~ .menu {
max-height: 500px;
} /* Sets the maximum height that the hamburger menu can reach while opened */
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
} /* Prevents middle part of the hamburger menu displaying through the cross while the hamburger menu is open */
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
} /* Sets positioning of one part of the hamburger menu icon create a cross */
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
} /* Sets positioning of one part of the hamburger menu icon create a cross */
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
} /* Sets positioning of the hamburger icon when closed and opened */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 104em = 1668px */
@media only screen and (max-width: 1668px) {
.header .logo {
font-size: 3.2em;
margin-left: 5%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
transition: max-height .3s ease-out;
margin-right: 5%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
padding: 38px 10px;
margin-right: 2.5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
width: 22px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 104em = 1668px */
@media only screen and (max-width: 1310px) {
.header .logo {
font-size: 3.2em;
margin-left: 5%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
margin-right: 5%;
margin-left: 5%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
padding: 38px 0px;
margin-right: 5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
width: 22px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 1471em = 1471px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 92em = 1471px */
@media (min-width: 1310px) {
.header li {
float: left;
} /* Sets floating position of the nav links */
.header li a {
padding: 20px 25px;
} /* Sets padding to the nav links */
.header .menu {
clear: none;
float: right;
max-height: none;
} /* Sets positioning of nav links and sets float */
.header .menu-icon {
display: none;
} /* Stops the hamburger menu icon from appearing when in other views outwith mobile view */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 48em = 768px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 36em = 577px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 36em = 577px */
@media only screen and (max-width: 577px) {
.header .logo {
font-size: 3.2em;
margin-left:2.5%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
transition: max-height .3s ease-out;
margin-right: 2.5%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
padding: 38px 10px;
margin-right: 2.5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
width: 22px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 36em = 577px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
END OF RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF ALERT MESSAGE BOX
--------------------------------------------------------------------------------------------------------------------------- */
.alert-message {
text-align: left;
margin-left: 15%;
margin-right: 15%;
} /* Adjusts sizing and alignment of alert message underneath the navigation bar */
/* 85em = 1366px*/
@media (max-width: 1669px) {
.alert-message {
text-align: left;
margin-left: 5%;
margin-right: 5%;
} /* Adjusts sizing and alignment of alert message underneath the navigation bar */
/* 64em = 1023px*/
@media (max-width: 1023px) {
.alert-message {
text-align: center;
margin-left: 7.5%;
margin-right: 7.5%;
} /* Adjusts sizing and alignment of alert message underneath the navigation bar */
}
}
/* 48em = 768px*/
@media (max-width: 768px) {
.alert-message {
text-align: center;
margin-left: 5%;
margin-right: 5%;
} /* Adjusts sizing and alignment of alert message underneath the navigation bar */
}
/* 36em = 577px*/
@media (max-width: 577px) {
.alert-message {
text-align: center;
margin-left: 2.5%;
margin-right: 2.5%;
} /* Adjusts sizing and alignment of alert message underneath the navigation bar */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF ALERT MESSAGE BOX
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF HOME SECTION IMAGE
--------------------------------------------------------------------------------------------------------------------------- */
.home-section-image {
background-image: linear-gradient(rgba(8, 8, 8, 0.15), rgba(8, 8, 8, 0.35)),
url("../images/pexels-photo-258109.jpg");
opacity: .90;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
/* Set a specific height */
min-height: 650px;
/* Create the image scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} /* Sets sizing, positioning and adds scroll effect the main home page image */
/* 85em = 1366px*/
@media (max-width: 1669px) {
.home-section-image {
min-height: 625px;
} /* Sets sizing, positioning and adds scroll effect the main home page image */
}
/* 64em = 1023px*/
@media (max-width: 1023px) {
.home-section-image {
min-height: 625px;
} /* Sets sizing, positioning and adds scroll effect the main home page image */
}
/* 48em = 768px*/
@media (max-width: 768px) {
.home-section-image {
min-height: 625px;
} /* Sets sizing, positioning and adds scroll effect the main home page image */
}
/* 36em = 577px*/
@media (max-width: 577px) {
.home-section-image {
min-height: 625px;
} /* Sets sizing, positioning and adds scroll effect the main home page image */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF HOME SECTION IMAGE
--------------------------------------------------------------------------------------------------------------------------- */<!DOCTYPE html>
<html>
<head>
<title>KPM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/home-page.css?v=<?php echo time(); ?>">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> <!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@500&display=swap" rel="stylesheet"> <!-- Google Font (logo) -->
<script src="javascript/responsive-nav.js?v=<?php echo time(); ?>"></script>
</head>
<body>
<header class="header">
<a href="" class="logo">KPM</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#" class="middle">Home</a></li>
<li><a href="#" class="middle">Memorials</a></li>
<li><a href="#" class="middle">Services</a></li>
<li><a href="#" class="middle">Other Products</a></li>
<li><a href="#" class="middle">Materials</a></li>
<li><a href="#" class="middle">Designs</a></li>
<li><a href="#" class="middle">About</a></li>
<li><a href="#" class="middle">Contact</a></li>
</ul>
</header>
<div class="alert-message">
<p><strong>Coronavirus (COVID-19) Statement: </strong>To comply with the current restrictions, we regret that we are closed to visitors. However, we are still
operating behind closed doors during normal business hours, so please contact us by telephone or email.</p>
</div>
<section id="home" class="home-section">
<!--<h1 class="home-section-title"><span>PositiveTalkwithAJ</span></h1>-->
<div class="home-section-image">
</div>
</section>
<h2 style="margin-left:15%;">This is currently a test template!</h2>
<?php
include 'footer/footer.php';
?>
</body>
</html>【问题讨论】：
标签： html css hamburger-menu