Creating a small dynamic menu

@CentauriAug 26.2008 — #Have a look at this article - a drop down menu that only uses a small javascript for IE6 to work.

@JMRKERAug 31.2008 — #While this does not use the .htc in the post above, it does work in IE and FF.

[code=php]
 <html>
 <head>
 <title>DIV menus</title>
 <style type="text/css">
 .Titles {
 background-color:cyan;
 font-size: 1.5em;
 text-decoration: none;
 }
 .mTitles {
 display:none; 
 background-color:yellow;
 width:200px;
 }
 </style>
 <script type="text/javascript">
 // From: http://www.webdeveloper.com/forum/showthread.php?t=189854
 
 function Toggle(Info) {
 var CState = document.getElementById(Info).style;
 if ((CState.display == "none") || (CState.display == "")) { CState.display = "block"; } 
 else { CState.display = "none";  }
 }
 </script>
 </head>
 <body>
 <a href="#" onclick="Toggle('titleA')" class="Titles" size="20">Title A</a> (not a link)<br>
 <div id="titleA" class="mTitles">
 <a href="javascript:alert('Put link 1 here')">Link 1</a> (is a link)<br>
 <a href="javascript:alert('Put link 2 here')">Link 2</a> (is a link)<br>
 <a href="javascript:alert('Put link 3 here')">Link 3</a> (is a link)<br>
 </div>
 
 <a href="#" onclick="Toggle('titleB')" class="Titles">Title B</a> (not a link)<br>
 <div id="titleB" class="mTitles">
 <a href="javascript:alert('Put link 1 here')">Link 1</a> (is a link)<br>
 <a href="javascript:alert('Put link 2 here')">Link 2</a> (is a link)<br>
 <a href="javascript:alert('Put link 3 here')">Link 3</a> (is a link)<br>
 </div>
 
 </body>
 </html>
 [/code]

Replace the 'javascript:alert()" messages with your appropriate links.

I removed the 'underline' in the 'Title A' with CSS.

Doesn't get much simpler than this. ?

@bigbavarianauthorSep 02.2008 — #This is wonderful. Thank you.

@JMRKERSep 03.2008 — #You're most welcome.

We're glad we were able to help.

Good Luck! ?

Creating a small dynamic menu

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Creating a small dynamic menu

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴