Treelist Menu Navigation Icons

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Treelist Menu Navigation Icons

    I have created a custom made sliding menu navigation panel, for which I have built navigation arrows for the .x-treelist-item-expander elements that are supposed to point to the right before an item is selected, and down when the item is hovered over or clicked on. I have the right pointing arrows in place, however, when I hover over them, the down pointing arrows appear above the right pointing arrows instead of in place of them. Screenshots are attached.

    Here is the code for the right pointing arrow that appears when the menu is first triggered:

    /*right pointing arrow*/
    .x-treelist-nav .x-treelist-row .x-treelist-item-expander:before {
    display: inline-block !important;
    width: 0;
    height: 0;
    margin-left: .255em !important;
    vertical-align: .255em !important;
    margin-top: 15px;
    content: "" !important;
    border-bottom: .3em solid transparent !important;
    border-left: .3em solid !important;
    border-right: 0 !important;
    border-top: .3em solid transparent !important;

    And here is the code for the down pointing arrow:

    /*down pointing arrow*/
    .x-treelist-nav .x-treelist-row:hover .x-treelist-item-expander{
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: .255em !important;
    margin-top: 20px;
    vertical-align: .255em !important;
    content: "" !important;
    border-top: .3em solid !important;
    border-right: .3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .3em solid transparent !important;

    I have tried playing with the margins and padding of the arrows, but that just pushes the right pointing arrow down a bit while still being visible. Any help or insight would be greatly appreciated!
    Attached Thumbnails Click image for larger version. 

Name:	Arrows.PNG 
Views:	8 
Size:	2.9 KB 
ID:	25292   Click image for larger version. 

Name:	Arrows2.PNG 
Views:	7 
Size:	2.4 KB 
ID:	25293  

Similar Threads

  1. Replies: 12
    Last Post: Aug 31, 2013, 6:26 PM
  2. [CLOSED] Toolbar as a navigation menu
    By blueworld in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 16, 2013, 9:38 AM
  3. [CLOSED] Accordion menu items with 32x32 icons
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 22, 2012, 1:03 PM
  4. Replies: 1
    Last Post: Jun 11, 2011, 8:37 PM
  5. [CLOSED] How to use Menu or MenuPanel with big icons?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 31, 2010, 5:42 AM

Tags for this Thread

Posting Permissions