@puple_gal

Как сокращать меню на мобильном до трех точек?

Есть меню такого вида 5c9b59c085bda983947894.jpeg
По мере сужения экрана нужно сокращать меню до такого вида
5c9b5957ebfcf837308053.jpeg
Может есть какие-то примеры?
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
romanko_vn
@romanko_vn
p.clip {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
   }


<p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы, 
  в таком случае эксцентриситеты и наклоны орбит возрастают.</p>
Ответ написан
@user_tm
Изучи адаптивную верстку, а именно "медиа запросы" где каждый медиа запрос имеет свои правила (т.е. свой код css) и к каждому расширению (размеру) экрана ты прописываешь свои медиа запрос. Вот пример
@media (min-width: 992px) and (max-width: 1199px) {/*это ты типа говоришь браузеру "эй бро браузер
 я хочу при размере экрана от 992px до 1199px вот такие правила:" и пишешь ниже css код для следующих дивов*/
  .div1 {
    width: 200px;
    height: 100px;
  }

  .div2 {
    width: 200px;
    height: 100px;
    background-color: #000;
  }
}/*здесь заканчивается запрос и ниже начинаешь писать другой запрос*/
@media (min-width: 768px) and (max-width: 991px) {/*тут ты снова обращаешься к браузеру и как буд то
 говоришь ему "а вот при размере экрана от 768px до 991px я хочу для тех же дивов другие правила (т.е. др. css код)"  и пишиш другой код*/
 .div1 {
    width: 150px; /*допустим меняешь ширину*/
    height: 100px;
  }

  .div2 {
    width: 200px;
    height: 100px;
    background-color: #353535; /*меняешь цвет можно что у годно сделать и даже отключить див прописав ему display: none;*/
  }
}

вот как то так
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы