ARI Soft - Switch menu arrow colors when mouse over

Home

News

Forum

Featured Demos

ARI Smart Content demo

ARI Quiz demo

ARI Sexy Lightbox demo

e-mail: info@ari-soft.com

Shopping Cart

Show Cart

Recent Events

29/12/2011 Merry Christmas and Happy New Year!

Dear visitors, our office will be closed from December 30 to January 2 due to the celebration of the New Year. You can purchase and download our products, but we can not guarantee quick answers to your questions for this period of time. Happy New Year! Your ARI Soft team.

more...
27/09/2011 ARI Smart Content v. 1.8.0

ARI Smart Content v. 1.8.0 is ready. New version is compatible with Joomla! 1.5, 1.6 and 1.7 and it is released under GNU GPL license.

more...

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft.

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

Joomla components

ARI YUI Menu

Switch menu arrow colors when mouse over

(1 viewing) (1) Guest

Page: 12

TOPIC: Switch menu arrow colors when mouse over

Forum Tools

#5750

Switch menu arrow colors when mouse over 1 Year, 6 Months ago

Karma: 0

Hi,

I have experimented a lot the last 2 hours but I have not found a solution to my problem.
Firstly, I have not edited the ari yui .css files in my joomla installation folder at all. Instead, I have added the following lines in CSS styles of the module.

#{$id}.yui-skin-sam .yuimenubar DIV.bd
{
background: #fff;
}

#{$id}.yui-skin-sam .yuimenubar DIV.bd a.yuimenubaritemlabel
{
color: #004b73;
}

#{$id}.yui-skin-sam DIV.bd a.yuimenubaritemlabel-selected
{
background-color: #00679e;
}

#{$id}.yui-skin-sam DIV.bd a.yuimenubaritemlabel-selected,
#{$id}.yui-skin-sam DIV.bd a.yuimenubaritemlabel-selected:link,
#{$id}.yui-skin-sam DIV.bd a.yuimenubaritemlabel-selected:visited,
#{$id}.yui-skin-sam DIV.bd a.yuimenubaritemlabel-selected:hover {
color:#FFF;
}

#{$id}.yui-skin-sam .yuimenu DIV.bd
{
background: #00679e;
}

#{$id}.yui-skin-sam DIV.bd ul li a.yuimenuitemlabel
{
color: #FFF;
}

#{$id}.yui-skin-sam DIV.bd ul li DIV.bd ul li a.yuimenuitemlabel-selected
{
background-color: #0092cb;
}

Given this arrangement of my menu, I would like the arrows of the menu bar to turn white from black when I select/mouse over a specific item of my menu bar.

Secondly, I would like the arrows in my submenus that point to another sub-submenu not to disappear when I mouse over a specific submenu item.

Any advice would be helpful!
Thanks in advance

kosfar

Last Edit: 2010/07/26 13:53 By kosfar.

The administrator has disabled public write access.

#5751

Re:Switch menu arrow colors when mouse over 1 Year, 6 Months ago	Karma: 275
Hello, Provide link to page, please, where we can see the menu on your site that we can help you. Regards, ARI Soft

admin

The administrator has disabled public write access.

#5754

Re:Switch menu arrow colors when mouse over 1 Year, 6 Months ago	Karma: 0
Here is the site newsite.telecompare.gr/index.php/el

kosfar

The administrator has disabled public write access.

#5757

Re:Switch menu arrow colors when mouse over 1 Year, 6 Months ago Karma: 275

You can add the following CSS rules to 'CSS Styles' parameter in module settings:

Code:



#{$id}.yui-skin-sam .yuimenubarnav a.yuimenubaritemlabel-hassubmenu:hover,

#{$id}.yui-skin-sam .yuimenubarnav .yuimenubaritem-selected a.yuimenubaritemlabel-hassubmenu

{

 /* Place path to white arrow here */

 background-image:url("/modules/mod_ariyuimenu/mod_ariyuimenu/js/build/menu/assets/skins/sam/menubaritem_submenuindicator.png");

 background-repear: no-repeat;

 background-position: right center;

}



body #{$id}.yui-skin-sam DIV.bd ul li DIV.bd ul li a.yuimenuitemlabel-selected

{

  background-color: transparent;

}





body #{$id}.yui-skin-sam .yuimenubarnav ul li.yuimenuitem-hassubmenu:hover

{

 background-color: #0092cb;

 background-image:url("/modules/mod_ariyuimenu/mod_ariyuimenu/js/build/menu/assets/skins/sam/menuitem_submenuindicator.png");

 background-position:right center;

 background-repeat:no-repeat;

}

One note, if you want to show white arrow, create image with white arrow and enter path to it in the first CSS rule.

Regards,
ARI Soft

admin

Last Edit: 2010/07/26 14:36 By admin.

The administrator has disabled public write access.

#5759

Re:Switch menu arrow colors when mouse over 1 Year, 6 Months ago	Karma: 0
Thanks a lot for your reply. It is working perfectly now! Regards

kosfar

The administrator has disabled public write access.

#5760

Re:Switch menu arrow colors when mouse over 1 Year, 6 Months ago

Karma: 0

The arrows are working perfectly, however it seems that this piece of code

body #{$id}.yui-skin-sam DIV.bd ul li DIV.bd ul li a.yuimenuitemlabel-selected
{
background-color: transparent;
}

adds another colour in my menu palette that was not there. I tried to change the above statement to

body #{$id}.yui-skin-sam DIV.bd ul li DIV.bd ul li a.yuimenuitemlabel-selected
{
background-color: #0092cb;
}

but then the white arrows in the submenus disappear.

Take a look
newsite.telecompare.gr/

I would like the "leaves" of my menu to be coloured #0092cb.

Thanks a lot in advance!

kosfar

The administrator has disabled public write access.

Page: 12

Useful Links