dropdown triangle

[fugix]

hey guys,

 

this is just a curiosity question and im sure its easy...but how you you get the little triangle with some dropdown menus have..like the one on this page when you hover over the home button?

[cssfreakie]

Hi Fugix,

 

Most sub-menu's are unordered lists (<ul>) inside of another unordered list. In a nutshell the sub in a normal state is placed outside the view of the screen by using indent or margin or set to display none; (so you don't see it)

Now on hover state, it's than set back to display:block; or set to it's normal position depending on the technique used. (so you see it)

 

example on what happens on the menu here at phpfreaks.com:

 

active state (normal state)

.dropmenu li ul { /* notice the ul inside the li declaration */
    background: url("../images/theme/menu_gfx.png") no-repeat scroll 0 -130px transparent;
    border-bottom: 1px solid #999999;
    display: none;
    font-weight: normal;
    padding: 7px 0 0;
    position: absolute;
    width: 19.2em;
    z-index: 90;
}

 

hover state

.dropmenu li:hover ul {
    display: block;
}
index.css?rc5 (line 1215)
.dropmenu li ul {
    background: url("../images/theme/menu_gfx.png") no-repeat scroll 0 -130px transparent;
    border-bottom: 1px solid #999999;
    /* display: none;  this one gets overwritten*/
    font-weight: normal;
    padding: 7px 0 0;
    position: absolute;
    width: 19.2em;
    z-index: 90;
}

 

as far as the image used that's just a nicely positioned sprite image which you can see in the source above.

 

small tip. get firefox and install firebug, that allows you to inspect the source code in a nice way and allows you to adjust it in real time. video on my blog if you have no idea how to use it.

[fugix]

ahh okay..ive used firebug before...thanks alot cssfreakie...i appreciate it

[cssfreakie]

no problem, not though at the right side there is a little button on the 'style tab' if you click it you can also select hover state. pretty useful.

 

[fugix]

nice, thats useful..i didnt know that

[chaseman]

There are tutorials available on how to it with pure CSS without any graphics, I've tried to follow them but never got it to work. I couldn't get the speech bubbles to work either.

[cssfreakie]

There are tutorials available on how to it with pure CSS without any graphics, I've tried to follow them but never got it to work. I couldn't get the speech bubbles to work either.

 

if you mean the triangle....I really doubt that a triangle can be made with pure css apart from an extremely redundant ,div in div in div mark up untill you reach a pyramid shape. as far as the menu with the hover, yes this can be done with pure css, but that's only true for browsers that accept the pseudo hover class. And as you might have guessed it, IE 6 and lower don't so you need to mimic that with javascript.

 

so if this is solved. mark it!  we love green here

[chaseman]

I'm talking about this one: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

[cssfreakie]

I'm talking about this one: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

ah the "content" property. although it's considered wrong to use, it might be worth it indeed. nice for pointing that out chaseman. I might very well use it.