WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Horizontal CSS Menu (Transparent)

Reply
  Thread Tools Display Modes
Old 13th November 08, 11:18 AM   #1
daveburns
WLC Member
 
daveburns's Avatar
 
Join Date: Aug 2008
Location: London, UK
Posts: 21
Default Horizontal CSS Menu (Transparent)

Hi Guys,

Im trying to build a menu in CSS with transparency for a friend (Screenshot link below) My problem basically is that I can't find a script online that will let me build a Horizontal CSS menu with the submenus having transparency - it will become clearer when you see the screenshot... Menu must work in both IE and FF and hacks are allowed...

Cheers

Screenshot
daveburns is offline   Reply With Quote
Old 4th December 08, 05:45 PM   #2
kapp3rs
WLC Lover
 
Join Date: Dec 2008
Location: The Colony,, TX
Posts: 108
Default Re: Horizontal CSS Menu (Transparent)

The quickest approach I could come up with is to use http://jquery.com to help us achieve First, a little html and css:

Code:
<style type="text/css">
    ul li .xparent{position: relative}    
    ul li .xparent .bg {z-index: -1; background: red; position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%}    
</style>
Code:
<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a>
        <div class="xparent">
            <span class="bg"></span>
            <ul>
                <li>Lorem</li>
                <li>Ipsum</li>
                <li>Solor</li>            
            </ul>
        </div>
    </li>
    <li><a href="#">Solor</a>
        <div class="xparent">
            <span class="bg"></span>
            <ul>
                <li>Lorem</li>
                <li>Ipsum</li>
                <li>Solor</li>            
                <li>Lorem</li>
                <li>Ipsum</li>
                <li>Solor</li>                            
            </ul>
        </div>        
    </li>    
</ul>
When you look at this it just looks like a red background (.xparent) underneath the sub ul (which is to be the transparent background), which is exactly what I did. However, the background is in it's own node, which means that we can now manipulate the opacity of that node using jquery to make it transparent!

After including the jquery library in your project, something like this would do the trick:

Code:
<script type="text/javascript">
    $(document).ready(function(){
      $(".xparent .bg").css("opacity", "0.7");
    });
</script>
Jquery will set the .bg div opacity to 70%. You can easily adjust the level of transparency by changing the 0.7 to something else.

I opted to use a seperate node for the transparency because if we had used a node that contains the menu, all the contents within the node would be transparent as well. since we want ONLY the background to be transparent, we need it to be in a seperate node, underneath the content that is to sit on top of it.

In order to make sure the background fills the entire area, I've used the technique described here: http://www.alistapart.com/articles/c...olutepositions

I am not sure how to create an expression to fix the height in IE6. Fortunately, Jquery can help you out with that as well! Use Jquery to set the innerHeight of .bg = to the innerHeight of .xparent and you'll be all set! There are several tutorials on jquery (if you aren't already familiar with it) that can help you from there.

I hope this has given you some direction!
kapp3rs is offline   Reply With Quote
Old 8th December 08, 10:51 AM   #3
daveburns
WLC Member
 
daveburns's Avatar
 
Join Date: Aug 2008
Location: London, UK
Posts: 21
Default Re: Horizontal CSS Menu (Transparent)

Many thanks for your help!
daveburns is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:09 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.