• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Общий раздел форума » Просьба с услугами » Как сделать адаптивным меню с SCSS на CSS (Создание горизонтального меню в адаптивной верстке на CSS3)
Как сделать адаптивным меню с SCSS на CSS
Kosten
 		Среда, 26 Февраля 2020, 23:32 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Как правильно можно выставить с 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
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Просто уже интересно, как нужно адаптировать под CSS, где ранее получалось делать адаптивными, но это не как, что нашел по фактуре похожее горизонтальное меню, где поставил градиент, но больше это меню интересно для информации, как его под мобильные настроить.
Страна: (RU)
YaVi
 		Четверг, 27 Февраля 2020, 11:26 | Сообщение 3
Оффлайн
Vip
Сообщений:40
Награды: 3
« 25 »
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
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
YaVi, спасибо, все отлично получилось, теперь сам по дизайну доработаю, чтоб запросы были видны корректнее.
Прикрепления: 4486860.png (8.7 Kb)
Страна: (RU)
-SAM-
 		Пятница, 28 Февраля 2020, 14:03 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
« 597 »
Цитата 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
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Там класс прописал, но по сути не пригодился, но поставил под него выставить размер.
Страна: (RU)
Форум » Общий раздел форума » Просьба с услугами » Как сделать адаптивным меню с SCSS на CSS (Создание горизонтального меню в адаптивной верстке на CSS3)
  • Страница 1 из 1
  • 1
Поиск: