Как создать правильное меню сосунков, где верхняя ссылка имеет переменную ширину? - PullRequest
0 голосов
/ 14 июня 2011

Я создал Son of Suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/) Навигационное меню на основе CSS. Левая сторона - это обычная Suckerfish, где элемент навигации верхнего уровня равен ширине выпадающих меню.

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

Слово время изображения:)

_______________________________________________________
| menu-item    | menu-item    |       ____________| ? |
--------------------------------------| help item 1   |
                                      | help item 2   |
                                      | etc           |
                                      -----------------

Что я сделал несколько успешно, так это применил отрицательное левое поле к внутреннему элементу, содержащему раскрывающиеся записи:

#nav li ul { width: 10em; margin-left: -10em; }

Есть одна проблема, она заканчивается слишком далеко:

_______________________________________________________
| menu-item    | menu-item    |  _________________| ? |
---------------------------------| help item 1   |-----
                                 | help item 2   |
                                 | etc           |
                                 -----------------

Простым решением было бы основание моей ширины на px вместо em и уменьшение отрицательного левого поля на ширину моей иконки (16px), но это хакерство. Это не будет обрабатывать масштабирование шрифта. Еще одна хитрость, которую я придумал, - это использовать margin-left: -9em; и сделать мой значок шириной элемента: 1em; но это тоже кажется немного странным. Я надеюсь, что у кого-то есть идея получше!

1 Ответ

0 голосов
/ 05 июня 2012

Хорошо, я собрал для этого скрипку и нашел решение ... См. Мою скрипку http://jsfiddle.net/cssguru/7JMkp/. Не было времени проверить во всех браузерах. Вероятно, требуется некоторая настройка IE.

...