• Страница 1 из 1
  • 1
Форум » Разная тематика » Просьба/Услуга » Не появляются навигация в мобильном виде (Панели навигации и активные пункты меню с условием)
Не появляются навигация в мобильном виде
Kosten
Дата: Вторник, 2020-02-25, 18:47 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Не могу понять, почему ошибку выдает при клике по кнопке, где должно появится все запросы, что изначально видны в горизонтальном положение в навигаций. По интернету походил, там на свет этого меню не нашел, но просто по мне отлично сделано под мобильные аппараты, и на широком экране смотрится по лучше других, но функция на мобильном, как появление выдвижение не работает.

HTML

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

<div id="navbar-container" class="navbar">
   <nav>
     <h1>Portfolio</h1>
       <ul>
         <li><a href="#">home</a></li>
         <li><a href="#">about</a></li>
          <li><a href="#">skills</a></li>
          <li><a href="#">projects</a></li>
         <li><a href="#">contact</a></li>
       </ul>
        <a href="javascript:void(0);" class="hamburger-menu" onclick="toggleNav()">
          <i class="fa fa-bars"></i>
        </a>
   </nav>
  </div>

CSS

Код
@import url('https://fonts.googleapis.com/css?family=Handlee');

@import url('https://fonts.googleapis.com/css?family=Lato');

* {
  padding: 0;
  margin: 0;
}

/*
====================
  Navbar
====================
*/

#navbar-container {
  position: fixed;
  width: 100%;
  overflow: hidden;
  height: 80px;
  background-color: black;
  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.3);
}

#navbar-container nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

#navbar-container nav h1 {
  font-family: 'Handlee', cursive;
  font-size: 35px;
  color: white;
  text-align: left;
  padding: 10px 10px 10px 30px;
}

#navbar-container nav ul {
  display: flex;
  list-style: none;
  align-items: center;
  padding-bottom: 10px;
}

#navbar-container nav ul li {
  font-size: 20px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  color: white;
  padding: 0px 15px 0px 15px;
}

#navbar-container nav ul li:last-child {
  padding-right: 50px;
}

#navbar-container nav a {
  text-decoration: none;
  color: white;
}

#navbar-container nav a:hover {
  color: rgba(0,212,255,1);
}

#navbar-container .hamburger-menu {
  display: none;
}

/*
====================
  Landing Page
====================
*/

#landing-page-container {
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(64,221,196,1) 0%, rgba(0,212,255,1) 100%);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
}

#landing-page-container h1 {
  text-align: center;
  font-family: 'Handlee', cursive;
  color: black;
  font-size: 50px;
}

#landing-page-container h3 {
  text-align: center;
  font-family: 'Handlee', cursive;
  color: black;
  font-size: 30px;
}

/*
====================
  About
====================
*/

#about-container {
  background: #fff;
/*   width: 100vw;
  height: 100vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

#about-container h1 {
  text-align: center;
  font-family: 'Handlee', cursive;
  color: black;
  font-size: 50px;
  margin-top: 100px;
}

#about-container p {
  text-align: justify;
  font-family: 'Lato', cursive;
  color: black;
  font-size: 15px;
  padding: 50px;
}

/*
====================
  Media Queries
====================
*/

@media screen and (max-width: 700px) {
  #navbar-container ul li {
    display: none;
  }
  #navbar-container .hamburger-menu {
    float: right;
    display: block;
    font-size: 30px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 600px) {
  #navbar-container .responsive {
    position: relative;
  }
  #navbar-container .responsive .hamburger-menu {
    position: absolute;
    right: 0;
    top: 0;
  }
  #navbar-container .responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

JS

Код
function toggleNav {
  var x = document.getElementById("navbar-container");
  if (x.className === "navbar") {
    x.className += " responsive";
  }
  else {
    x.className = "navbar";
  }
}


See the Pen
Portfolio Layout
by Kyla Stoneberg (@kylastoneberg)
on CodePen.


Страна: (RU)
-SAM-
Дата: Среда, 2020-02-26, 10:43 | Сообщение 2
Оффлайн
Друзья сайта
Сообщений:720
Награды: 29


Нужен источник, откуда брали. Видно, что оно недописаное какое-то (есть стили на about-container, но блока с этим id нет в коде). - просто не было в посте, в демо полный код. Функционал на переключатель поломан (возможно, что намеренно): function toggleNav() - красным пометил чего не хватает. Если пофиксить, то скрипт срабатывает (а далее уже что-то не так в стилизации, видимо).

UPD.:
Цитата Kosten ()
Источник предоставлен выше
Понятно на счёт откуда бралось (думал, что был материал про это меню, а не просто из "песочницы")... то есть, не факт, что оно вообще доделанное (может, поэтому и скрипт запороли были, что толку от него всё равно потом никакого). Там скрытым остается пункт списка, что вот можно увидеть:
Код
@media screen and (max-width: 700px) {
  #navbar-container.responsive ul li  {
    display: block;
  }
}
Ну, а второе меню - по дизайну похожее, но функционал (исходный код) там другой совсем... хотя бы там работает всё.

UPD.2:
Цитата Kosten ()
Ставил @media, так и списки не появились по клику.
Не починили до этого скрипт переключателя, видимо. Стиль тот я дал для примера (пункты становятся видимыми после), а далее нужно дописывать стилизацию (чтобы было внешне похоже на то, как в другом меню)... это уже у меня не получилось.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Четверг, 2020-02-27, 04:43
Страна: (UA)
Kosten
Дата: Среда, 2020-02-26, 16:23 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Источник предоставлен выше, так получается его по запросу не первый раз нахожу, но тут решил причину найти. Что не дописан, то вероятно.
Страна: (RU)
Kosten
Дата: Среда, 2020-02-26, 17:43 | Сообщение 4
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Больше всего навигация взято с одностраничного сайта, что ближе по дизайну схожи.


See the Pen
zdqso
by Celine (@celincky)
on CodePen.


Страна: (RU)
Kosten
Дата: Четверг, 2020-02-27, 01:16 | Сообщение 5
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Цитата -SAM- ()
Там скрытым остается пункт списка, что вот можно увидеть:

Ставил @media, так и списки не появились по клику.

Больше удивляет, что в сети такого материала нет, думал из портфолио, то в большинстве посмотрел, не нашел близко похожие по коду.
Страна: (RU)
Kosten
Дата: Четверг, 2020-02-27, 21:09 | Сообщение 6
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Главное такого кода нет, видно он идет в портфолио, не зря называется или заголовок Portfolio Layout, где искал по этим ключевым словам, и по сути нет, больше всего какая то линейка шаблонов под таким названием. Просто хочется доработать это меню, что то оно меня зацепило, что поиск идет по кускам кода и пока не чего.
Страна: (RU)
Kosten
Дата: Пятница, 2020-02-28, 00:35 | Сообщение 7
Оффлайн
Администраторы
Сообщений:29329
Награды: 62


Не сдаваясь, по ключам все таки нашел это меню, но разве немного теней на нем нет.


See the Pen
html and css web try JD
by Jahed Hossain (@jahedmirctg)
on CodePen.


Страна: (RU)
Форум » Разная тематика » Просьба/Услуга » Не появляются навигация в мобильном виде (Панели навигации и активные пункты меню с условием)
  • Страница 1 из 1
  • 1
Поиск: