Как уменьшить высоту пунктов меню в суперфише? - PullRequest
Новая
       7

Как уменьшить высоту пунктов меню в суперфише?

1 голос
/ 06 ноября 2011

Я уменьшил размер шрифта в меню суперфиши, используя этот код 

.sf-menu  a
{
    font-size: 15px;
    padding: 8px;
}

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

Как уменьшить высоту пунктов меню (главное и подменю), но оставить остальные функции как есть?

1 Ответ

3 голосов
/ 06 ноября 2011

Чтобы уменьшить или изменить размер шрифта пунктов меню, вы действительно указываете его в таблице стилей Superfish CSS, например: 

.sf-menu a {
    font-size: 15px;
    padding: 8px; /* not nessesary to do this */
}

Если вы измените размер шрифта, то подменю (childmenu) не будет располагаться красиво. Поэтому вам необходимо изменить положение подменю, например:

  1. Просмотрите таблицу стилей для ".sf-menu li: hover ul, .sf-menu li.sfHover ul"
  2. Измените значение атрибута TOP на подходящую для вас позицию.

Как это: 

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left: 0;
    top: 2.3em;
    z-index: 99;
}

Если вы хотите изменить высоту пунктов меню, то вы можете изменить атрибут заполнения: 

.sf-menu a {
    font-size: 15px;
    padding: 16px 8px;
}

ИЛИ, вы можете использовать атрибут высоты так: 

.sf-menu a {
    font-size: 15px;
    padding: 8px;
    height: 30px /* for example */
    line-height: 30px /* You should include this line-height attribute to align the text in the middle of the box, the value is equal to the value of height attr. */
}

В этом случае также не забудьте изменить атрибут TOP подменю (".sf-menu li: hover ul, .sf-menu li.sfHover ul"), как описано выше.

...