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

You currently have 0 items in your cart.

Show Cart

Recent Events

07/09/2010 Our popular free Joomla! extension has been updated

ARI Image Slider, ARI Cloud Carousel and ARI Slick Gallery free Joomla! extensions has been updated. Now modules provide integration with popular lightbox plugin called RokBox.

more...
29/08/2010 Free Joomla! photo gallery module

ARI Soft team is glad to introduce a new Joomla! photo gallery extension called ARI Slick Gallery. The module shows photos in fancy way and can be integrated with different lightbox extensions. See the extension in action here.

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 Month, 2 Weeks 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 Month, 2 Weeks ago	Karma: 64
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 Month, 2 Weeks 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 Month, 2 Weeks ago Karma: 64

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 Month, 2 Weeks 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 Month, 2 Weeks 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