{"id":3521,"date":"2013-08-06T05:09:39","date_gmt":"2013-08-05T19:09:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3521"},"modified":"2020-06-24T12:46:27","modified_gmt":"2020-06-24T02:46:27","slug":"htmlcssjavascript-pulldown-menus-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlcssjavascript-pulldown-menus-primer-tutorial\/","title":{"rendered":"HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PulldownMenus\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PulldownMenus\/Pulldown_Menus.jpg\" title=\"HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to the website idea of Pulldown Menus.   What is a Pulldown Menu?   Glad you asked.  Pulldown Menus let you present a set of links without the clutter until you choose to &#8220;let the clutter in&#8221;.   We are not showing a jQuery solution here, as we have simplified it quite a bit, but there are good jQuery approaches to Pulldown Menu requirements, such as shown for <a target=_blank title='jQuery UI Accordian Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=965'>jQuery UI Accordian Primer Tutorial<\/a>.   As you can imagine, Pulldown Menus are very popular with Mobile App developers and this <a target=_blank title='Android App Pulldown Menus demo' href='https:\/\/play.google.com\/store\/apps\/details?id=com.pulldownmenu.example&#038;hl=en'>link<\/a> goes to an Android mobile app advice demo page.<\/p>\n<p>Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n<p>This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this <a target=_blank title='GIMP png transparency advice' href='http:\/\/geekswithblogs.net\/TimH\/archive\/2006\/03\/20\/72797.aspx'>link<\/a> really helpful.<\/p>\n<p>This tutorial builds on the  <a target=_blank title='HTML\/CSS\/Javascript Sliding Menus Primer Tutorial' href='#slmenuid'>HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a> presented below, and only differs in its CSS to program code from Sliding Menus to Pulldown Menus, which you can verify for yourself by comparing the two program code sources in links just below and way below.<\/p>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PulldownMenus\/'>HTML and CSS and Javascript<\/a> code in live action for this tutorial where you use a Pulldown Menu. <\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/PulldownMenus\/pulldown_menus.html_GETME' title='Download me'>pulldown_menus.html<\/a>.\n<\/p>\n<p>Regarding this topic I really like and got help from <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n<p><strong><em>Did you know?<\/em><\/strong><\/p>\n<p>You may notice that the word Javascript does not appear within the code of pulldown_menus.html as above, so you may wonder how it can be claimed to involve Javascript.   The reason is that Javascript is the default language of HTML element event code, so, just as you can have <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;alert(&#8216;FUNEX?&#8217;);'&#8221; title=&#8221;Two Ronnies Question&#8221;&gt;FUNEX?&lt;\/a&gt;<\/em> <br \/>you can just as well use syntax like <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;Javascript: alert(&#8216;S,VFX&#8217;);'&#8221; title=&#8221;Two Ronnies Answer&#8221;&gt;S,VFX&lt;\/a&gt; <\/em><\/p>\n<p>CSS doesn&#8217;t appear either, but when CSS is written inline (within the HTML) it just resides within <em>&lt;style&gt;<\/em> and  <em>&lt;\/style&gt;<\/em> within  <em>&lt;head&gt;<\/em> and  <em>&lt;\/head&gt;<\/em> within  <em>&lt;html&gt;<\/em> and  <em>&lt;\/html&gt;<\/em> &#8230; have a read of <a target=_blank title='Cascading Style Sheets Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=736'>Cascading Style Sheets Primer Tutorial<\/a> or visit the &#8220;spiritual home&#8221; of HTML or CSS or Javascript at <a target=_blank title='w3schools' href='http:\/\/www.w3schools.com\/'>w3schools<\/a> and learn at a fundamental level.\n<\/p>\n<hr \/>\n<p id='slmenuid'>Previous <a target=_blank title='HTML\/CSS\/Javascript Sliding Menus Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3252'>HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a> below:<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/CSS\/Javascript Sliding Menus Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/Sliding_Menus.jpg\" title=\"HTML\/CSS\/Javascript Sliding Menus Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to the website idea of Sliding Menus.   What is a Sliding Menu?   Glad you asked.  Sliding Menus let you present a set of links without the clutter until you choose to &#8220;let the clutter in&#8221;.   We are not showing a jQuery solution here, as we have simplified it quite a bit, but there are good jQuery approaches to Sliding Menu requirements, such as shown for <a target=_blank title='jQuery UI Accordian Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=965'>jQuery UI Accordian Primer Tutorial<\/a>.   As you can imagine, Sliding Menus are very popular with Mobile App developers and this <a target=_blank title='Android App Sliding Menus demo' href='https:\/\/play.google.com\/store\/apps\/details?id=com.slidingmenu.example&#038;hl=en'>link<\/a> goes to an Android mobile app advice demo page.<\/p>\n<p>Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n<p>This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this <a target=_blank title='GIMP png transparency advice' href='http:\/\/geekswithblogs.net\/TimH\/archive\/2006\/03\/20\/72797.aspx'>link<\/a> really helpful.<\/p>\n<p>Let&#8217;s see some  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/'>HTML and CSS and Javascript<\/a> code in live action for this tutorial where you use a Sliding Menu. <\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SlidingMenus\/sliding_menus.html_GETME' title='Download me'>sliding_menus.html<\/a>.\n<\/p>\n<p>Regarding this topic I really like and got help from <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n<p><strong><em>Did you know?<\/em><\/strong><\/p>\n<p>You may notice that the word Javascript does not appear within the code of sliding_menus.html as above, so you may wonder how it can be claimed to involve Javascript.   The reason is that Javascript is the default language of HTML element event code, so, just as you can have <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;alert(&#8216;FUNEX?&#8217;);'&#8221; title=&#8221;Two Ronnies Question&#8221;&gt;FUNEX?&lt;\/a&gt;<\/em> <br \/>you can just as well use syntax like <br \/><em>&lt;a href=&#8221;<a target=_blank title='Two Ronnies' href='http:\/\/www.youtube.com\/watch?v=zkWMcRlE1mQ'>http:\/\/www.youtube.com\/watch?v=zkWMcRlE1mQ<\/a>&#8221; onclick=&#8221;Javascript: alert(&#8216;S,VFX&#8217;);'&#8221; title=&#8221;Two Ronnies Answer&#8221;&gt;S,VFX&lt;\/a&gt; <\/em><\/p>\n<p>CSS doesn&#8217;t appear either, but when CSS is written inline (within the HTML) it just resides within <em>&lt;style&gt;<\/em> and  <em>&lt;\/style&gt;<\/em> within  <em>&lt;head&gt;<\/em> and  <em>&lt;\/head&gt;<\/em> within  <em>&lt;html&gt;<\/em> and  <em>&lt;\/html&gt;<\/em> &#8230; have a read of <a target=_blank title='Cascading Style Sheets Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=736'>Cascading Style Sheets Primer Tutorial<\/a> or visit the &#8220;spiritual home&#8221; of HTML or CSS or Javascript at <a target=_blank title='w3schools' href='http:\/\/www.w3schools.com\/'>w3schools<\/a> and learn at a fundamental level.\n<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d3252' onclick='var dv=document.getElementById(\"d3252\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d3252' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d3521' onclick='var dv=document.getElementById(\"d3521\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d3521' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here is a tutorial that introduces you to the website idea of Pulldown Menus. What is a Pulldown Menu? Glad you asked. Pulldown Menus let you present a set of links without the clutter until you choose to &#8220;let the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlcssjavascript-pulldown-menus-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[281,327,491,576,652,663,997,1976,1319],"class_list":["post-3521","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-did-you-know","tag-gimp","tag-html","tag-javascript","tag-jquery","tag-programming","tag-pseudo-class","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/3521"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=3521"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/3521\/revisions"}],"predecessor-version":[{"id":49448,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/3521\/revisions\/49448"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=3521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=3521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=3521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}