HTML CSS Need help How do I create a navigation?

Malcolm

Administrator
Administrator
Jan 2, 2018
828
204
55
Canada
codeforum.org
Hello Coders!

Working on the Open Sourced project along side @Code_Block. I was hoping someone could tell me what is the best way of coding a navigation system and why. I mostly use the UL method because I find it gives me more the ability to style.

Should I use the Nav tag:
HTML:
<nav>
    <a href=""></a>
    <a href=""></a>
</nav>
Or should I use the unordered list:
HTML:
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
 

Ghost

Active Coder
Moderator
Apr 19, 2019
234
94
28
Well, really you would want something like this...
<nav>
<ul>
<li><a href="#">page1</a></li>
<li><a href="#">page2</a></li>
<li><a href="#">page3</a></li>
</ul>
</nav>


The NAV tag is used to help browsers (mostly screen readers, phones, tablets, etc) figure out what is a navigational link. It is really only used for links that are related to the page you are on, like to auto-scroll down the page to a section. You don't use <nav> for links that may be in header or footer, like Contact or FAQ. You would use the <nav> tags IN the FAQ page to separate parts of it, for example.

So it's not really something that you do instead of a UL. You would put the UL in the nav, or use a class on the nav to style it. The <nav> is just there to help devices interpret what the content actually is. It would be similar to using a <h1> </h1> tag with 0 styling (text isn't bigger / different) to keep the text looking normal, but still letting Google and browsers know that a new section is labeled by the header tag. Nav can be styled or unstyled, but like h1/h2/h3/etc its main purpose is to actually inform devices about the content - even if it is designed to appear a certain way for users too.
 

Ghost

Active Coder
Moderator
Apr 19, 2019
234
94
28
My understanding is that the likes of <nav> is basically semantic code instead of using <div>, as @Ghost alludes to above.
yeah, and people can use any tag they want for anything as long as they put it on their style sheet.

Even <ghost></ghost> can be a tag, but older browsers may not recognize it and Google says custom tags should include a dash to distinguish between custom and actual HTML5 tags .

Nav tells browsers the links navigate the page or category. USe header and footer tags with regular lists for menus and other links.
 

Malcolm

Administrator
Administrator
Jan 2, 2018
828
204
55
Canada
codeforum.org
I'd firstly like to thank everyone for replying, much appreciated.

Please correct me if I am wrong, so from what I am understanding that both <nav> and <ul> (within div) can be used. But one automatically has list style points removed by default which means you don't have to edit CSS to remove them since it's already removed in <nav> tag?
 

Nerdface

Coder
Community Partner
Apr 25, 2019
41
16
8
Sheffield, England
nerdface.co.uk
Please correct me if I am wrong, so from what I am understanding that both <nav> and <ul> (within div) can be used. But one automatically has list style points removed by default which means you don't have to edit CSS to remove them since it's already removed in <nav> tag?
No, <nav> replaces <div> - you should still use <ul> (within nav), so you'll still need CSS edits to remove list style points.
 
  • Like
Reactions: Ghost

OscarDeer

Active Coder
May 24, 2019
252
64
38
github.com
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:
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>
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:
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;
}
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.
 
  • Like
Reactions: Malcolm