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


Recent Events
  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.

  • 14/04/2017 Happy Easter

    Wish a Happy Easter and give 30% discount for all our WordPress and Joomla! extensions. Use EASTER17 coupon code. The offer is valid till 17 April.


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 4 Years, 6 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 4 Years, 6 Months ago Karma: 667
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 4 Years, 6 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 4 Years, 6 Months ago Karma: 667
"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 4 Years, 6 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 4 Years, 6 Months ago Karma: 667
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