Drop down menu transparent background

@nycciceeJun 21.2004

I would like to make the drop down menu on my Nav bar transparent so the image in the backgroud will kind of show through when the menu drops down over top of it.

I’m also trying to space out the links on the nav bar without using the “cellpadding” option – which makes the cells too tall for my liking. I just want to spread the links out more so it looks better on the nav bar.

~~[url]~~http://www.nicolecairns.com/hood_new_test_page_services.htm[/url]

Thanks for any help!

to post a comment

JavaScript

32 Comments(s) _↴

@JPnycJun 21.2004 — #Not 2 threads below this (at the moment) is a thread dealing with this very topic, clearly outlined in the thread title.

@nycciceeauthorJun 21.2004 — #Thanks for pointing that posting out to me. I guess that's what you get for working till the early hours of the morning!! I'll give it a shot.

Now all I need is help with spacing the links on the nav bar. Would you know how to do this?

Thanks again ?

@JPnycJun 21.2004 — #<style type="text/css">

td {padding: 0cm 2.5cm}

</style>

Or whatever you like.

@nycciceeauthorJun 21.2004 — #I looked though that posting on transparent bg on drop down menu and see that they recieved advice mostly on ccs not much on Java script.

I really like the nav bar I am currently working with and preffer not to go with a new one. Maybe someone can see a way to apply this in the following coding.

menuStyle = "flat"

cellPadding = 6

cellBorder = 1

verticalOffset = 0

horizontalOffset = 0

subMenuDelay = 1

subIndicate = 1

indicator = ""

// Main Menu Items

borderColor = ""

borderHighlight = "#9CB6B5"

borderShadow = "#9CB6B5"

menuBackground = ""

menuHoverBackground = "#C6D5D3"

fontFace = "arial"

fontColour = "#FFFFFF"

fontHoverColour = "#6B928F"

fontSize = "10pt"

fontDecoration = "none"

fontWeight = "bold"

// Sub Menu Items

sborderColor = "#9CB6B5"

sborderHighlight = "#9CB6B5"

sborderShadow = "#9CB6B5"

smenuBackground = "#C6D5D3"

smenuHoverBackground = "#C6D5D3"

sfontFace = "arial"

sfontColour = "#FFFFFF"

sfontHoverColour = "#6B928F"

sfontSize = "10pt"

sfontDecoration = "none"

sfontWeight = "bold"

sShadow = 1

@JPnycJun 21.2004 — #There's no reason to set the style values in JS unless you're changing them dynamically. And I can't tell enough from just that list of declarations to tell you where to apply the style rules.

@nycciceeauthorJun 21.2004 — #If you have time could you please take a more indepth look at the whole page?

Here's a link to my site:

http://www.nicolecairns.com/hood_new_test_page_services.htm

Thanks

@JPnycJun 21.2004 — #Try;

<style type="text/css">

.rcMenuStatic, .rcMenuHover,.rcSubMenuStatic, .rcSubMenuHover{ -moz-opacity:.5; opacity:.5; width:100%; filters:alpha(opacity=5); }

td {padding: 0cm 2.5cm}

</style>

That could've been added to the code, but this is easier, if I read it correctly. That would make them all 50% transparent.

@nycciceeauthorJun 22.2004 — #Thanks! I'll give this a try.

@nycciceeauthorJun 22.2004 — #This is kind of embarassing but I can't figure out where to put the coding you gave me...could you please direct me as to where it belongs?

Again I blaim the late night and my "newbee" experience.

?

@JPnycJun 22.2004 — #INside your existing style tags like this;

<style type="text/css">

.rcMenuStatic, .rcMenuHover,.rcSubMenuStatic, .rcSubMenuHover{ -moz-opacity:.5; opacity:.5; width:100%; filters:alpha(opacity=5); }

td {padding: 0cm 2.5cm}

a { text-decoration: none }

</style>

or just copy the whole block and put it right after your title tags.

@JPnycJun 22.2004 — #BTW, if it's only the drop down menu that should be transparent, remove anything that doesn't have "sub" in it, from what I posted.

@nycciceeauthorJun 22.2004 — #I put the coding right after the <title> tags and it made the nav bar really disproportioned. And I don't notice a change in the bg of the drop down menu. I tried to figure out a way to fix it but I can't seem to get it to work right.

So sorry for being a pain!!!

@JPnycJun 22.2004 — #It's the width:100%. Reduce it until it looks the way you want it to.

@JPnycJun 22.2004 — #BTW, I meant to remove the style tag section that was there already.

@JPnycJun 22.2004 — #Sorry, I had a typo. take the S off of filters. It's just filter(opacity=5);

@nycciceeauthorJun 22.2004 — #Hi,

I have changed around the text and it still seems to be acting difficult. I've been playing around with the width and it doesn't seem to make any diffence, weather I put 5% or 75%. I also removed the other <style> commands. This is have right now.

<style type="text/css">

.rcSubMenuStatic, .rcSubMenuHover{ -moz-opacity:.5; opacity:.5; width:5%; filter:alpha(opacity=5); }

td {padding: 0cm 2.5cm}

a { text-decoration: none }

</style>

Please take a quick look at what the site looks like, maybe you can figure out why it dosn't seem to be working properly. Thanks so much!!!!

http://www.nicolecairns.com/hood_new_test_page_services.htm

@JPnycJun 22.2004 — #What happens when you remove the width property?

@nycciceeauthorJun 22.2004 — #nothing happens....kind of confusing hu! I thought it would do the trick. Any other suggestions?

@JPnycJun 22.2004 — #Put the width back, and remove this whole line:

td {padding: 0cm 2.5cm}

@nycciceeauthorJun 22.2004 — #The nav bar is back to normal, sort of. This is what I did to the coding to get it to what it looks like right now:

<style type="text/css">

.rcSubMenuStatic, .rcSubMenuHover{ -moz-opacity:.5; opacity:.5; filter:alpha(opacity=5); }

td {padding: 0cm 0.4cm}

a { text-decoration: none }

</style>

The spacing is perfect except for the fact that the scroll bar at the bottom of the page is there (shows that there's a big blank space to the right of the page). Can't figure out why the space is still there.

And the drop down menu isn't transparent, plus the links don't show up but still seem to be there.

@JPnycJun 22.2004 — #The opacity won't change in IE unless the width property is set. If you check in mozilla netscape or safari, you might see some transparency.

@nycciceeauthorJun 22.2004 — #I'm extreemly happy with the spacing of the nav bar links...if I can just get rid of the big blank space to the right of the page. Plus have the links in the drop down menu visible again. I think this attempt of beautifying the nav bar is done!

The transparency is a total pain. In the big picture it's not that important to the site. No worries.

@JPnycJun 22.2004 — #Take this out, then:

.rcSubMenuStatic, .rcSubMenuHover{ -moz-opacity:.5; opacity:.5; filter:alpha(opacity=5); }

It wouldn't have worked in IE without the width property anyway.

@nycciceeauthorJun 22.2004 — #Now the drop down menu looks great! Except I notice that the large space on the right side of the page is still there until I put the mouse over top of "Services". Then the space disapears! Do you know what it might be that's causing the scroll bar the be there when the page initially loads?

@JPnycJun 22.2004 — #Did it do that before what we added? If so, I don't have time to debug all that javascript. There's a ton of code there. I have a much simpler shorter method of making dynamic menus.

@nycciceeauthorJun 22.2004 — #I didn't notice that happening before, to see if it was there before (now I'm curious) I'm going to take another page and add all that coding to see.

If you have a shorter method I would love to use it, if your offering. Now that your so familiar with what I need you might have a more affective/user friendly way to add a menu - without so many hassels!!

I REALLY appriciate all the time and effort you've put into helping me out. THANKS ? so much.

@JPnycJun 22.2004 — #How familiar are you with HTML/CSS and Javascript? Because it involves all of those.

@nycciceeauthorJun 22.2004 — #I'm very familiar with html and a bit of javascript...not with css. I have been designing sites for a couple years but usually stuck with more simple designs mixed with some flash.

@JPnycJun 22.2004 — #Well my method requires that you code and place the dropdown as though it were always open, and hide it, either with CSS visibility property, or the opacity property we just tried to use here. Then make it visible on mouseover with JS. So it's always there, just not visible.

Unfortunately I don't have any examples on the web at the moment to show you. There's actually a bunch of ways to get that effect.

@nycciceeauthorJun 22.2004 — #I don't know if you have time to do this but if you could send me the coding, piece by piece and tell me step by step where to place everything I would really appreciate it.

I have a feeling that if I try and "wing it" it will take me days to accomplish this task. I'll end up being a huge pain in the butt!

@JPnycJun 22.2004 — #No, I really don't have the time to do that. The only way to do this is to do it for you, and I don't have the time necessary. Best I can do is point you in a direction. You're probably better off staying with what you have now, since it's already done.

@nycciceeauthorJun 22.2004 — #Your totally right!! Sorry for my "newbee" ways. One of these days I will apply myself to this coding stuff and really learn how to do it properly.

The only thing I'm trying to do is get rid of the space that shows up, on the right side, when the page initially loads. Then dispears when the mouse is placed over top of the Services link. It's really bugging me!! If I can get rid of that then I'm done messing with the nav bar.

If you have any suggestions for me please pass them on.

Thanks again!!!!!!

Also in #JavaScript _↴

Another Spacebar Script Regular expression to enforce 2 digits after decimal point Strange loopbehavior:

Success!

Help @nyccicee spread the word by sharing this article on Twitter...

Tweet This

Drop down menu transparent background

32 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drop down menu transparent background

32 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

32 Comments(s) _↴

Also in #JavaScript _↴