Can anyone tell me how they are doing this. I am talking about the My Yahoo website with all the individual modules/portals/pods so to speak. When you click on the arrow it expands the module and vice versa. I have attached screen shots to show what I am talking about. Even better, can anyone give an example. I am guessing its a combination of CSS and JavaScript.it is just a hide/show layout... but how to make the arrow switch direction I have no clue
Bon Rouge has a fine tutorial of that
but yes, it is done with the help of a javascriptHere is a menu system like that on Yahoo, here's some info on how it works.
There is some JavaScript that searches through the page for all <ul>'s with class="expandable" on them, any that it finds are assumed to be one of these menu's and each <li> in the <ul>'s are assumed to be sections in the menu.
Inside each <li> there should only be TWO child elements, any more or less and the menu will not work properly. They can be any type of element that you want, for the purpose of my example I have chosen <h3> and <div>. If you choose different elements then you would need to alter the CSS selectors in order for the rules to be applied. These are the CSS selectors that I'm talking about:.expandable li h3
.expandable li div
I applied the arrow to the first element in each list item as a background. Depending on whether each section is open or closed, the first element either has a class of "open" or "closed". And the background image is swopped based on the class. Here is the CSS for that part:.expandable .open{
background:url(open.png) no-repeat 8px 50%;
}
.expandable .closed{
background:url(closed.png) no-repeat 8px 50%;
}Now, I realise that you may not have much experience with CSS, a lot of people don't, but it's powerful stuff and it's possible to apply sweeping changes to many elements by only creating one new rule. If you need any help with the CSS for this then I'd be happy to help.
Bon Rouge has a fine tutorial of that
but yes, it is done with the help of a javascriptHere is a menu system like that on Yahoo, here's some info on how it works.
There is some JavaScript that searches through the page for all <ul>'s with class="expandable" on them, any that it finds are assumed to be one of these menu's and each <li> in the <ul>'s are assumed to be sections in the menu.
Inside each <li> there should only be TWO child elements, any more or less and the menu will not work properly. They can be any type of element that you want, for the purpose of my example I have chosen <h3> and <div>. If you choose different elements then you would need to alter the CSS selectors in order for the rules to be applied. These are the CSS selectors that I'm talking about:.expandable li h3
.expandable li div
I applied the arrow to the first element in each list item as a background. Depending on whether each section is open or closed, the first element either has a class of "open" or "closed". And the background image is swopped based on the class. Here is the CSS for that part:.expandable .open{
background:url(open.png) no-repeat 8px 50%;
}
.expandable .closed{
background:url(closed.png) no-repeat 8px 50%;
}Now, I realise that you may not have much experience with CSS, a lot of people don't, but it's powerful stuff and it's possible to apply sweeping changes to many elements by only creating one new rule. If you need any help with the CSS for this then I'd be happy to help.