How To Make An HTML Navigation Menu in A Few Easy Steps
That’s how An HTML Navigation Menu is constructed.
You can create your code in WordPress Custom HTML block or e.g Notepad to keep the code readable.
The example text used for this post you can find below.
Step 1.
First, start with a button element.
<button></button>
Step 2.
Next, you give the button what the text on it will be. Our button’s text will be “Dogs”.
<button>Dogs</button>
Step 3. (optional)
If you wish to edit the look of your button, please read the step below.
Now, give the button an id (use class if you want multiple buttons). Remember, in an id, there cannot be any spaces, commas, periods or any special characters except underline (_) and hyphen (-). You can have multiple classes separated by spaces but you cannot have any special characters except underline and hyphen like id. These will be used to edit the look of the button with CSS.
Button with id “dogs-button”. Ids are all unique and one element can have only one id.
<button id=”dogs-button”>Dogs</button>
Button with class “dogs-button” and “dogs-button-2”. You can apply the same class to multiple buttons. Using class gives the ability to make multiple buttons look the same.
<button class=”dogs-button dogs-button-2″>Dogs</button>
You can make multiple buttons.
Step 4.
Now, we make the button a link. The a element is the link element.
<a><button id=”dogs-button”>Dogs</button></a>
You should now give the link element (a) the href attribute.
<a href=””><button id=”dogs-button”>Dogs</button></a>
Now, we need to get an id from a text and put that id in the href attribute with a hashtag (#) in-front.
Step 5.
We now give the headings “Dogs” and “Cats” an id.
In WordPress, to add an id to your heading, open Heading Settings > Advanced > HTML Anchor. Write a desired id in the HTML Anchor text box. Our HTML Anchor is “dogs-text”
If the Heading Settings are not available, you can edit your heading as HTML.
Add ids to the headings:
Ad id=”cats-text” to the heading. The id should be inside the heading element (h2)
The heading “Dogs” has an id of “dogs-text” and the heading “Cats” has an id of “cats-text”.
Now we put in the id(s) into the href attribute(s). Remember to put a hashtag (#) in-front!
<a href=”#dogs-text”><button id=”dogs-button”>Dogs</button></a>
<a href=”#cats-text”><button id=”cats-button”>Cats</button></a>
Step 6. (optional)
If you want text to show when someone hovers their cursor over the button, please read the step below.
We can add a title attribute. This attribute shows text over the link when someone hovers their cursor over the link.
In the title attribute, next to the equals sign (=), inside the speech marks (“”), you write what you want the hover text to be.
<a href=”#dogs-text” title=””><button id=”dogs-button”>Dogs</button></a>
Our text will be “Hover Dogs!”. Remember, the title attribute can be any character and special character.
<a href=”#dogs-text” title=”Hover Dogs!”><button id=”dogs-button”>Dogs</button></a>
Last Notice.
When copy-pasting the code, please check the code the speech marks (“”) in your code editor (e.g. WordPress Custom HTML) and re-write them if necessary. So, they are the code readable speech marks. In some cases theme/template default font offers speech marks, which are not code compatible. This is one of the main tiny problems, which causes huge disasters. If your code doesn’t work, please check the speech marks.
There can never be multiple same ids in one HTML file. There can only be one id in each element. ids cannot have any special characters except underline (_) and hyphen (-).
There can be multiple same classes in one HTML file and elements can have multiple classes separated by spaces. classes cannot have any special characters except underline (_)
If you need professional help, try checking the internet for websites that teach you HTML/CSS/JavaScript.
You can preview your code in WordPress by making a post, then adding a block, and then choosing “Custom HTML”. Paste your code into the field and click “Preview” to see how your code works.
The result is:
- as seen in HTML
<a href=”#dogs-text” title=”Hover Dogs!”><button id=”dogs-button”>Dogs</button></a>
<a href=”#cats-text” title=”Hover Cats!”><button id=”cats-button”>Cats</button></a>
- as seen in Blocks and Visual Editors
When you don’t style your buttons, they will follow your default theme/template/style.
Example text:
Cats
The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt rodents. About 60 cat breeds are recognized by various cat registries.
Wikipedia
Dogs
The dog (Canis familiaris when considered a distinct species or Canis lupus familiaris when considered a subspecies of the wolf) is a domesticated carnivoran of the family Canidae. It is part of the wolf-like canids, and is the most widely abundant terrestrial carnivore. The dog and the extant gray wolf are sister taxa as modern wolves are not closely related to the wolves that were first domesticated, which implies that the direct ancestor of the dog is extinct. The dog was the first species to be domesticated, and has been selectively bred over millennia for various behaviors, sensory capabilities, and physical attributes.
Wikipedia