Adding Additional Clickable Areas to Menu

[bperdue]

I have an issue with the CSS that I need your help on, if you would be so kind to help?

Here is an example menu. I have a secondary button to the right with the 3 ellipses that I added. The CSS uses the whole <a></a> tag for the theming. I had to make the change in the CSS below. In the image below I highlighted the clickable area at the top of the image, notice that there is a huge amount of space that is not clickable. I would like the clickable area to be like the highlighted portion of the bottom of the image. I may also add a drag button on the left. So I need an ideal way to handle the CSS. Could you help me come up with a better solution than the CSS customizations that I made to your theme CSS? I would prefer it to be a way I can override all the themes so that I don't have to rebuild all the themes with the customization. Thank you so much for your help!!!




I had to make the following customizations to get the menu to show up with the three dots
In the file layout-teal.css I had to change from this:

```css
.layout-container .ultima-menu li a {
font-size: 1em;
display: block;
padding: .5em 1em;
color: #212121;
width: 100%;
box-sizing: border-box;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
overflow: hidden; }

...

.layout-container .ultima-menu li ul li a {
padding: .5em 1em .5em 2em; }

```

To This:

```css
.layout-container .ultima-menu li { // Note I removed the a tag thats it
font-size: 1em;
display: block;
padding: .5em 1em;
color: #212121;
width: 100%;
box-sizing: border-box;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
overflow: hidden; }

...

.layout-container .ultima-menu li ul li a {
padding: .5em 1em .5em .6em; }

```

[merve7]

I think, there are some problems with the image. Can you send me a drive, dropbox or a similar link or add again?

[bperdue]

I just updated the image. I would really appreciate some help on this question. Thanks!

[cagatay.civici]

Better to keep the anchor, how did you add the dots on the right? By editing app.menu ts ?

[bperdue]

Yes. Here is the app.menu.component.ts. Glad to get some help on this!!! Thank you!!!


<ng-template ngFor let-child let-i="index" [ngForOf]="(root ? item : item.items)">
<li [ngClass]="{'active-menuitem': child.expanded == true}" routerLinkActive="active-menuitem">
<div *ngIf="!child.routerLink">
<a [href]="child.url||'#'" (click)="itemClick($event,child,i)" class="ripplelink" [attr.target]="child.target">
<i [ngClass]="isFontAwesome(child.icon) ? 'fa fa-fontAwesome ' + child.icon : 'fa ui-icon-' + child.icon"></i>
<span style="max-width:125px">{{child.label}}</span>
<i class="material-icons" *ngIf="child.items.length">keyboard_arrow_down</i>
</a>
<i *ngIf="child.isEditable == true" class="material-icons actionMenuButton" style="float:right;cursor:pointer;" (click)="actionMenuToggle($event,child)">more_vert</i>
</div>
<div *ngIf="child.routerLink">
<a (click)="itemClick($event,child,i)" class="ripplelink" [routerLink]="child.routerLink" routerLinkActive="active-menuitem-routerlink" [routerLinkActiveOptions]="{exact: true}" [attr.target]="child.target">
<i [ngClass]="isFontAwesome(child.icon) ? 'fa fa-fontAwesome ' + child.icon : 'fa ui-icon-' + child.icon"></i>
<span style="max-width:125px">{{child.label}}</span>
<i class="material-icons" *ngIf="child.items.length">keyboard_arrow_down</i>
</a>
<i *ngIf="child.isEditable == true" class="material-icons actionMenuButton" style="float:right;cursor:pointer;" (click)="actionMenuToggle($event,child)" >more_vert</i>
</div>
<ul app-submenu (actionMenuClick)="actionMenuToggle($event,null)" [item]="child" *ngIf="child.items" [@children]="child.expanded == true ? 'visible' : 'hidden'"></ul>
</li>
</ng-template>

[cagatay.civici]

I think anchor should be there but should take less space.

Code: Select all

.layout-container .ultima-menu li a {
width: calc(100% - 2em);
 }
 
. actionMenuButton {
width: 2em;
}