Recommended Posts

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

https://jsfiddle.net/nzw4ghkq/

Edited by Неугомонный

Share this post


Link to post
Share on other sites
18 минут назад, Неугомонный сказал:

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

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

Share this post


Link to post
Share on other sites
1 минуту назад, AlexZaw сказал:

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

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

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

Share this post


Link to post
Share on other sites
Только что, Неугомонный сказал:

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

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

Share this post


Link to post
Share on other sites
1 минуту назад, AlexZaw сказал:

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

::before ?

Share this post


Link to post
Share on other sites
1 минуту назад, Неугомонный сказал:

::before ?

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

Share this post


Link to post
Share on other sites
2 минуты назад, Неугомонный сказал:

Через background-color

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

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

Share this post


Link to post
Share on other sites
30 минут назад, AlexZaw сказал:

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

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

https://jsfiddle.net/c16ypvgo/

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

Edited by Неугомонный

Share this post


Link to post
Share on other sites
3 минуты назад, Неугомонный сказал:

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

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

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

Share this post


Link to post
Share on other sites
2 часа назад, AlexZaw сказал:

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

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

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

Edited by Неугомонный

Share this post


Link to post
Share on other sites
9 часов назад, Неугомонный сказал:

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

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

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

Share this post


Link to post
Share on other sites
1 час назад, AlexZaw сказал:

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

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

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

 

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

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

Edited by Неугомонный

Share this post


Link to post
Share on other sites
11 минут назад, Неугомонный сказал:

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

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

Share this post


Link to post
Share on other sites
2 минуты назад, AlexZaw сказал:

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

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

Edited by Неугомонный

Share this post


Link to post
Share on other sites
4 минуты назад, Неугомонный сказал:

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

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

24 минуты назад, Неугомонный сказал:

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

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

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

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

Share this post


Link to post
Share on other sites
8 минут назад, Неугомонный сказал:

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

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

Share this post


Link to post
Share on other sites
26 минут назад, AlexZaw сказал:

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

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

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

Edited by Неугомонный

Share this post


Link to post
Share on other sites
4 часа назад, AlexZaw сказал:

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

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

Share this post


Link to post
Share on other sites
7 минут назад, Неугомонный сказал:

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,439
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.