fugix Posted April 28, 2011 Share Posted April 28, 2011 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? Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/ Share on other sites More sharing options...
cssfreakie Posted April 28, 2011 Share Posted April 28, 2011 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. Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1207320 Share on other sites More sharing options...
fugix Posted April 28, 2011 Author Share Posted April 28, 2011 ahh okay..ive used firebug before...thanks alot cssfreakie...i appreciate it Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1207750 Share on other sites More sharing options...
cssfreakie Posted April 28, 2011 Share Posted April 28, 2011 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. Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1207753 Share on other sites More sharing options...
fugix Posted April 29, 2011 Author Share Posted April 29, 2011 nice, thats useful..i didnt know that Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1208160 Share on other sites More sharing options...
chaseman Posted May 2, 2011 Share Posted May 2, 2011 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. Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1209646 Share on other sites More sharing options...
cssfreakie Posted May 2, 2011 Share Posted May 2, 2011 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 Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1209672 Share on other sites More sharing options...
chaseman Posted May 3, 2011 Share Posted May 3, 2011 I'm talking about this one: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1209697 Share on other sites More sharing options...
cssfreakie Posted May 3, 2011 Share Posted May 3, 2011 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. Link to comment https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1209705 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.