Как сделать горизонтальное меню в PrimeFaces - PullRequest
Новая
       45

Как сделать горизонтальное меню в PrimeFaces

1 голос
/ 25 января 2012

Я пытаюсь изменить меню PrimeFaces (не MenuBar), чтобы оно отображалось горизонтально.

Я пытаюсь применить стили так: 

<h:form>
    <p:menu styleClass="horizontalMenu">
        <p:menuitem value="Home" url="./home.xhtml"/>
        <p:menuitem value="Contact Us" url="./contactUs.xhtml"/>
        <p:menuitem value="Shop" url="./shop.xhtml"/>
    </p:menu>
</h:form>

Где в отдельном файле CSS у меня есть следующее: 

.horizontalMenu li {
    display:inline;
    float:none;
}

Однако мои стили всегда переопределяются стилями PrimeFaces (например, .ui-menuitem).

Я надеялся на решение, которое не было бы глобальным, поскольку мне также может понадобиться вертикальное меню, так что это исключает редактирование файла CSS темы.

1 Ответ

2 голосов
/ 25 января 2012

Мне кажется странным, что вы настаиваете на том, чтобы не использовать Менубар, когда это почти то же самое. Возможно, это вопрос интервью, чтобы проверить ваши знания CSS и Primefaces?

Независимо от этого, вы можете сделать компонент меню похожим на Menubar следующим образом: 

<p:menu styleClass="ui-menubar" style="width: auto;">

Это должно переопределить большинство стилей в меню с помощью класса ui-menubar.

Это, конечно, будет не так хорошо, потому что триггерные подменю не будут отображаться под меню, как это было бы с меню.

...