Align some menu items on left-hand side and some on right-hand side

Peter posted over 13 years ago

Hi,

I have a WebMenu that has 8 top-level items. I want to left-justify 5 of them and then right-justify the remaining 3 items. I added the following tags to get all items to left-justify:

this.UltraWebMenu1.Width = Unit.Percentage(100);
this.UltraWebMenu1.TopItemSpacing = TopItemSpacing.Compact;

However, I can't seem to get the right-most 3 items to be right-justified. I'd like to put a spacer between the left-justified and right-justified items, which would auto-size depending on the dimensions of the browser. How can I accomplish this?

Thanks,

Peter Kinmond

Lenos Software

Parents

4493

Anton Staykov posted over 13 years ago

Hello Peter,

Your scenario is achievable using two separate menus, placed in one container, let's say DIV.
So you can leave the first menu as is. For the second one, you can add custom css rule to say "float: right", which will make the menu container to float on the right of parent container. Thus you will achieve your goal.
Cancel
Reply

Verify Answer

Cancel

Reply

85

Verified Answer
Peter posted over 13 years ago in reply to Anton Staykov

Hi Anton,

Thanks for you help. I tried with "float: right" in the Custom Rules, but it didn't seem to have any effect.

I got an answer from Infragistics support that did work correctly: Set "EnhancedRendering" to FALSE, and then create a disabled item as a spacer in the middle of the left- and right-justified items. Add a width on all left- and right-justified items.

Here's the code and a screenshot:

<ignav:UltraWebMenu ID="UltraWebMenuRight" runat="server" TopAligment="Center" Width="100%" TopItemSpacing="Compact" EnhancedRendering="False">
   <TopSelectedStyle CssClass="TopMenuItem"></TopSelectedStyle>
   <TopLevelHoverItemStyle CssClass="TopMenuItemHover"></TopLevelHoverItemStyle>
   <Items>
      <ignav:Item Text="Left Top Item" CssClass="">
         <Styles Width="100px"></Styles>
      </ignav:Item>
      <ignav:Item Text="" CssClass="" Enabled="False" TagString="spacer item"></ignav:Item>
      <ignav:Item Text="Right Top Item">
         <Styles Width="100px"></Styles>
      </ignav:Item>
   </Items>
   <TopLevelLeafItemStyle CssClass="TopMenuItem"></TopLevelLeafItemStyle>
   <TopLevelParentItemStyle CssClass="TopMenuItem"></TopLevelParentItemStyle>
</ignav:UltraWebMenu>

Thanks,

Peter Kinmond
Lenos Software
Cancel
Reply

Reject Answer

Cancel

Children

No Data