• Страница 1 из 1
  • 1
Как сделать адаптивным меню с SCSS на CSS
Kosten
Среда, 26 Февраля 2020, 23:32 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
Как правильно можно выставить с SCSS на CSS на горизонтальное меню, где оно по умолчанию идет в адаптивном стиле при помощи SCSS. Но здесь нужно перевести на CSS, где ранее переделывал, но с этой навигацией не чего не получается. Здесь только идет стиль на адаптивные кнопки, где если изначально ставить в CSS, то дизайн не как не поменяется, но вот адаптивность пропадает.

Если кто может подсказать, то пожалуйста напишите @media, вот как рас с ним засада. Где также прописывал классы к запросам и выставлял DIV, но не чего не получилось.

Ниже найдете demo страницу:



HTML

Код
<header>
  <h2>ZORNET.RU</h2>
  <input class="switcher" id="menu" type="checkbox"/>
  <label class="open" for="menu">
    <i class="fa fa-bars"></i>
  </label>
  <nav>
    <ul>
      <li><a href="#">ГЛАВНАЯ</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">СКРИПТЫ</a></li>
      <li><a href="#">КОНТАКТЫ</a></li>
    </ul>
    <label class="close" for="menu">
      <i class="fa fa-times"></i>
    </label>
  </nav>
</header>

CSS

Код
*{
  margin: 0;
  padding: 0;
  font-family: 'Montserat', sans-serif;
  color: #fff;
}
body{
  background: #f4f5f8;
  min-height: 100vh;
}

header{
  min-height: 100px;
  background: linear-gradient(-45deg, #00537e, #3aa17e);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.2);
}
.switcher{
  position: absolute;
  visibility: hidden;
  left: -9999px;
}
label{
  font-size: 30px;
  cursor: pointer;
  display: none;
}
ul{
  list-style-type: none;
  display: flex;
}
a{
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 15px;
  transition: .4s;
  
  &:hover{
    color: #3498db;
  }
}

@media screen and(max-width:800px){  
  .open,
  .close{
    display: block;  
  }
  .close{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  .switcher:checked ~ nav{
    right: 0;
  }
  nav{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, #00537e, #3aa17e);
    top: 0;
    right: -100%;
    text-align: center;
    padding: 100px 0;
    transition: .7s
  }
  ul{
    flex-direction: column;
    
    a{
      padding: 20px;
      
      &:hover{
        background-color: rgba(255,255,255,.03);
      }
    }
  }
}

Также идут шрифтовые кнопки и js, который убирал и все также корректно работает.



Демонстрация
Прикрепления: 9199398.png (24.9 Kb) · responsive-menu.zip (3.9 Kb)
Страна: (RU)
Kosten
Четверг, 27 Февраля 2020, 01:20 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
Просто уже интересно, как нужно адаптировать под CSS, где ранее получалось делать адаптивными, но это не как, что нашел по фактуре похожее горизонтальное меню, где поставил градиент, но больше это меню интересно для информации, как его под мобильные настроить.
Страна: (RU)
YaVi
Четверг, 27 Февраля 2020, 11:26 | Сообщение 3
Оффлайн
Vip
Сообщений:40
Награды: 3
Kosten, Если я понял ты хотел перевести данное меню с SCSS в CSS, вот решение.
Код
*{
  margin: 0;
  padding: 0;
  font-family: 'Montserat', sans-serif;
  color: #fff;
}
body{
  background: #f4f5f8;
  min-height: 100vh;
}

header{
  min-height: 100px;
  background: linear-gradient(-45deg, #00537e, #3aa17e);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.2);
}
.switcher{
  position: absolute;
  visibility: hidden;
  left: -9999px;
}
label{
  font-size: 30px;
  cursor: pointer;
  display: none;
}
ul{
  list-style-type: none;
  display: flex;
}
a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 15px;
  transition: .4s;
}
a:hover{
    color: #3498db;
  }

@media screen and (max-width:800px){
.open,.close{
display: block;
max-width:800px;
}
.close{
position: absolute;
top: 40px;
right: 40px;
}
.switcher:checked ~ nav{
right: 0;
}
nav{
position: fixed;
width: 100%;
height: 100vh;
background: linear-gradient(180deg, #00537e, #3aa17e);
top: 0;
right: -100%;
text-align: center;
padding: 100px 0;
transition: .7s
}
ul{
flex-direction: column;
}  
a{
padding: 20px;
}     
a:hover{
background-color: rgba(255,255,255,.03);
}
}


uFive.Ru - Лучшее для web мастеров
Страна: (RU)
Kosten
Четверг, 27 Февраля 2020, 14:43 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
YaVi, спасибо, все отлично получилось, теперь сам по дизайну доработаю, чтоб запросы были видны корректнее.

Прикрепления: 4486860.png (8.7 Kb)
Страна: (RU)
-SAM-
Пятница, 28 Февраля 2020, 14:03 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:897
Награды: 40
Цитата YaVi ()
ul{
flex-direction: column;
}
a{
padding: 20px;
}
a:hover{
background-color: rgba(255,255,255,.03);
}
Если посмотреть код на SCSS, то более правильно было бы так (с учётом вложенности):
Код
ul{
flex-direction: column;
}  
ul a{
padding: 20px;
}     
ul a:hover{
background-color: rgba(255,255,255,.03);
}
Но в данном случае и так работает.
P.S.: в сети также есть конвертеры, так сказать (SCSS to CSS) - можете через них в следующий раз переводить.




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


Сообщение отредактировал
-SAM- - Пятница, 28 Февраля 2020, 14:06
Страна: (UA)
Kosten
Пятница, 28 Февраля 2020, 16:14 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
Там класс прописал, но по сути не пригодился, но поставил под него выставить размер.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: