?
Solved

Transparent background on a list/menu item

Posted on 2010-11-23
4
Medium Priority
?
498 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 1600 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 400 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

777 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