Horizontal Navigation Menu
Navigation Menus
- I tried many variations of menus on my website. Either I didn't like the way the looked, It was not very mobile friendly or I kept having dificulty making it work with the rest of page. I finally redid a whole new page and used a simple nav menu inside div tags and It worked for me. Do not let yourself get to messed up figuring out some of these menus out there. When they come up with new programming, the browser companies(microsoft, google, firefox, opera, safari) have to make the browser so the browser will render the coding right. That is why a lot of programming does not work in older browsers. The older browsers are not updated by the companies. That is part of it. I have a fancy drop down and a fly out menu that are real nice on the bigger screen. Although they are made to be responsive, I do not like the way they do it. Another new one I have seen is using the html elements <detail> and <summary>. It is when everthing goes inside the detail tags including the 2 summary tags. All you see on the web page is what is in the summary tags and when you click, all the detail show. I would suggest that if your going to try to fit another menu on your page, make a copy of the page your going to work on so you dont mess up what is already there. Make a copy of html and css sheet. You could change so many things around that you can't put it back. After I am done the website, I might make extra pages on how to do other stuff like other menus. I have a lot to do with this site first. We need to do pictures, lists, tables and put two block elements beside each other.
- On my site,I decided that I was going to have way to many links for my menu. They would not fit. On the mobile, the menu would end up 20 inches high. Thats not good. So I just turned my site map page into a Table of Contents. Don't need any fancy javascript for that popup menu. When you want to see the menu, just click the button and there it is. To get out of the page click the page you want to go to or back on your browser. My Table of contents page has everything named. Meaning clicking on the link will take you directly to that page and to the section of the page you want. You don't have to do yours that way. In fact, you don't have to have a table of contents at all. You just have a few links across the navbar. But it is good to have a sitemap of some kind. I put the menu at the top and the bottom for conveniance.
Html Part of Menu
- Paste this over the div already there at top and bottom on the Html sheet. Meaning get rid of the div there and paste this in its place on the html sheet. The top one goes in between the closing header tag and the opening article tag. The bottom on goes in between the closing article tag and the opening footer tag.
<div class="navbar"> <a href="index.html">Home</a> <a href="sports.html">Sports</a> <a href="sitemap.html">Table of Contents</a> <a href="classified.html">Classifieds</a> </div>
- I put 4 links there. You can change it to however many you want there. I will do the table of contents on another page. But I will have to show you naming the links later after we have a page with content on it. If not interested in the Table of Contents, just skip that page.
CSS Part of Menu
-
.navbar {
background-color: #4682b4;
overflow: hidden;
box-sizing:border-box;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1.1rem;
font-weight:bold;
}
.navbar a:link {
background-color: #4682b4;
color: white;
font-weight:bold;
}
.navbar a:visited {
background-color: #4682b4;
color: white;
font-weight:bold;
}
.navbar a:hover {
background-color: #4682b4;
color: lightblue;
font-weight:bold;
}
.navbar a:active {
background-color: #4682b4;
color: red;
font-weight:bold;
} -
On the Css sheet, go to the spot where the .navbar is, get rid of it and copy and paste all of the code above right there. - Also, add clear:left; to the article section. When you float left, you have to clear left in the next box under the box you floated left. It is not a good example
of floating content and I will explain it better later.
article {
clear:left;
background-color:white;
color:black;
box-sizing:border-box;
padding-top:8px;
padding-bottom:20px;
} - Overflow:hidden means that any content that will not fit in the box will be hidden. The parts on fonts we will cover on another page. I have yet to do text formatting and fonts.
- On the next page we are going to finish making our template that we will use for all our pages.
To see what it looks like so far Click Here(opens a new window)