|
Home
iRate! IceMelon IM Tutorials Headlines CoolSites PHP Functions |
|
Taking tutorial submissions! Please email them to dave[AT]icemelon[DOT]com for review. Thanks!
Latest Tutorials IceMelon IM: Add IM Functionality to phpBB [Misc] Want to add site-wide member IM to your phpBB community? Sure you do. Simple step-by-step instructions inside. IceMelon IM: Add IM Functionality to vBulletin [Misc] Want to add site-wide member IM to your vBulletin community? Simple step-by-step instructions inside. Crawl Your Site for PageRanks [PHP] So you know your site has a PageRank of 8. What about the PRs of all the inner pages? This tutorial will teach how you to automate the process of grabbing all these PRs. Create CAPTCHA images [PHP] Worried about bots? Then create CAPTCHA images to prevent bots from taking advantage of your site. Convert SHN and FLAC files to MP3 [Misc] Low on disk space and have an insensitive ear? Here are some steps to converting SHN and FLAC files to MP3 format. [View All] Become a sponsor for $15/month. Link is sitewide - PR5 homepage, 20+ PR4 pages, 90+ PR3 pages. Email dave[AT]icemelon[D0T]c0m. |
Awesome Tutorials
DHTML Dropdown Menu By dave
Disclaimer: This is how I like to create my dropdown menus. This methodology may not be conventional (because I made it up), but it's definitely easy, straightforward, and highly customizable.
Here is a working demo.
Here's a slightly fancier demo:
And, here's the code for the first example. <script>
function toggleMenu(sublink) {
if(document.getElementById(sublink).style.visibility == 'hidden')
document.getElementById(sublink).style.visibility = 'visible';
else
document.getElementById(sublink).style.visibility = 'hidden';
}
</script>
<table border=0 cellspacing=0 cellpadding=0><tr><td>
<a href=# onClick="toggleMenu('link1')" style='background:#006DB7; padding:4px; text-align:center; width:80px; color:white; font-weight:bold'>Link 1</a>
</td></tr><tr><td valign=top>
<div id='link1' style='visibility:hidden; position:absolute; background:#0098FD; padding:4px'>
<a href=# onClick=toggleMenu('link1')>Sublink 1</a>
<br><a href=# onClick=toggleMenu('link1')>Sublink 2</a>
<br><a href=# onClick=toggleMenu('link1')>Sublink 3</a>
</div>
</td></tr></table>
Breakdown
In the HTML, I create a 2-cell table, where one cell sits above the other. The top cell contains the "Link 1" you see by default. The bottom cell contains the "popup" menu—i.e. the "sublinks." However, this bottom cell appears to be invisible because I have wrapped the contents within a <DIV> tag (with the ID name "link1"). I then gave this <DIV> the following CSS parameters: visibility:hidden; position:absolute;
Setting "visibility" to "hidden," of course, will render the element invisible. Setting "position" to "absolute" will give this object the floating effect.
Now, to the Javascript. Notice that for each link, I've added the following: onClick="toggleMenu('link1');"
With that in place, each time a link is clicked, the "toggleMenu" function will be called, and the "link1" will be passed in as a parameter.
Let's look at this function: function toggleMenu(sublink) {
if(document.getElementById(sublink).style.visibility == 'hidden')
document.getElementById(sublink).style.visibility = 'visible';
else
document.getElementById(sublink).style.visibility = 'hidden';
}
If you haven't yet figured it, all this function does is toggle the CSS "visibility" property between "visible" and "hidden." The input parameter, "sublink," specifies the name of the ID, which we've specified in the function calls as "link1." The second demo follows the exact same logic. It just looks a bit better, because I put in more effect tweaking the CSS properties. Anyway, play around with it and have fun! P.S. Check out my new site TheManWhoSoldtheWeb.com, where I publish guides and scripts on Internet Marketing and SEO. Here is a limited time freebie: the Rapid Google Indexer. |
