{"id":43919,"date":"2019-03-07T03:01:13","date_gmt":"2019-03-06T17:01:13","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43919"},"modified":"2024-01-11T07:23:12","modified_gmt":"2024-01-10T21:23:12","slug":"htmlcssjavascript-pulldown-menus-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlcssjavascript-pulldown-menus-javascript-tutorial\/","title":{"rendered":"HTML\/CSS\/Javascript Pulldown Menus Javascript Tutorial"},"content":{"rendered":"
\"HTML\/CSS\/Javascript<\/a>

HTML\/CSS\/Javascript Pulldown Menus Javascript Tutorial<\/p><\/div>\n

When we last discussed pulldown menus with HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial<\/a> we didn’t involve any blocks of Javascript code in the document.head section of the webpage, and no document.body onload event logic. As of today, that is not the case, because we are using the Javascript and document.body onload event call below …<\/p>\n


\n<script type='text\/javascript'>
\nvar sp1=null;
\nfunction onl() { \/\/ thanks to https:\/\/coursesweb.net\/javascript\/queryselector-queryselectorall<\/a>
\nvar gp='https:\/\/www.google.com\/search?q='; \/\/ Mount+Kenya&rlz=1C5CHFA_enAU832AU832&oq='; \/\/Mount+Kenya
\nif (sp1 == null) { sp1 = document.getElementById('more'); }
\n
\n\/\/ gets A tags added in document.body
\nvar xelms = document.body.querySelectorAll('a');
\n
\n\/\/registers mouseenter to each element in xelms array
\nfor(var xi=0; xi<xelms.length; xi++){
\n xelms[xi].addEventListener('mouseenter', (ev)=>{
\n if (ev.target.href.substring(0,1) != '#' && ev.target.href.indexOf(document.URL + '#') == -1) {
\n if (ev.target.innerHTML.indexOf(' (') != -1) {
\n sp1.innerHTML = '<a style=\"text-decoration:underline;cursor:pointer;\" target=_blank title=\"Google search for ' + ev.target.innerHTML + '\" href=\"' + gp + ev.target.innerHTML.split(' (')[0].replace(\/\\ \/g,'+') + '+mountain' + '\">' + ev.target.innerHTML + '<\/a>';
\n } else {
\n sp1.innerHTML = ev.target.href;
\n }
\n } else if (ev.target.outerHTML.split('>')[0].indexOf('http') != -1) {
\n sp1.innerHTML = '<a style=\"text-decoration:underline;cursor:pointer;\" target=_blank title=\"Wikipedia page for highest mountains in ' + ev.target.innerHTML + '\" href=\"http' + ev.target.outerHTML.split('>')[0].split('http')[1].split(\"'\")[0].split('\"')[0] + '\"> in ' + ev.target.innerHTML + '<\/a>';
\n }
\n });
\n}
\n
\n\/\/ gets A tags in LI in UL added in element with id='topdiv'
\nvar elms = document.getElementById('topdiv').querySelectorAll('ul li a');
\n
\n\/\/registers mouseenter to each element in elms array
\nfor(var i=0; i<elms.length; i++){
\n elms[i].addEventListener('mouseenter', (ev)=>{
\n if (ev.target.href.substring(0,1) != '#' && ev.target.href.indexOf(document.URL + '#') == -1) {
\n if (ev.target.innerHTML.indexOf(' (') != -1) {
\n sp1.innerHTML = '<a style=\"text-decoration:underline;cursor:pointer;\" target=_blank title=\"Google search for ' + ev.target.innerHTML + '\" href=\"' + gp + ev.target.innerHTML.split(' (')[0].replace(\/\\ \/g,'+') + '+mountain' + '\">' + ev.target.innerHTML + '<\/a>';
\n } else {
\n sp1.innerHTML = ev.target.href;
\n }
\n } else if (ev.target.outerHTML.split('>')[0].indexOf('http') != -1) {
\n sp1.innerHTML = '<a style=\"text-decoration:underline;cursor:pointer;\" target=_blank title=\"Wikipedia page for highest mountains in ' + ev.target.innerHTML + '\" href=\"http' + ev.target.outerHTML.split('>')[0].split('http')[1].split(\"'\")[0].split('\"')[0] + '\"> in ' + ev.target.innerHTML + '<\/a>';
\n }
\n });
\n}
\n}
\n<\/script><\/b>
\n
\n<\/head>
\n<body onload=\"onl();\"<\/b> title=\"Mt Everest (8848 m) is Highest Mountain in the World ... but this is Blue Mountains in NSW, Australia\">
\n<\/code><\/p>\n

The central “plank” to this new Javasacript logic is the use of Javascript DOM querySelectorAll<\/a>() followup, if you will, to the querySelector<\/a>() deployed when we changed the Tic Tac Toe game, last, when we presented Tic Tac Toe Class Tutorial<\/a>, the “All” difference being that all HTML elements found for a criteria scope of code can be “visited” (or transited) as the querySelectorAll arrangements are made at the document.body onload event logic as above.<\/p>\n

This type of Javascript code shows a meeting of DOM (action) and CSS (styling) “minds”, to our mind.<\/p>\n

You can try this pulldown menus web application for yourself at this live run<\/a> link and\/or peruse the changed<\/a> HTML and CSS and Javascript pulldown menus pulldown_menus.html<\/a> code whereby new linking to information dynamically appears within the topmost HTML h1 element.<\/p>\n

\n

Previous relevant HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML\/CSS\/Javascript<\/a>

HTML\/CSS\/Javascript Pulldown Menus Primer Tutorial<\/p><\/div>\n

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 “let the clutter in”. 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 jQuery UI Accordian Primer Tutorial<\/a>. As you can imagine, Pulldown Menus are very popular with Mobile App developers and this link<\/a> goes to an Android mobile app advice demo page.<\/p>\n

Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n

This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this link<\/a> really helpful.<\/p>\n

This tutorial builds on the 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

Let’s see some HTML and CSS and Javascript<\/a> code in live action for this tutorial where you use a Pulldown Menu. <\/p>\n

Link to some downloadable HTML programming code … rename to pulldown_menus.html<\/a>.\n<\/p>\n

Regarding this topic I really like and got help from “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n

Did you know?<\/em><\/strong><\/p>\n

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
<a href=”http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>” onclick=”alert(‘FUNEX?’);'” title=”Two Ronnies Question”>FUNEX?<\/a><\/em>
you can just as well use syntax like
<a href=”http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>” onclick=”Javascript: alert(‘S,VFX’);'” title=”Two Ronnies Answer”>S,VFX<\/a> <\/em><\/p>\n

CSS doesn’t appear either, but when CSS is written inline (within the HTML) it just resides within <style><\/em> and <\/style><\/em> within <head><\/em> and <\/head><\/em> within <html><\/em> and <\/html><\/em> … have a read of Cascading Style Sheets Primer Tutorial<\/a> or visit the “spiritual home” of HTML or CSS or Javascript at w3schools<\/a> and learn at a fundamental level.\n<\/p>\n

\n

Previous HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a> below:<\/p>\n

\"HTML\/CSS\/Javascript<\/a>

HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/p><\/div>\n

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 “let the clutter in”. 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 jQuery UI Accordian Primer Tutorial<\/a>. As you can imagine, Sliding Menus are very popular with Mobile App developers and this link<\/a> goes to an Android mobile app advice demo page.<\/p>\n

Thanks to Wikipedia for the data about Mountain Heights on Earth which helped with the content of this tutorial.<\/p>\n

This tutorial also touched on the idea of transparency with a png background image using GIMP, and I found this link<\/a> really helpful.<\/p>\n

Let’s see some HTML and CSS and Javascript<\/a> code in live action for this tutorial where you use a Sliding Menu. <\/p>\n

Link to some downloadable HTML programming code … rename to sliding_menus.html<\/a>.\n<\/p>\n

Regarding this topic I really like and got help from “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n

Did you know?<\/em><\/strong><\/p>\n

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
<a href=”http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>” onclick=”alert(‘FUNEX?’);'” title=”Two Ronnies Question”>FUNEX?<\/a><\/em>
you can just as well use syntax like
<a href=”http:\/\/www.youtube.com\/watch?v=h-mX9T2qyIQ#zkWMcRlE1mQ<\/a>” onclick=”Javascript: alert(‘S,VFX’);'” title=”Two Ronnies Answer”>S,VFX<\/a> <\/em><\/p>\n

CSS doesn’t appear either, but when CSS is written inline (within the HTML) it just resides within <style><\/em> and <\/style><\/em> within <head><\/em> and <\/head><\/em> within <html><\/em> and <\/html><\/em> … have a read of Cascading Style Sheets Primer Tutorial<\/a> or visit the “spiritual home” of HTML or CSS or Javascript at w3schools<\/a> and learn at a fundamental level.\n<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n