jQuery UI Widgets Forums Navigation Menu, Context Menu Top Level Menu Items Separator

This topic contains 4 replies, has 2 voices, and was last updated by  jmrad 10 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Top Level Menu Items Separator #24597

    jmrad
    Member

    Hi

    I need to draw a separator line between the top level menu items. For instance, if you go to the Demo section of this website, you select the jqxMenu and then Default Functionality, in that same demo menu I need to show a dark grey line between Home, Solutions, Products, Support, Communities and Company. How do I do that? The regular

    doesn’t work on the top level menu items.

    Julz

    Top Level Menu Items Separator #24598

    jmrad
    Member

    In the post above I meant that the regular clause for drawing a separator doesn’t work on top level menu items:

    <li type='separator'></li>
    Top Level Menu Items Separator #24601

    Mariya
    Participant

    Hi jmrad,

    Try by adding an additional style as shown:

      <style type="text/css">
    .jqx-menu-item-top {
    border-right:solid grey;
    }
    </style>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Top Level Menu Items Separator #24613

    jmrad
    Member

    Thanks Mariya, your suggestion helped. However I had to tune it as follows:

    /*applied to the menu's li elements.*/
    .jqx-menu li, .jqx-menu-dropdown li
    {
    line-height: 1.3 !important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }
    /*applied to the menu's li elements.*/
    .jqx-menu li
    {
    border-right: 1px solid black;
    }

    But now the last menu item has a “separator” on the right. I will try to use some JavaScript to remove it.

    Top Level Menu Items Separator #24614

    jmrad
    Member

    I found a way to remove the separator from the last top level menu item by adding this CSS bit:

    .jqx-menu li:last-child
    {
    border-right: 0;
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.