Semantic-ui: [Menu] Left Vertical Pointing Menu

Created on 10 Apr 2014  路  8Comments  路  Source: Semantic-Org/Semantic-UI

Default vertical pointing menus are actually pointing to the right, I think it would be great to have the left counterpart!

Like this:

<div class="ui vertical left pointing menu"></div>
<div class="ui vertical right pointing menu"></div>

with default to right:

<div class="ui vertical pointing menu"></div>

cheers!

Enhancement stale

Most helpful comment

This fixed it as an override in my CSS, but I'm sure it would need some tweaking to go back into a pull request for the LESS.

 .ui.vertical.left.pointing.menu .item:after {
    right: auto;
    left: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    margin: 0 0 0 -.5px;
    border: none;
    border-bottom: 1px solid #D4D4D5;
    border-left: 1px solid #D4D4D5;
}

All 8 comments

Agreed

Would be great!

Really waiting for this :+1:

Right and bottom tabular menus are available in 2.1 which should be coming shortly. Do not have left pointing menu yet however

Could this also be done for any div tag (and not just a menu)?

For example: http://semantic-ui.com/collections/message.html divs

I have a need for this and it doesn't appear to be working in 2.2.6. Vertical menus always point right. They also don't show the pointer if set to fluid, which is kind of a bummer when trying to create a vertical pointing menu in a grid column.

Edit: The hiding of the pointer only happens for the right-most column in a grid. When I moved the menu to the left side, the pointer appears even when the menu is fluid.

This fixed it as an override in my CSS, but I'm sure it would need some tweaking to go back into a pull request for the LESS.

 .ui.vertical.left.pointing.menu .item:after {
    right: auto;
    left: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    margin: 0 0 0 -.5px;
    border: none;
    border-bottom: 1px solid #D4D4D5;
    border-left: 1px solid #D4D4D5;
}

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings