Solved

Transparent background on a list/menu item

Posted on 2010-11-23
4
491 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

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.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to count occurrences of each item in an array.

786 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