Блог

Главная - Вопросы по программированию - Как создать выровненное по правому краю меню suckerfish, где верхняя ссылка имеет переменную ширину?

Как создать выровненное по правому краю меню suckerfish, где верхняя ссылка имеет переменную ширину?

#css #drop-down-menu #nav #suckerfish

#css #выпадающее меню #навигация #suckerfish

Вопрос:

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

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

Время создания изображения Word 🙂

 _______________________________________________________
| 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           |
                                 -----------------

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

Комментарии:

1. Было бы действительно полезно, если бы вы могли сделать демонстрацию jsFiddle того, что у вас есть на данный момент.

2. Проект, для которого я это делал, прекратил свое существование, у меня сейчас нет времени. Наверняка люди делали это тысячу раз — удивлен, что ни у кого не было быстрого ответа. Возможно, в наши дни никто не использует CSS-меню в стиле suckerfish / сын suckerfish.

3. Используя тестовый пример, вы бы определенно получили ответ (от меня!). Общая идея была бы такой: включить :hover в последний раз li , установить на ul что-то вроде right: 0 или right: -<width of containing li>px или, возможно left: 100% .

4. Если вам больше не нужен ответ на этот вопрос, можете ли вы удалить его?

Ответ №1:

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