Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.


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




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

How to make submenu items semi transparent
(1 viewing) (1) Guest
Go to bottomPage: 123
TOPIC: How to make submenu items semi transparent
#39607
How to make submenu items semi transparent 10 Years, 11 Months ago Karma: 0
Hi Guys,

I've tried to change the background of the submenu to semi transparent with CSS.
This however doesn't work for me.

What do I have to change to make the submenu items transparent.

Code:

/*

 * Ext Core Library Examples 3.0

 * http://extjs.com/

 * Copyright(c) 2006-2009, Ext JS, LLC.

 * 

 * The MIT License

 * 

 */



.ux-menu-init-hidden
{
   visibility:hidden;
   position:absolute;
}

.ux-menu-container
{
   position:relative;
   background-color:#000;
}

.ux-menu,.ux-menu ul
{
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   margin:0;padding:0;
   line-height:1;
}

.ux-menu li
{
   position:relative;
   float:left;
}

.ux-menu ul
{
   position:absolute;
   top:0;
   left:0;
}

.ext-border-box .ux-menu-ie-iframe,.ext-ie7 .ux-menu-ie-iframe
{
   padding:0;
   margin:0;
   position:absolute;
   top:0;
   left:0;
   display:none;
   z-index:-1;
}

.ux-menu-vertical .ux-menu-item-main
{
   clear:left;
}

.ux-menu a
{
   display:block;
   position:relative;
   text-decoration:none;
   color:#fff;
   border-left:1px solid #000;
   border-top:1px solid #000;
   border-bottom:1px solid #000;

   font-size:12px;
   line-height:12px;
   padding:13px 14px;
}

.ux-menu a.ux-menu-link-last
{
   border-right:1px solid #000;
}

ux.menu ul a
{
   width:100%;
}

.ux-menu a:focus,.ux-menu a:hover,.ux-menu a.ux-menu-link-hover
{
   border-color:#000;
   background-color:#000;

   outline:0;
}

.ux-menu-clearfix:after
{
   content:".";display:block;
   height:0;
   clear:both;
   visibility:hidden;

}

.ux-menu a.ux-menu-link-parent
{
   padding-right:24px;
   min-width:1px;
}

.ux-menu ul a,.ux-menu.ux-menu-vertical a
{
   border-bottom:0;
   border-right:1px solid #000;
}

.ux-menu ul a.ux-menu-link-last,.ux-menu.ux-menu-vertical a.ux-menu-link-last
{
   border-bottom:1px solid #000;
}

.ux-menu-arrow
{
   display:block;
   width:8px;
   height:6px;
   right:10px;
   top:14px;
   position:absolute;
   background:url(images/menu-arrow-down.png) no-repeat;
   font-size:0;
}

.ux-menu.ux-menu-vertical .ux-menu-arrow,.ux-menu ul .ux-menu-arrow
{
   width:6px;
   height:8px;
   top:13px;
   background:url(images/menu-arrow-right.png) no-repeat;
}

.ext-border-box .ux-menu-arrow
{
   top:17px;
}

.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,.ext-border-box .ux-menu ul .ux-menu-arrow
{
   top:16px;
}

.ux-menu ul.ux-menu-hidden
{
   display:none;
}

.ux-menu a.current
{
   background-image:url('images/menu-item-bg-current.png');
   border-color:#000;
}



Br,

Steve
The administrator has disabled public write access.
 
#39609
Re:How to make submenu items semi transparent 10 Years, 11 Months ago Karma: 746
Hello,

If you want to do semi-transparent background, it requires to use semi-trasparent PNG image as background image for menu.

Regards,
ARI Soft
The administrator has disabled public write access.
 
#39612
Re:How to make submenu items semi transparent 10 Years, 11 Months ago Karma: 0
I understand what you say but I have the fealing that the background color (which is not setup for submenu) is giving met problems.
If I look at firebug it gives me the following line.

UL#ariext89 LI A
background: none repeat scroll 0 0 #000000;

However this isn't shown in the css so I'm almost certain this is generated within the module from Joomla.

Where can I disable it?

I want to use the css:

{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

For making it transparent and not an image.

Br,

Stevan
The administrator has disabled public write access.
 
#39614
Re:How to make submenu items semi transparent 10 Years, 11 Months ago Karma: 746
"opacity" property doesn't do require effect, it applies opacity for text too.

Regards,
ARI Soft
The administrator has disabled public write access.
 
#39615
Re:How to make submenu items semi transparent 10 Years, 11 Months ago Karma: 0
Hi, You're right it doesn't work.

I've tested this and it doesn't work.

Where in the CSS can I set the transparant .PNG file (please see attached CSS code in my first post, it comes from menu.min.css)

Could you please give an example?

br,

Steve
The administrator has disabled public write access.
 
#39616
Re:How to make submenu items semi transparent 10 Years, 11 Months ago Karma: 746
Send a link to a page where we can see menu and a link to background image.

Regards,
ARI Soft
The administrator has disabled public write access.
 
Go to topPage: 123