PDA

View Full Version : Accordian Menu with transparent


indianleo
01-30-2010, 08:48 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>left-nav 1</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".left-nav h3:first").addClass("active");
$(".left-nav p:not(:first)").hide();

$(".left-nav h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
background-color:yellow;
}
.left-nav {
width: 222px;
}
.left-nav h3 {
background: #fff url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 14px Arial, Helvetica, sans-serif;
color:#1f69a6;
cursor: pointer;
}
.left-nav h3:hover {

}
.left-nav h3.active {
background-position: right 5px;
}
.left-nav p {
background: #fff;
margin: 0;
padding: 10px 15px 20px;
font:11px Arial, Helvetica, sans-serif;
color:#333;
}
</style>
</head>

<body>

<div class="left-nav">
<h3>Be a different you </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Be dazzled</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Do Something different</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Do Something different</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>

</div>

</body>
</html>




Can anyone please please help me how to have transparent background-color to p in accordian

Corrosive
01-31-2010, 09:26 AM
Try...

.left-nav p {
background-color: transparent;
margin: 0;
padding: 10px 15px 20px;
font:11px Arial, Helvetica, sans-serif;
color:#333;
}

indianleo
01-31-2010, 10:59 AM
Thanks a lot, but how to set a white background color with 60% transparency

Corrosive
01-31-2010, 11:25 AM
You can use the opacity rule in CSS. opacity: 0.6; but bear in mind that this has problems with IE. I think in IE you need to use alpha.

Read this but apply it to background colours rather than images http://www.w3schools.com/Css/css_image_transparency.asp

indianleo
01-31-2010, 11:36 AM
Thanks you very much but there is one problem in IE6 by default the p which is visible doesnt show transparency

Corrosive
01-31-2010, 11:47 AM
Yep, IE6 sucks doesn't it?

indianleo
01-31-2010, 05:51 PM
yeah u r right, wish somebody kill IE6