Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How do I create a navigation?

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
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>
 
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.
 
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.
 
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?
 
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.
 
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.
 
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?
Well, if it's automatically removed then you don't need to do any Modifying because of course, it's removed.
 
No, <nav> replaces <div> - you should still use <ul> (within nav), so you'll still need CSS edits to remove list style points.
Just to add on to this, and really drive the point home that I'm trying to make in my solution above...
You can make ANY element have ANY styling / CSS. The use of <nav> should always be reserved for on-page navigation.

You can even create custom HTML tags using CSS styling and even JavaScript logic.
HTML:
<style>
 ghost{
 width:100%;
 background-color:black;
 color:white;
 font-size: 2em;
 line-height:1.5em;
 }
</style>

<ghost>
 I successfully created my own HTML tag.
</ghost>

Anyways, take a look below again for another example of <nav> on-page navigation as well as the more normal header navigation links. Both may look identical, both may have (or not have) bullet points next to them, but both are intended for different purposes!
Here's a good example of a 'Services' page:
HTML:
<html>
<body>
<div class='header'>
 <ul> <!-- a regular list of links in the header's "navigation bar" without using the <nav> tag which is reserved for ON-page navigation, not links for OFF-page separate content -->
  <li><a href='/'>Home</a></li>
  <li class='active'><a href='/services-page.php'>Services</a></li> <!-- active page -->
  <li><a href='/contact-page.php'>Contact Us</a></li>
 </ul>
</div>
<div class='content'>
 <nav> <!-- for navigation ON the Services page -->
  <ul> <!-- still use UL, but inside a NAV tag for ON-page navigation, for example using #anchorTags -->
   <li><a href='#about-services'>About Our Services</a></li>
   <li><a href='#service1'>Service 1</a></li>
    <li><a href='#service2'>Service 2</a></li>
  </ul>
 </nav>
</div>
</body>
</html>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom