FULLY DEVELOPED TOP NAVIGATION BAR OR MAIN MENU USING HTML, CSS AND JS
What is a Fully Fledged Navigation Bar ? Nothing but a navigation bar which is easily accessible in a variety of devices like smartphones, Tablets etc. Navigation Bar which is responsible for creating HTML, Css and Js.
HTML
In the HTML file you have to include what are all the main menu items using list tag which will help us to list items while we open it in mobile screens or you can include with a simple tag or any other tags but it will be a difficult one to handle in CSS or you have to copy and create another main menu items it will increase code size. Next one we have to consider while we create a navigation bar is toggle icon. To include toggle icons you have to use Font Awesome or any other open source icons based on CSS. All you have to do is select whatever icon you want from the Font Awesome and add it to your HTML file. And all of the above you have to link your CSS and JS files and also you have include Font Awesome link => https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css.cms.html File
You have to always put that italic tag copied from Font Awesome inside a class named icon if you change the name of the class icon it won't appear and the second fa (fa-lg) in italic tag is used to determine the size of the icon you are going to use. And the javascript(0) inside that hypertext is used to show mouse pointer while you hover on that icon or a normal mouse icon will appear and I am pretty sure you have noticed many times when you hover mouse on certain images "javascript:void(0);" is displayed in the left-bottom of the page.
CSS
The Cascading Style sheet is used to style our navigation bar. Here you have to align items according to the device's width. For that we are going to use @media rule. Using this you can set maximum and minimum width or height, by this you can decide where the effect has to apply. For Example: once the width of the screen is reduced to mobile screen you can't show the entire navigation bar for that only you have to set the main menu's display to none and we are going to use a toggle icon acting as a button. Once the toggle button is clicked we are going to list main menu items vertically.
cms.css File
Not only to adjust to the screen's width but also to change background colour, text colour, font-family, padding which is similar to margin; these are some of the attributes used in our style sheet. Display which is one of the important attribute which helps us to set an element to none or to a block state. For Example: In the end of our stylesheet display is set to inline-block for an element a inside li and the width is set to 98% with this clickable width of a main menu item's will be 98% of screen's width.
JS
JavaScript helps us to show main menu item's in mobile screen with the help of an onclick event. We have used two onclick events in each one of the toggle icons, one is for the main menu to appear, another one to disappear and the alignments have already been specified on the cascading style sheet with the help of @media rule. Every time the toggle button is clicked that toggle icon will disappear and another toggle icon will appear.
cms.js File
Here is the link for Google KickStart Round A 2020 Plates problem using Java.
0 Comments