Hi
I am looking for Website that you recommend where I can get Drop down Menu and Tab Menu CSS code.
Cheers Possum..
I am looking for Website that you recommend where I can get Drop down Menu and Tab Menu CSS code.
Cheers Possum..
Looking for Drop Down and Tab Menu Effects
There are some recommendations for drop down menus here: http://www.frihost.com/forums/vt-65862.html
I'm working on a drop down menu myself, so I'm going to check these out. I found one I really liked, but I can't manage to change it to suit my needs, so I've got to start all over again.
I'm working on a drop down menu myself, so I'm going to check these out. I found one I really liked, but I can't manage to change it to suit my needs, so I've got to start all over again.
Have you managed to find anythig suitable. Dynamicdrive has most certainly got some tab menus.
I used suckerfish multi-level menu. Still working on it, but this is what I've
done so far: http://www.celticawen.frih.net/test/testpage.php
It's all done with css.
Let us know if you've found something you can use.
I used suckerfish multi-level menu. Still working on it, but this is what I've
done so far: http://www.celticawen.frih.net/test/testpage.php
It's all done with css.
Let us know if you've found something you can use.
www.alistapart.com has some great articles on this. You might also want to try www.bonrouge.com and www.joe2torials.com
It's easy to do dropdowns... The fastest and most usefull are suckerfish.
As for the tabs...
Here's a small idea to chew on:
put the contents in a DIV tag and set the CSS property of display to none; use incremental id's like "tab1" and "tab2".
Now, make a new div that will hold the displayed content... make the display block or whatever will fit your needs.
And now for the magic...
The tab buttons will have to call a function that will change the content of the display DIV to the contents of the proper DIV.
It's all about the DOM. In case i lost you, I'll just give you an example to understand me:
In case you want to display content with a next and previous button...
Both of these solutions are tested on FF 1.5 and 2.x Branch, on IE 5.5, 6 & 7 and work fine. You can change the BUTTON tags with images or whatever element you want as long as they have the onmouse events.
The first example is easy to understand. The second uses a hidden input field in order to keep track of the displayed tab number... Have fun.
PS: if Dan Webb will be ok with this, maybe I'll call these Suckerfish Tabs... Just kiddin' =)
As for the tabs...
Here's a small idea to chew on:
put the contents in a DIV tag and set the CSS property of display to none; use incremental id's like "tab1" and "tab2".
Now, make a new div that will hold the displayed content... make the display block or whatever will fit your needs.
And now for the magic...
The tab buttons will have to call a function that will change the content of the display DIV to the contents of the proper DIV.
It's all about the DOM. In case i lost you, I'll just give you an example to understand me:
| Code: |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"> function changeTab(tid){ //tid is the ID of the tab that should be displayed contentDiv=document.getElementById('displayDiv'); dTab=document.getElementById(tid); contentDiv.innerHTML=dTab.innerHTML; } </script> </head> <body> <div id="tab1" style="display:none;">Content for tab 1 =)</div> <div id="tab2" style="display:none;">Content for <font color="#FF0000"><b>tab 2 =)</b></font></div> <div id="tab3" style="display:none;">Lorem Ipsum et Dolores... =P</div> <button onmousedown="javascript:changeTab('tab1')">Display Tab 1</button> <button onmousedown="javascript:changeTab('tab2')">Display Tab 2</button> <button onmousedown="javascript:changeTab('tab3')">Display Tab 3</button> <div id="displayDiv" style="display:block; border:1px solid #333333">Initial content...</div> </body> </html> |
In case you want to display content with a next and previous button...
| Code: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"> function changeTab(chType){ //tid is the ID of the tab that should be displayed contentDiv=document.getElementById('displayDiv'); if (chType=='dec'){ idNr=document.getElementById('counter').value; if (idNr>1){ document.getElementById('counter').value--; idNr--; } contentDiv.innerHTML=document.getElementById('tab'+idNr).innerHTML; }else{ idNr=document.getElementById('counter').value; if (idNr<3){ //change 3 to whatever is the max tab number... in this case there are 3 tabs so 3 is the max value document.getElementById('counter').value++; idNr++; } contentDiv.innerHTML=document.getElementById('tab'+idNr).innerHTML; } } </script> </head> <body> <div id="tab1" style="display:none;">Content for tab 1 =)</div> <div id="tab2" style="display:none;">Content for <font color="#FF0000"><b>tab 2 =)</b></font></div> <div id="tab3" style="display:none;">Lorem Ipsum et Dolores... =P</div> <button onmousedown="javascript:changeTab('dec');"><Previous</button> <button onmousedown="javascript:changeTab('inc');">Next></button> <div id="displayDiv" style="display:block; border:1px solid #333333">Initial content...</div> <input type="hidden" id="counter" value="0" /> </body> </html> |
Both of these solutions are tested on FF 1.5 and 2.x Branch, on IE 5.5, 6 & 7 and work fine. You can change the BUTTON tags with images or whatever element you want as long as they have the onmouse events.
The first example is easy to understand. The second uses a hidden input field in order to keep track of the displayed tab number... Have fun.
PS: if Dan Webb will be ok with this, maybe I'll call these Suckerfish Tabs... Just kiddin' =)
 |