Jump to content
  • 0

Как прижать к низу элемент навигационного меню


hike
 Share

Question

Пытаюсь прижать к низу элемент навигационного меню.

Получилось абсолютно позиционировать эл-т относительно .navbar вот так http://plnkr.co/edit/q3nTJA48nmEgzjGG1LE1?p=preview

Однако, при уменьшении окна либо увеличении контента (кол-ва пунктов меню) http://plnkr.co/edit/3RFQhisLDGvGDKrZ535g?p=preview, абсолютно позиционированный пункт меню перекрывает соседние пункты. Как исправить такое поведение?

И еще вопрос. Для экранов планшетов и мобильных устройств (ширина < 992px) при разворачивании меню абсолютно позиционированный пункт перепрыгивает от конца контента к низу страницы. Визуально происходит передергивание изображения. Можно ли этого избежать?

Edited by hike
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

чтобы пункты меню не перекрывались, можно для выпадающего меню сделать отступ снизу равный этому элементу
чтобы закрепить данный элемент снизу экрана (как это у вас сделано), можно попробовать не через absolute, а через fixed
если все же нужно чтобы он был после всех элементов меню то для ul.nav добавьте position:relative;
и что-то у вас там не очень здорово с версткой: среди <li> промелькивают <a> - мне кажется не стоит так делать

Link to comment
Share on other sites

  • 0
13 часа назад, Switch74 сказал:

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

Не помогло. http://plnkr.co/edit/7sz7xL8KqXGwkkR7wnZD?p=preview

.navbar{
  padding-bottom:60px;
}
Цитата

чтобы закрепить данный элемент снизу экрана (как это у вас сделано), можно попробовать не через absolute, а через fixed

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

Цитата

если все же нужно чтобы он был после всех элементов меню то для ul.nav добавьте position:relative;

Тогда при уменьшении кол-ва пунктов меню, последний пункт меню не будет прижат к низу экрана, а будет прилеплен к контенту.

Цитата

и что-то у вас там не очень здорово с версткой: среди <li> промелькивают <a> - мне кажется не стоит так делать

Такой подход к созданию меню применяют https://htmlacademy.ru/courses/50 и https://getbootstrap.com/docs/3.3/components/#navbar

А как бы Вы сделали?

Link to comment
Share on other sites

  • 0

Все-таки никак не пойму, отчего футер перекрывает контент при уменьшении окна браузера в моем примере http://plnkr.co/edit/Fec2pBVzFcuKVQB8Zeea?p=preview , а в примере-оригинале не перекрывает http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/ Я добавила все-лишь несколько ничего не значащих классов и перенесла относительное позиционирование с элемента html на элемент div.col-md-three. Больше ничего не делала, а поведение так разительно отличается. Почему?

Edited by hike
Link to comment
Share on other sites

  • 0

в оригинале есть margin-bottom:60px; который и не дает перекрывать контент и footer идет за container 
у вас footer находится в container и стили уж совсем разные, а не слегка
но у вас я не заметил, чтобы footer наезжал на контент

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy