Элементы навигации не отображаются на больших экранах

ProgramBox

Элементы навигации не отображаются на больших экранах

Post author:admin
Запись опубликована:11 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css #clip-path

#javascript #HTML #css #clip-path

Вопрос:

Мои элементы навигации не отображаются на больших экранах, однако на мобильных устройствах они отображаются так, как ожидалось. Кто-нибудь может помочь мне с решением. Я подозреваю, что это связано со свойством clip-path, однако я попытался поиграть с ним и не получил никакой радости.Я хочу, чтобы элементы навигации отображались на больших экранах так, как они отображаются на мобильных устройствах.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.navBar {
  position: relative;
  height: 10vh;
  display: flex;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #003300;
}

.navbrand {
  padding: .8em 0 0 1em;
  /*    margin: 2.5em 0;*/
}

.logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
}

.navList {
  position: absolute;
  background: #003300;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  clip-path: circle(100px at 90% -10%);
  -webkit-clip-path: circle(100px at 90% -10%);
  transition: all 1s ease-out;
  pointer-events: none;
  padding-top: 9em;
}

.navList.open {
  clip-path: circle(1000px at 90% -10%);
  -webkit-clip-path: circle(1000px at 90% -10%);
  pointer-events: all;
}

.navItem {
  text-align: center;
  padding-top: 1.2em;
}

.navLink {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
}

.navLink:nth-child(1) {
  transition: all 0.5s ease 0.2s;
}

.navLink:nth-child(2) {
  transition: all 0.5s ease 0.4s;
}

.navLink:nth-child(3) {
  transition: all 0.5s ease 0.6s;
}

.navLink:nth-child(4) {
  transition: all 0.5s ease 0.6s;
}

.navLink:nth-child(5) {
  transition: all 0.5s ease 0.6s;
}

.navLink:nth-child(6) {
  transition: all 0.5s ease 0.6s;
}

.navLink.fade {
  opacity: 1;
}

.navLink:focus {
  color: #ff0000;
  opacity: .3;
}

.navLink:hover {
  color: #ff0000;
  opacity: .6;
}

.socialContact {
  display: flex;
  margin: 1em auto;
}

.socialLink {
  background: #fafafa;
  width: 40px;
  height: 40px;
  margin: 1em 0.625em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.socialFB {
  font-size: 1.5rem;
  color: #4267b2;
  padding: 1em;
}

.socialTwitter {
  font-size: 1.5rem;
  color: #1da1f2;
  padding: 1em;
}

.socialInsta {
  font-size: 1.5rem;
  color: #000;
  padding: 1em;
}

.hamburger-btn {
  position: absolute;
  cursor: pointer;
  right: 5%;
  top: 50%;
  transform: translate(-5%, -50%);
  z-index: 2;
}

.hamburger-btn_burger {
  width: 20px;
  height: 3px;
  background: #fff;
  margin: 5px;
  transition: all .5s ease-in-out;
}

.hamburger-btn_burger::before,
.hamburger-btn_burger::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background: #fff;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}

.hamburger-btn_burger::before {
  transform: translateY(-7px);
}

.hamburger-btn_burger::after {
  transform: translateY(7px);
}

.hamburger-btn.open .hamburger-btn_burger {
  transform: translateX(-50px);
  background: transparent;
}

.hamburger-btn.open .hamburger-btn_burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.hamburger-btn.open .hamburger-btn_burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

@media screen and (min-width: 768px) {
  .navBar {
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
  .navList {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .navItem {
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 2em;
  }
  .navLink {
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0 70px 0 0;
    text-align: left;
    border-bottom-style: none;
    padding: 0;
  }
  .navbrand {
    margin-bottom: 1em;
  }
  .logo {
    margin-top: 0;
  }
  .hamburger-btn {
    display: none;
  }
  .socialContact {
    display: none;
  }
  .logo:focus {
    color: #ff0000;
    opacity: .1;
  }
  .logo:hover {
    color: #ff0000;
  }
}

 <nav class="navBar">

  <div class="navbrand">
    <a href="#" class="logo">XandY Junior School</a>
  </div>

  <div class="hamburger-btn">
    <div class="hamburger-btn_burger"></div>
  </div>
  <ul class="navList">
    <li class="navItem">
      <a href="#" class="navLink"></a>
    </li>
    <li class="navItem">
      <a href="story.html" class="navLink">Our Story</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Sports amp; Clubs</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Admissions</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Parents</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">BOSA</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Contact Us</a>
    </li>
    <li class="socialContact">
      <a href="#" class="socialLink"><i class="fab fa-facebook-f socialFB"></i></a>
      <a href="#" class="socialLink"><i class="fab fa-twitter socialTwitter"></i></a>
      <a href="#" class="socialLink"><i class="fab fa-instagram socialInsta"></i></a>
    </li>
  </ul>
</nav>

Ответ №1:

Вы правы, путь к клипу — одна из проблем. Но фон также является проблемой, поскольку он перекрывает существующее содержимое при удалении clip-path

Я смог увидеть ваши элементы «navlist», используя приведенный ниже css. Прокомментировал background, clip-path amp; Padding

 .navList {
  position: absolute;
  /* background: #003300; */
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* clip-path: circle(100px at 90% -10%); */
  /* -webkit-clip-path: circle(100px at 90% -10%); */
  transition: all 1s ease-out;
  pointer-events: none;
  /* padding-top: 9em; */
}

Хотя, я не могу видеть панель навигации и в мобильном режиме, когда я использую dev-tools.

1. Тем не менее, это не решило проблему, потому что она ведет себя не так, как должна

2. Ваш вопрос должен был помочь вам понять, почему он не отображался на большом экране, и это отвечает на этот вопрос. И я бы порекомендовал вам самостоятельно отформатировать свой CSS на основе этого. Переполнение стека следует использовать в качестве источника помощи при отладке. Если вы ожидаете большего, пожалуйста, четко укажите в своем вопросе, каким должен быть ваш ожидаемый результат.

3. Мне нужна помощь в отладке, в чем может быть проблема.

Ответ №2:

он не будет отображаться на больших экранах в соответствии с «начальной загрузкой» для того, чтобы панель навигации не отображалась с использованием класса display: none css на большом экране.

поэтому я рекомендую вам не использовать панель навигации из bootstrap, и вы можете легко сделать это с помощью html — css.

1. Даже при использовании элементов HTML без классов он все равно не будет отображаться.

2. да, потому что вам нужно использовать некоторый jQuery для отображения и скрытия элементов, зависит от ширины вашего экрана в медиа-запросе

3. @Tendekai проверьте эту ссылку на тот же случай, что и у вас codepen.io/Slayer98/pen/qBEKeMJ

Ответ №3:

 $(document).ready(function(){
$(".hamburger-btn").click(function(){
  $(".navList").toggle();
});
});

 body{
margin: 0;
padding: 0;
}
.navbrand {
display: block;
background: darkgreen;
padding: 10px;
}
.logo {
padding: 10px;
color: #fff;
text-decoration: none;
}
.hamburger-btn {
position: absolute;
top: -50px;
right: -3px;
background: darkgreen;
width: 150px;
height: 150px;
border-radius: 150px;
}
.hamburger-btn_burger {
width: 30px;
height: 4px;
background: #fff;
display: block;
position: absolute;
bottom: 77px;
right: 60px;
}
.hamburger-btn_burger::before{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
top: -8px;
z-index: 9;
}
.hamburger-btn_burger::after{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
bottom: -8px;
z-index: 9;
}
.navList{
display: none;
background: darkgreen;
padding: 15px;
position: absolute;
top: 22px;
width: 100%;
z-index: 1;

}
.navList li{list-style: none;display: block;}
.navList li a{display: block; color: #fff; text-decoration: none; padding: 10px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navBar">

  <div class="navbrand">
    <a href="#" class="logo">XandY Junior School</a>
  </div>

  <div class="hamburger-btn">
    <div class="hamburger-btn_burger"></div>
  </div>
  <ul class="navList">
    <li class="navItem">
      <a href="#" class="navLink">About Us</a>
    </li>
    <li class="navItem">
      <a href="story.html" class="navLink">Our Story</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Sports amp; Clubs</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Admissions</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Parents</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">BOSA</a>
    </li>
    <li class="navItem">
      <a href="#" class="navLink">Contact Us</a>
    </li>
    <li class="socialContact">
      <a href="#" class="socialLink"><i class="fab fa-facebook-f socialFB"></i></a>
      <a href="#" class="socialLink"><i class="fab fa-twitter socialTwitter"></i></a>
      <a href="#" class="socialLink"><i class="fab fa-instagram socialInsta"></i></a>
    </li>
  </ul>
</nav>

Не могли бы вы взглянуть на этот код…

1. я пытался поиграть с тем, что я считал своими решениями, и это не сработало

2. Извините, но я не мог понять. Мой пример сработал или нет ..??

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

4. У меня нет изображения шаблона. Я хочу, чтобы элементы навигации, например, «О нас», отображались на больших экранах, потому что в настоящее время они не отображаются.