Adding Additional Clickable Areas to Menu

Post Reply
bperdue
Posts: 4
Joined: 26 Oct 2016, 17:17

26 Sep 2017, 15:27

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!!!

Image


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; }

```
Last edited by bperdue on 30 Oct 2017, 16:45, edited 2 times in total.

merve7
Posts: 66
Joined: 12 Sep 2017, 10:44

04 Oct 2017, 07:37

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

bperdue
Posts: 4
Joined: 26 Oct 2016, 17:17

30 Oct 2017, 16:45

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

User avatar
optimus.prime
Prime
Posts: 17686
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

30 Oct 2017, 17:38

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

bperdue
Posts: 4
Joined: 26 Oct 2016, 17:17

30 Oct 2017, 19:21

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>

User avatar
optimus.prime
Prime
Posts: 17686
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 14:00

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;
}

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest