DelphiFAQ Home Search:

Creating a dropdown menu with Javascript

 

comments5 comments. Current rating: 4 stars (2 votes). Leave comments and/ or rate it.

Question:

How can I create a navigation menu on the fly?

Answer:

Take the HTML from below. It uses a little graphic for the downpointing arrow. You can download that graphic here. Save it in the same folder where your HTML page is.

The menu will look like this:

 

<html>
<head>
<style>
#ddmenu a{ text-decoration:none; }
#ddmenu a:hover{ background-color:#FFFF95; 
}
</style>
</head>
<body>

<script language="JavaScript1.2">

document.write('<span style="position:relative;width:50px;');
document.write('height:20px;border:1px solid black;font:bold 10pt Verdana;');
document.write('padding:2px" onClick="toggle_menu(1);');
document.write('event.cancelBubble=1" ><span style="cursor:hand;width:100%">');
document.write('Portals <img width=10 height=5 src="down.gif"></span>')
document.write('<div id="ddmenu" style="position:absolute;left:2;top:16;width:90px;');
document.write('height:80px;border:1px solid black;background-color:white;');
document.write('overflow-y:scroll;visibility:hidden;">')

function additem(linkname,dest){ 
  document.write('<b><a target=_blank href="'+dest+'">'+linkname+'</a></b><br>')
}

function toggle_menu(state){
var theMenu=document.getElementById("ddmenu").style;
if (state==0) { 
  theMenu.visibility="hidden" }
else {
  theMenu.visibility = (theMenu.visibility=="hidden") ? "visible" : "hidden";
}
}

additem("Google","http://www.google.com");
additem("Yahoo","http://www.yahoo.com");
additem("Teoma","http://www.teoma.com");

document.onclick= function() {toggle_menu(0); }
document.write('</div></span>')
</script>


</body>
</html>

Content-type: text/html

Comments:

2006-05-17, 04:18:43
anonymous from India  
rating
2009-09-30, 18:07:26
anonymous from Canada  
nice
2009-11-18, 07:35:29
[hidden] from Ahmadabad, India  
rating
Let me tell you one thing this is very simple and simply awesome.
Rather than complex css menus I was looking something like this for my drop down search list.

Thank you very much :)
2012-11-30, 08:05:47   (updated: 2012-11-30, 08:09:03)
anonymous from Iraq  
<html>
<head><title>akre</title></head>
<body bgcolor='skyblue'>
<table border='2' width='70%' height='70%' align='center' bordercolor='red'>
<bgcolor= '#ffffff'><td>1</td><td>2</td& gt;<td>3</td><td>4</td><td>5& lt;/td><td>6</td><td>7</td><td& gt;8</td><td>9</td><td>10</td>></tr>
<bgcolor= '#f0f0f0'><td>11</td><td>12</ td><td>13</td><td>14</td><td> 15</td><td>16</td><td>17</td> <td>18</td><td>19</td><td>20&20</td></tr>
<bgcolor= '#e0e0e0'><td>21</td><td>22</ td><td>23</td><td>4</td><td> 25</td><td>26</td><td>27</td> <td>28</td><td>29</td><td>30&l0</td></tr>
<bgcolor= '#d0d0d0'><td>31</td><td>32</ td><td>33</td><td>34</td><td> 35</td><td>36</td><td>37</td> <td>38</td><td>39</td><td>40&40</td></tr>
<bgcolor= '#c0c0c0'><td>41</td><td>42</ td><td>43</td><td>44</td><td> 45</td><td>46</td><td>47</td> <td>48</td><td>49</td><td>50&50</td></tr>
<bgcolor= '#b0b0b0'><td>51</td><td>52</ td><td>53</td><td>54</td><td> 55</td><td>56</td><td>57</td> <td>58</td><td>59</td><td>60&60</td></tr>
<bgcolor= '#a0a0a0'><td>61</td><td>62</ td><td>63</td><td>64</td><td> 65</td><td>66</td><td>67</td> <td>68</td><td>69</td><td>70&70</td></tr>
<bgcolor= '#909090'><td>71</td><td>72</ td><td>73</td><td>74</td><td> 75</td><td>76</td><td>77</td> <td>78</td><td>79</td><td>80&80</td></tr>
<bgcolor= '#808080'><td>81</td><td>82</ td><td>83</td><td>84</td><td> 85</td><td>86</td><td>87</td> <td>88</td><td>89</td><td>90&90</td></tr>
<bgcolor= '#707070'><td>91</td><td>92</ td><td>93</td><td>94</td><td> 95</td><td>96</td><td>97</td> <td>98</td><td>99</td><td>100& lt;/td></tr>
</table>
</body>
</t;/html&& lt;html>
<head><title>akre</title><
2013-03-13, 04:28:49
anonymous from India  

 

 

NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.
 

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: