Solved

Transparent background on a list/menu item

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

759 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

17 Experts available now in Live!

Get 1:1 Help Now