Фіксоване меню меню може стане в нагоді практично скрізь. Адже воно не займає багато місця, помітно, і користувач може перейти на будь-яку сторінку вашого сайту без особливих труднощів пошуку блоку меню.
В даному прикладі розберемо два види фіксованих меню: перший варіант меню притиснутий до верху екрана, другий до низу екрану. Створюється таке меню дуже просто, з використанням позиціонування, а куточки створюються за допомогою псевдокласів. Але про все по порядку. Для початку створимо фіксоване меню, притиснуте до верху екрану.
Як завжди, почнемо з оформлення головного класу topMenu. прозорість, transition. фон, внутрішні відступи:
Тепер, при наведенні зробимо так, щоб прозорість зникла:
Посилання: внутрішні відступи, колір тексту, фон при наведенні:
Тепер найцікавіше. Робимо куточки. Для цього ми будемо використовувати псевдокласи: after. для першого куточка, і псевдоклас: before. який йде останнім.
Для створення куточків використовують властивості border-width. border-style. border-color. Так само, щоб отримати куточок, потрібно спочатку запозіціоніровать його і розташувати в тому місці, де хочемо побачити куточок.
Для початку створимо перший куточок:
Ну і відповідно другий, який йде останнім:
От і все. Наше перше фіксоване до верху меню готове. З другим варіантом, фіксованим до низу меню, все те ж саме, лише змінені властивості у псевдокласів: after і: before. Ну або сам, повний код другого варіанту меню, фіксованого до низу: