Hi All,
When I select any item in the top menu then I want it to be Underline with Black color when I select it.
When I inspect it I'm not able to find that particular class to do this.
Kindly Suggest something.
Hi @Saransh ,I've done it with JS since css didn't seem to work and many people have tried to help you in vain.Please refer to the .oml, and if you have any questions feel free to ask
The idea is to pass an index starting from 0 from left menu item to right, and call always the same action on menu link click, passing that index. then you run a JS that literally removes the black border class from all of them and then adds the blackborder class to the specific link that you just clicked... this is quite sketchy but works if you need this asap.
Cheers,Paulo
let me check
It worked but could you explain a little more about how it has worked?
Sure, so let's go over each JS line.
First we fetch a list of all menu links (basically I fetch all elements that have the role="menuitem":
var menulinks = document.querySelectorAll('[role=menuitem]');
Then I run a cycle through the list, removing the "activeborder" class for all the menu links:(The class "activeborder" I defined in the CSS sheet of the Menu)for (var i = 0; i<menulinks.length; i++){
if(i !== $parameters.Index){
menulinks[i].classList.remove('activeborder');
}
}Lastly, I add that class again, but now only to the one link that was clicked, and I know that based on the index passed, that was also the index that was passed to the action On Click (lists index start at 0, and when I fetch the list in the first JS line, I know that the first in that list (index = 0) is from the mostLeft element, because that's the way html works, elements appear first in the DOM Left to Right and Top to Bottom.
setTimeout(function(){
document.querySelectorAll('[role=menuitem]')[$parameters.Index].classList.add('activeborder');
},200);Cheers,Paulo
really thanks man
Hi @Saransh ,You can add a class yourself to the links that you have with the following style:border-bottom: solid black;Let me know if this helps,Paulo
ok let me check this
Alternatively, you can just put the following on your css sheet:
.app-menu-links a.active{ border-bottom: solid black !important; }
Which will make the active one of the menu links present that style
but in my application there is not a.active why????
Could you share the OML so I can help further?
Please share your OML.
If not possible use this external CSS
a:hover, a:focus { text-decoration: underline; }
I think this will help.
Thanks,
jitendra
Hi Saransh,
Include the CSS code below in your theme.
.layout .app-menu-links a.active { border-bottom: var(--border-size-m) solid var(--color-primary); }
please see attached screen shot there is no 'a.active' in my env.
hi @Saransh
for this kind of under line please add below custom CSS to your Screen :
.layout:not(.layout-side) .app-menu-links a {
border-bottom: var(--border-size-m) solid black !important;
for this kind of line please add below custom CSS:
a {
text-decoration: underline;
Thanks & Regards
Jitendra
but this is applying for all menu items but I need Underline only when I select anyone item.
for that if you have anything pls suggest.
seriously dislike for this solution are you guys as much sucks??
stop your these cheap activities.
means when you hover any menu links it should show underline??
and please tell me which kind of underline you want first one or second one??
bottom border I want and as I said earlier also it should show only when I select an anyone menu item.I don't want onHover.
.app-menu-links a:hover, .app-menu-links a.active{
text-decoration:underline 2px solid black !important;
I thinks this will help you
let me check this one
hey this is happening on Hover I don't want 'onHover' I want when I select on Click only
Then please try with removing the Hover part before the comma.
I tried not working
sorry Mate but I can't help because i am getting down thumbs someone showing real cheapness in their Activity no more help from my side.
okay but thanks for replying.
I'm afraid you collectively are painting yourselves into a corner and making it much more complex than it needs to be.
The requirement is covered by the built-in functionality of the Active Item feature. No need to add your own javascript or css, and no need to code a switch statement in your menu actions.
Each menu item can just have a direct link to the screen it needs to go to. All you have to do, is on each screen, pass into the menu webblock the screens position in the menu, starting with 0 for the first screen.
See attached the revised oml
Don't forget to also match the default value of ActiveItem (is -1 standard) to match the screen you choose as default screen for your module.
Dorine
ok let me see this also
yes @Dorine Boudry you were right this is the default functionality in outsystems.Thank you so much