Hey,
@Malcolm.
Seeing as we're both working on the
Project together, let me show you how I do it.
Now, as to what I do for a
Navigation-Menu, it's a relatively simple and quick Method of making a
Nav-Menu. I do not use
<ul> or
<nav> when making a
Nav-Menu though.
Here's a Snippet from the
WebWareBox Website Source-Code that shows the Code for a
Nav-Menu:
[CODE lang="html" title="WebWareBox Nav-Menu"] <!--Navigation Menu-->
<div class="NavMenu">
<a href="index.html"><button>Home</button></a>
<a href="download.html"><button>Download Packages</button></a>
<a href="news.html"><button>WebWareNews</button></a>
<a href="about.html"><button>About The Project</button></a>
</div>
[/CODE]
Looking at it, you can see that instead of using
Hyperlinks(<a>), I instead use
<button> for the
Nav-Menu. But the thing about the Buttons is that they're nested inside the
<a> Tag. This is so that when the User clicks on the Button, it navigates them to another Page.
As for using Button, it removes the need to heavily
Customize the
<a> Tag using
CSS to make it look like a Button. Were as it's a lot easier to
Customize a Button as you don't need to do that much modifying to make it look like a Button because of course, it's a Button.
As for customizing the Button, here is some more
Source-Code from the
WebWareBox Website that customizes the Button's Background, Font-Size and Border and slightly tweaks the Background-Colour and give the Button a Drop-Shadow when it's being hovered over:
[CODE lang="css" title="Button CSS - WebWareBox Website"]/* Modify the overall Appearance of Buttons across the whole Site */
button {
/* Code related to the Button's Border*/
border-radius: 5px;
border: 1px solid black;
/* Change the Button's Font and give it a Gradient-Background */
color: white;
font-family: sans-serif;
font-size: 16px;
background-image: linear-gradient(#3fcc54, #1e6d2a);
}
/* Only do these when the Button is being hovered over. */
button:hover {
/* Change the Gradient-Colour of the Button's Background */
background-image: linear-gradient(#65f079, #36ad48);
/* Give a Drop-Down Shadow when the Button is being hovered over. */
box-shadow: 0px 3px 5px black;
}
[/CODE]
That's the
CSS-Code for the Buttons on the
WebWareBox Website that is still
In-Development.
Hopefully, what I've provided gives you an Idea on how I make
Navigation-Menus and customize Buttons using
CSS.