transition

[Неугомонный]

В общем понял чуть чуть transition что margin-top это к чему мы применяем,  1s; это время за сколько выполниться смещение к margin-top: 0;, но сижу ломаю голову как заставить салатовую полоску  border-right заполнять весь блок справа на лево при наведении на блок с ссылка? 

https://jsfiddle.net/nzw4ghkq/

Edited July 31, 2019 by Неугомонный

[AlexZaw]

  On 7/31/2019 at 7:00 PM, Неугомонный said:

как заставить салатовую полоску  border-right заполнять весь блок

Expand  

А как вы себе это представляете? :) border на то и border что идет по краю элемента, но никак не внутри элемента.
Даже название на это намекает :)

[Неугомонный]

  On 7/31/2019 at 7:20 PM, AlexZaw said:

А как вы себе это представляете? :) border на то и border что идет по краю элемента, но никак не внутри элемента.
Даже название на это намекает :)

Expand  

Я не представляю себе никак, я только пытаюсь и много еще не понимаю 

Как такую задумку сделать подтолкните ))

[AlexZaw]

  On 7/31/2019 at 7:22 PM, Неугомонный said:

Как такую задумку сделать

Expand  

Сделайте с помощью псевдоэлемента. Изначально его расположите за границей блока с ссылкой, и по наведению смещайте влево

[Неугомонный]

  On 7/31/2019 at 7:28 PM, AlexZaw said:

Сделайте с помощью псевдоэлемента. Изначально его расположите за границей блока с ссылкой, и по наведению смещайте влево

Expand  

::before ?

[AlexZaw]

  On 7/31/2019 at 7:29 PM, Неугомонный said:

::before ?

Expand  

Без разницы хоть :before,  хоть :after

[Неугомонный]

  On 7/31/2019 at 7:31 PM, AlexZaw said:

Без разницы хоть :before,  хоть :after

Expand  

Через background-color ? Заливать

[AlexZaw]

  On 7/31/2019 at 7:39 PM, Неугомонный said:

Через background-color

Expand  

А как вы хотите двигать background-color? Я же выше написал что двигать нужно сам псевдоэлемент, с уже залитым фоном.

Делаете ему абсолютное позиционирование, выносите за границу родителя, и по наведению смещаете влево.

[Неугомонный]

  On 7/31/2019 at 7:44 PM, AlexZaw said:

А как вы хотите двигать background-color? Я же выше написал что двигать нужно сам псевдоэлемент, с уже залитым фоном.

Делаете ему абсолютное позиционирование, выносите за границу родителя, и по наведению смещаете влево.

Expand  

https://jsfiddle.net/c16ypvgo/

Что то у меня ничего не получается ..

Edited July 31, 2019 by Неугомонный

[AlexZaw]

  On 7/31/2019 at 8:01 PM, Неугомонный said:

Что то у меня ничего не получается ..

Expand  

Потому, что вы не слушаете что вам говорят. Я вам говорю о перемещении псевдоэлемента, а вы, зачем-то, пытаетесь задать transition для фона, к тому же не правильно. Даже если появиться он у вас плавно, он появиться по всей фигуре сразу, а не так как вам нужно. Мой вам совет, бросайте вы учить html и css кусками. Начните учить нормально. Иначе вы ничего не добьетесь.

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

[Неугомонный]

Завтра разберусь

Edited July 31, 2019 by Неугомонный

[Неугомонный]

  On 7/31/2019 at 8:14 PM, AlexZaw said:

Потому, что вы не слушаете что вам говорят. Я вам говорю о перемещении псевдоэлемента, а вы, зачем-то, пытаетесь задать transition для фона, к тому же не правильно. Даже если появиться он у вас плавно, он появиться по всей фигуре сразу, а не так как вам нужно. Мой вам совет, бросайте вы учить html и css кусками. Начните учить нормально. Иначе вы ничего не добьетесь.

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

Expand  

Мне кажется можно обойтись без before и after https://jsfiddle.net/q29sck31/

Edited July 31, 2019 by Неугомонный

[AlexZaw]

  On 7/31/2019 at 10:39 PM, Неугомонный said:

Мне кажется можно обойтись без before и after

Expand  

Можно, но придется использовать обычный элемент. Ваш вариант с изменением ширины тоже можно использовать, но только, опять же, не для самой ссылки. Иначе она изначально будет очень маленькой и вам придется попадать курсором в эти самые 5 пикселей чтобы ссылка показалась. Отсюда вывод - придется использовать какой-то другой элемент. Псевдо или обычный. Можно конечно и ваш вариант, с изменением ширины у ссылки, подправить, но тогда придется делать обертку для самой ссылки, а это опять же добавлять новый элемент, и плюс задавать ширину для этой обертки.

То что вы ищете разные способы решения проблемы это очень хорошо, но вот то, что вы не совсем понимаете то что делаете это плохо. Я вам еще раз советую - пройдите бесплатные уроки на htmlacademy, это даст вам более-менее нормальную базу для дальнейшего изучения. По крайней мере вы сможете сходу отметать некоторые нерабочие варианты решения проблемы, что опять же сэкономит вам время в дальнейшем.

[Неугомонный]

  On 8/1/2019 at 8:13 AM, AlexZaw said:

Можно, но придется использовать обычный элемент. Ваш вариант с изменением ширины тоже можно использовать, но только, опять же, не для самой ссылки. Иначе она изначально будет очень маленькой и вам придется попадать курсором в эти самые 5 пикселей чтобы ссылка показалась. Отсюда вывод - придется использовать какой-то другой элемент. Псевдо или обычный. Можно конечно и ваш вариант, с изменением ширины у ссылки, подправить, но тогда придется делать обертку для самой ссылки, а это опять же добавлять новый элемент, и плюс задавать ширину для этой обертки.

То что вы ищете разные способы решения проблемы это очень хорошо, но вот то, что вы не совсем понимаете то что делаете это плохо. Я вам еще раз советую - пройдите бесплатные уроки на htmlacademy, это даст вам более-менее нормальную базу для дальнейшего изучения. По крайней мере вы сможете сходу отметать некоторые нерабочие варианты решения проблемы, что опять же сэкономит вам время в дальнейшем.

Expand  

https://jsfiddle.net/p3ahomcL/ Вот ну всё же получилось и вроде правильно

 

а как себе начал переносить нифига не выходит, что  я не так делаю? 

https://jsfiddle.net/jqgaut9y/2/ 

Edited August 1, 2019 by Неугомонный

[AlexZaw]

  On 8/1/2019 at 9:38 AM, Неугомонный said:

Лучше подскажи как эту фигню фиксануть

Expand  

Добавить для .dropdown-menu свойство z-index:1; и для .dropdown-item свойство position:relative;

[Неугомонный]

  On 8/1/2019 at 9:52 AM, AlexZaw said:

Добавить для .dropdown-menu свойство z-index:1; и для .dropdown-item свойство position:relative;

Expand  

спасибо, а так я всё правильно замутил?  )))

Edited August 1, 2019 by Неугомонный

[AlexZaw]

  On 8/1/2019 at 9:54 AM, Неугомонный said:

спасибо, а так я всё правильно замутил?  )))

Expand  

Ну если не считать фиксированных размеров, то да.

  On 8/1/2019 at 9:38 AM, Неугомонный said:

а как себе начал переносить нифига не выходит, что  я не так делаю? 

Expand  

Не учитываете наличие фона у ссылок который перекрывает псевдоэлемент.
У псевдоэлемента задан z-index:-1; это означает что он находится "под" родителем. А так как у родителя задан непрозрачный фон, то псевдоэлемент просто не видно.

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

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

[Неугомонный]

  On 8/1/2019 at 10:16 AM, AlexZaw said:

Ну если не считать фиксированных размеров, то да.

Expand  

Т.е про width: 230px; ?

[AlexZaw]

  On 8/1/2019 at 10:31 AM, Неугомонный said:

Т.е про width: 230px; ?

Expand  

Да, но это, в принципе не критично и подойдет для большинства экранов.

[Неугомонный]

  On 8/1/2019 at 10:40 AM, AlexZaw said:

Да, но это, в принципе не критично и подойдет для большинства экранов.

Expand  

@media only screen and (min-width: 1280px) 

я это предусмотрел в чистовике скажем так ,Задано 

Edited August 1, 2019 by Неугомонный

[Неугомонный]

  On 8/1/2019 at 10:40 AM, AlexZaw said:

Да, но это, в принципе не критично и подойдет для большинства экранов.

Expand  

Как выровнять ссылка 3 чтобы была по правому краю над  ссылками что выпадают? 

[AlexZaw]

  On 8/1/2019 at 2:47 PM, Неугомонный said:

Как выровнять ссылка 3

Expand  

По хорошему нужно не ссылку ровнять, а именно выпадающее меню по ссылке