На цей раз вкладки будуть накладатися один на одного, але з одним обмеженням - ширина вкладок фіксована. У наступній статті опишу як зробити те ж саме, але вже з не фіксованою шириною. Джерело цього шедевра можна знайти тут.
Дизайнери - це такі люди, які весь час щось креативу. Ох вже мені їх креатив. Найчастіше, глянувши на їх дизайну, потім сидиш і годинами ламаєш голову - як би зробити краще. Ось і наш дизайнер народив щось подібне.
Відмовлятися від підсвічування пунктів меню при наведенні курсору миші - клієнта не влаштовує. Просто нарізати на шматочки (як показано на малюнку), але тоді проблема з перекриваються частинами меню.
Виходу немає робимо нормальні вкладки.
Суть правильної вкладки в тому, що довівши курсор до останнього пікселя вкладки, курсор повинен бути ще на цій же вкладці, а не на сусідній. При чому ліва (кому подобається можна праву) частину вкладки повинна частково ховатися за вкладкою, яка знаходиться лівіше, а при наведенні на цю вкладку, вона повинна повністю виходити на передній план. В іншому, все це добре продемонстровано в прикладі з шапки даного поста.
HTML код вкладок
Тут все просто і думаю зрозуміло. Єдине на що слід звернути увагу, це на послідовність вкладок. Він перевернута. Тобто починається з останньої а закінчується першої. Це через те що вирівнювання в даному методі йде по правому краю (float: right;).
1. Обтікання справа для елементів списку - дає нам можливість виробляти накладення елементів праворуч-ліворуч.