Навигация по меню гамбургера (небольшая проблема)

ProgramBox

Навигация по меню гамбургера (небольшая проблема)

Post author:admin
Запись опубликована:10 декабря, 2022
Post category:Вопросы по программированию

#html #css #hamburger-menu

#HTML #css #гамбургер-меню

Вопрос:

У меня небольшая ошибка с моим меню гамбургера. Он функционирует так, как должен, и открывается и закрывается, когда я нажимаю на значок гамбургера, проблема в том, что когда он закрыт, я вижу очень небольшую часть верхней ссылки, которая будет находиться в верхней части меню навигации. Маленькая строка, которую вы можете видеть на изображении, представляет собой границу в 1 пиксель справа от навигационных ссылок. Заголовки навигационных ссылок перемещаются влево.

Вот как это выглядит при открытии:

 /* ---------------------------------------------------------------------------------------------------------------------------
  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=Latoamp;display=swap" rel="stylesheet"> <!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather Sans:wght@500amp;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>

Развернуть фрагмент

Ответ №1:

было бы быстрее исправить наличие где-нибудь рабочего примера. Я бы поспорил, что это основано на заполнении / поле.

1. Есть ли что-нибудь, что вы могли бы предложить мне загрузить для рабочего примера?

2. нет, это ваш выбор, потому что есть десятки возможностей (codepen, pastebin, …). Разместите его где-нибудь, где вы чувствуете себя комфортно — даже в своем собственном веб-пространстве.

3. В идеале вы должны отредактировать свой пост выше, чтобы поместить код в доступный для выполнения фрагмент.

4. Теперь он должен быть доступен в виде фрагмента.

5. как уже упоминалось: это дополнение «.menu» (ваш UL). Установите в вашем фрагменте кода значение padding:0 и посмотрите, оно исчезло.

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Сбой компиляции из-за ненужной зависимости зависимости

Как обработать краткое описание с помощью NLP

как установить изображение в качестве фона в blackberry