Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
  
performance / stats
Country: United States
Likes Received: 2751
Featured Member: 18 times
Associates: 12662
Wall Posts: 474
Comments Made: 26745
Press Releases: 360
Videos: 2
Phone: No Calls Please
Skype:    
profile visitor stats
TODAY: 79
THIS MONTH: 4045
TOTAL: 560140
are we ibo associates?
member advertising
active associates
Nivedita Vaidya    
Last logged on: 12/14/2017


Jack Dawson      
Last logged on: 12/14/2017


Saskia Bader    
Last logged on: 12/14/2017


Bill Douglas    
Last logged on: 12/14/2017


Tom Riach    
Last logged on: 12/14/2017


Linda Taylor  
Last logged on: 12/14/2017


Ken Christie    
Last logged on: 12/14/2017


Lawrence Rinke    
Last logged on: 12/14/2017


Ion Iacob    
Last logged on: 12/14/2017


Patricia Hudon     
Last logged on: 12/14/2017


Ken Burwen    
Last logged on: 12/14/2017


Brian Perryman    
Last logged on: 12/14/2017


jack shalom  
Last logged on: 12/14/2017


Athena Gay    
Last logged on: 12/14/2017


Kristijan Spariosu    
Last logged on: 12/14/2017


other ibo platforms








Curtiss Martin   My Press Releases

Finally, A Menu For All My Nove-Noga Pages

Published on 6/29/2015
For additional information  Click Here

FavIcon
Nove-Noga.comFinally, A Menu For All My Nove-Noga Pages:
Menus can be one of the hardest tasks for your HTML5 pages. Last year, I went on a search to find a horizontal menu that I could use for Nove-Noga.com. It turned out to be a much more difficult trick than I had considered.

Xref: Nove-Noga.com Upgrades for Two Year IBOversary

A Working HTML5 CSS Menu:
Fortunately, I found a ready-made answer. One of the things that I learned early in my online efforts is that it is not necessary to re-invent the wheel. Often what you need has already been created. At PositionIsEverything.net I found a lovely menu example complete with the Internal CSS to go with it. *Note: Often it is difficult to understand how a page achieves the results because of the External CSS used to display those results.*

http://www.positioniseverything.net/css-dropdowns.html

Of course I had to modify it to work for my purposes. To do that, you need to understand what the code does. So, it is not for the faint of heart. In the end I created a working menu that was six buttons wide and went down two layers. (Yes, I overdid it. Anything worth doing…) The only real problem that I had with the results was that it added a massive amount of code to every page. There had to be an easier way.

A Working Example of the Horizontal HTML/CSS Menu:
http://www.nove-noga.info/pagenotfound.html

What Makes an HTML5 Page Work?
Only recently has the following concept set come to my attention. An HTML5 page is created using three languages: HTML for building web pages; CSS for styling your web pages; and JavaScript for programming your web pages. For more on this, visit the new pages at http://www.w3schools.com. Their update has made it much easier to learn what you need to know to build your web pages.

So, The Answer Was in JavaScript:
The Idea that JavaScript was the programming language for HTML5 pages was new to me. I cannot explain my oversight. Maybe it was my focus on getting a page up. With so much to do, I don’t feel that I have the time to learn a whole new language. But, maybe I didn’t have to. I searched again for a menu only this time I specified “JavaScript”

Search (Javascript horizontal menu generator):
Webestools.com Horizontal Menu Generator

And There It Was:
The link above from Webestools.com is a tool to generate the JavaScript you need for a drop down horizontal menu. I lost a little functionality and a little of my creative control but the result was immensely smaller than the HTML/CSS menu that I created last year.

Now for the Final Trick:
With the recent focus on making our pages Mobile Friendly, I checked my new menu with PageSpeed Insights. In their efforts to help you optimize your pages, they offer to download optimized image, JavaScript, and CSS resources for your page. As part of the download, I found an optimized JavaScript File that I could use to replace the new JavaScript on my page with a common link. This means that I can drop that link on every page for my site and only need to change the JavaScript file to make changes to the menus on All of my Nove-Noga.com pages.

My New Menu for Nove-Noga.com:
<script src="http://www.nove-noga.com/style-9.js"></script>

Recap:
Finally, a menu for all my Nove-Noga.com pages. With the JavaScript horizontal menu generator from Webestools.com, and a little help from PageSpeed Insights, I have been able to apply a menu to all of my pages at Nove-Noga.com. As an additional bonus, applying the menu as an external JavaScript file improved my results at PageSpeed Insights. Nove-Noga!

Nove-Noga.com/Learn.html
Nove-Noga.com
Nove-Noga.com
© 06/29/2015

Member Note: To comment on this PR, simply click reply on the owners main post below.
-  Copyright 2016 IBOsocial  -            Part of the IBOtoolbox family of sites.