Solved

Transparent background on a list/menu item

Posted on 2010-11-23
4
490 Views
Last Modified: 2012-05-10
Experts,

Im trying to modify a css drop down menu to match a design (see attached image).

I am very close at the moment, but having slight difficulty with making the dropdown background transparent (im happy if this only works in modern browsers, and is solid color in older ones).

If you could spare a moment to look at the menu on this site and recommend how i might achieve the desired transparency effect i would appreciate it.

www.mygolfbook.co.uk/menu.html

As you can see, I have two override classes that i apply to the main menu item and the sub item. I have played around with adding:

opacity:0.4;filter:alpha(opacity=40);

To the sub-override class but it seems to fade the text not the background. I also tried adding a transparent png as the backgroun but this also failed.

Any advice would be appreciated.

Regards
Easynow
menu-grab.jpg
0
Comment
Question by:Dean OBrien
4 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 400 total points
ID: 34198755
The easiest way to do this and most compliant honestly is to have make a transparent background image.  Make a 1px by 1px image with your color and then set the opacity.  

Then set that image in your background on the ul.pureCssMenu, ul.pureCssMenu ul elements in CSS.

If you need a BG image made, let us know.
0
 
LVL 2

Expert Comment

by:Schells_Web_Design
ID: 34200195
What if you change lines 33, 104 & 113 (on your source code) to this:

background-color:#031d57;alpha(opacity=50);




0
 
LVL 22

Assisted Solution

by:remorina
remorina earned 100 total points
ID: 34210764
Hi easynow111,
With opacity, when you set a parent element's opacity it affects all its descendents, that's why if you set the opacity to the UL the text would also be affected.

The only way I was able to solve this when similar situations arise is by creating an additional layer to act as a background then set its opacity to the desired value and place the other elements on top of it.

Try your modified code below, I have only modified it to show how this can be achieved but you might still need to make some further adjustments.

Cheers!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

</head><body bgcolor="orange">
<style>
.main-override{

	border-left-style:solid;
	border-left-color:#f7a045;
	border-left-width:4px;
	border-right-style:solid;
	border-right-color:#fff;
	border-right-width:8px;
	min-width:120px;
}
.sub-override{

	border-left-style:solid;
	border-left-color:#f7a045;
	border-left-width:4px;
	background-url:('sub-back.png');
	/* background-color:#031d57;*/
	width:252px;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover ul{display:block}
ul.pureCssMenu li:hover > .subMenu{display:block;}
ul.pureCssMenu li:hover > .subMenu .trans {width:100%;height:100%;position:absolute;left:4px;background:#031d57;opacity:0.5;filter: alpha(opacity = 50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";z-index:10;}

/* ul.pureCssMenu ul{position: absolute;left:-4px;top:98%;} */
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu {background-color:#031d57;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-repeat:repeat;
	border-color:#A6A6A6;
	border-width:0px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}
ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu div{
	min-width:118.65px;
	position:absolute;
	left:-4px;
}
ul.pureCssMenu li{
	display:block;
	margin:0px 0px 0px 0px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;

	border-width:0px;
	border-color:#FCEEB0;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:5px;
	_padding-left:0;
	font:bold 11px Arial;
	color: #ffffff;
	text-decoration:none;
	cursor:pointer;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#A6A6A6;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#031d57;
	border-color:#4C99AB;
	border-style:solid;
	font:bold 11px Arial;
	color: #f7a045;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#031d57;
	border-color:#f00;
	border-style:solid;
	font:bold 11px Arial;
	color: #f7a045;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_blue_2.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:8px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}

ul.pureCssMenum {position:relative;z-index:99;}


</style>
<!-- End PureCSSMenu.com STYLE -->



<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu">
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">home</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#"><span>about us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<div class="subMenu">
	    <div class="trans">&#160;</div>
	        <ul class="pureCssMenum">
		        <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">corporate details</a></li>
		        <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">team profiles</a></li>
	        </ul>
	    </div>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#"><span>services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<div class="subMenu">
	    <div class="trans">&#160;</div>
	    <ul class="pureCssMenum">
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">resedential / commercial surveys</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">cdm</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">contract / project administration</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">defect &amp; repair diagnosis</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">dilapidations</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">expert witness</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">party wall matters</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">planned maintenance</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">feasibility &amp; costing planning</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">license for alterations</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">development monitoring</a></li>
		    <li class="pureCssMenui sub-override"><a class="pureCssMenui" href="#">statutory approvals</a></li>
	    </ul>
	</div>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">news</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">testimonials</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">links</a></li>
	<li class="pureCssMenui0 main-override"><a class="pureCssMenui0" href="#">contact us</a></li>
</ul>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
 </body></html>

Open in new window

0
 
LVL 12

Author Comment

by:Dean OBrien
ID: 34212018
Thanks guys, I went with LZ1s suggestion and it worked fine (i had originally tried this but was adding it to the wrong classes).

Schells, I had tried setting opacity but as i mentioned it was cascading and giving an undesired effect on the font.

Remorina - Thanks for the code, i tired it out and it seemed to work great, but i had already implemented the first solution.

Thanks to all

Easynow
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now