• Страница 1 из 1
  • 1
Форум » Разная тематика » Просьба/Услуга » Как сделать адаптивным меню с SCSS на CSS (Создание горизонтального меню в адаптивной верстке на CSS3)
Как сделать адаптивным меню с SCSS на CSS
Kosten
Дата: Среда, 2020-02-26, 23:32 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


Как правильно можно выставить с 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
Дата: Четверг, 2020-02-27, 01:20 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


Просто уже интересно, как нужно адаптировать под CSS, где ранее получалось делать адаптивными, но это не как, что нашел по фактуре похожее горизонтальное меню, где поставил градиент, но больше это меню интересно для информации, как его под мобильные настроить.
Страна: (RU)
YaVi
Дата: Четверг, 2020-02-27, 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
Дата: Четверг, 2020-02-27, 14:43 | Сообщение 4
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


YaVi, спасибо, все отлично получилось, теперь сам по дизайну доработаю, чтоб запросы были видны корректнее.

Прикрепления: 4486860.png(8.7 Kb)
Страна: (RU)
-SAM-
Дата: Пятница, 2020-02-28, 14:03 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:727
Награды: 30


Цитата 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- - Пятница, 2020-02-28, 14:06
Страна: (UA)
Kosten
Дата: Пятница, 2020-02-28, 16:14 | Сообщение 6
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


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