CSS Navigation Menus
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Navigation Menus

Quick Copy Boxes













HTML: Font Awesome Icon Links

CSS can be used to customize links and navigation menus. In CSS links we learned to customize link properties. In this lesson we will learn to customize navigation menus, which are a a list of links.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Example Vertical Navigation Menu

If you are not familar with lists, visit HTML Lists and CSS Lists. If you are not familar with <a> elements, visit HTML Navigation and CSS links.

Next, I will go over the code used to make the above example menu. Remember, there are multiple paths that lead to the same end. At this point, you should be experimenting and combining the CSS tools in your tool box. This lesson is intended to refine your existing tools and add a couple new ones.

New Code:

✶ display: block;
This displays an element like a block element, Example block elements are divs and paragraphs. (more display options are defined later on this page)
for more information on block elements, visit HTML divs
✶ width: 40%;
The widest the element will be is 40% of its parent element.

The Code

Below is all the code used to make the example vertical menu. Below each code block, you will find an orange information button. Click the EXAMPLE button.

When you click the button, it will display information about the above code block. This may include descriptions or links to the appropriate lessons.
Now, click it again to make the information disappear. Happy Coding, my trusted Coding Cadet!


CSS Code


/*<ul>, class = "myMenu"*/
ul.myMenu {
  list-style-type: none;
  padding-top:20px;
  padding-bottom: 20px;
}

➼ ul.myMenu - This code is for unordered lists with the class "myMenu"
<ul class = 'myMenu'> (CSS Classes)
➼ list-style-type: none; - no bullets - (CSS Lists)
➼ padding - (CSS Padding)


/* <a> links in elements with "myMenu" class*/
.myMenu a {
  padding: 2px;
  font-size: 16px;
}

➼ .myMenu a - This code applies to all <a> links that are part of a "myMenu" class element
(i.e. <ul class = "myMenu" >)
➼ padding - 2px - (CSS Padding)
➼ font-size - 16px - (CSS Fonts)


/* <a> links specifically in <ul class 'myMenu'>*/
ul.myMenu a {
  display:block;
  width: 40%;
  border-style: solid;
  border-width: 1px;
  border-color: lightgrey;
  background-color: black;
}

➼ ul.myMenu a - This specifies the code is only for <a> links inside
<ul class = 'myMenu'>
➼ display:block; - displays like a block element - (HTML divs)
➼ width - 40%
➼ border - solid, 1px, lightgrey - (CSS Borders)
➼ background-color - black - (CSS colors, CSS Backgrounds) 


/* <li> items, class = "myMenu"*/
li.myMenu{
  text-decoration: none;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
  padding-right: 5px;
  margin: 5px;
}
➼ List Items - (CSS Lists,HTML Lists) 
<ul class = 'myMenu'>
  <li>Blog</li>
</ul>
➼ padding - (CSS Padding)
➼ margin - (CSS Margins)

/* <a> hover*/
.myMenu a:hover {
  background-color: white;
  color: black;
}

➼ hover - (CSS Link Selectors)
➼ colors - (CSS Colors) 


/* "myMenu" unvisited links*/
.myMenu a:link {
    color: white;
}

➼ unvisited link - (CSS Link Selectors)
➼ text-color - (CSS Colors)


/* "myMenu" visited links*/
myMenu a:visited {
  color:pink;
}

➼ visited link - (CSS Link Selectors)
➼ text-color - (CSS Colors)


/* "myMenu" visited links: on hover*/
.myMenu a:visited:hover {
  background-color: white;
  color: black;
}

➼ visited link - (CSS Link Selectors)
➼ colors - (CSS Colors)

HTML Code:


 <ul class = "myMenu">
     <li><a href = "index.php">Home</a></li>
     <li><a href = "blog.php">Blog</a></li>
     <li><a href = "photos.php">Photo Gallery</a></li>
     <li><a href = "https://www.facebook.com/codingcommanders/">Facebook</a></li>
</ul>

➼ class - (CSS Classes)
➼ unordered list - (HTML Lists)


Example Horizontal Navigation Menu



New Code

overflow: hidden;

overflow describes what happens to content that flows outside the element space. If it is set to hidden, the content is cut at the end of the element. You will only see content that fits inside. Here are the options:
✶ visible: The content will stretch outside the element.
✶ hidden: You can only see the content that fits in the element.
✶ scroll: There is a scroll bar allowing you to scroll over to see all the content.
✶ auto: A scroll bar will be added.

display: block;

We touched on this a bit with vertical menus, but let's go over some other possible display options:
✶ inline: Will display as an inline element, such as a span, where the element only takes up the minimum amount of space needed and no line breaks are inserted.
✶ block: displays like a block element, such as a div.
✶ inline-block: The element is formated as an inline element, but it's content is displayed as a block.
✶ flex: It will stretch items to fill any free space or shrink items to pervent overflow.
✶ list-item: It will display the element like a list item.
✶ inline-flex: Displays the element as an inline element with flex properties.

Social Media Icons

Include the font awesome stylesheet link in the page head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

And write your social media links like this:


  <!-- YouTube-->
  <a href = 'https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ' class="fa fa-youtube"></a>
  <!-- Facebook-->
  <a href="https://www.facebook.com/codingcommanders/" class="fa fa-facebook"></a>
  <!-- Instagram-->
  <a href="https://www.instagram.com/codingcommanders" class="fa fa-instagram"></a>
  <!-- Twitter-->
  <a href="https://twitter.com/codingCommander" class="fa fa-twitter"></a>
  <!-- Google+-->
  <a href="https://plus.google.com/102944579677628755090" class="fa fa-google"></a>
  <!-- Github-->
  <a href="https://github.com/codingCommanders/" class="fa fa-github"></a>
Follow the same pattern with any other social media platform you wish to use. Most of them are included in the icon librabry.

The Code

Below is all the code used to create the example horizontal menu. Remember to click the orange info buttons for descriptions and related lesson links.


CSS Code:


ul.horizon {
  overflow: hidden;
  background-color: #006310;
  border-radius: 9px;
  list-style-type: none;
  font-family: helvetica, arial, sans-serif;
}

➼ ul.horizon - This code block is for "horizon" class unordered lists. - (CSS Lists,HTML Lists,CSS Classes)
➼ overflow: hidden; - Any content larger than it's element will be cut off.
➼ background-color - #006310 - (CSS Colors)
➼ border-radius - 9px - (CSS Border-radius)
➼ list-style-type - none - (CSS Lists)
➼ font-family - helvetica, arial, sans-serif; - (CSS Fonts)


.horizon a {
  float: left;
  display: block;
  color: #E7F0D8;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  width: 14%;
}

➼ .horizon a - This code block is for <a> links within a "horizon" class element. - (CSS Links, HTML Links, CSS Classes)
➼ float - left - (CSS Align & Position)
➼ display - block - Displays like a block element (div, paragraph ect) - (HTML divs)
➼ text color - #E7F0D8 - (CSS Colors)
➼ text-align - center - (CSS Align & Position)
➼ padding - 14px 16px - (CSS Padding)
➼ text-decoration - none - (CSS Links)
➼ font-size - 17px - (CSS Fonts)
➼ width - 14% - each link will take up about 14% of the parent element's space.

Why did I choose width = 14%; ?
I wanted each link to occupy the same amount of space and I wanted to utilize most of the menu's available space.
  1. 100%: This is the entire menu width that is avilable for content.
  2. 7: I have 7 navigational links (i.e. <a>Blog</a>)
  3. 100 ÷ 7: If I divide total space (100) by Number of links (7), I will have each link occupying the same amount of space and I will be utilizing all the space avilable to me.
  4. 14.28571428571429: This is what I got when I divided 100 by 7. I rounded down to 14% 

.horizon a:hover {
  background-color: black;
  color: #B5B5B5;
}

➼ .horizon a:hover - hover selector - This code applies to <a> links that are inside a "horizon" class element, when mouse hover is true. (aka when the user hovers over a link located inside a "horizon" element) (CSS Links,HTML Links)
➼ colors - (CSS Colors)

HTML Code:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <!-- Meta Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheet with our CSS code-->
    <link rel="stylesheet" type="text/css" href="customMenus.css">
    <!-- Stylesheet URL to include social media icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Page Title-->
    <title>Coding Commanders: Menus</title>
  </head>

➼ customMenus.css - This is the CSS file with the horizontal menu code. To apply the code to your page, you must include its link in the page head.- (Including Links)
➼ Font Awesome Stylesheet - Including this link allows you to use the Font Awesome social media icons and much more! It is free for personal or commercial use. - (fontawesome.io) 


  <body>
      <!-- Horizontal Menu (class = "horizon")-->
      <ul class = "horizon">
           <li><a href = "index.php">Home</a></li>
           <li><a href = "blog.php">Blog</a></li>
           <li><a href = "photos.php">Photos</a></li>
           <li><a href = 'https://www.facebook.com/codingcommanders/' class ='fa fa-facebook'></a></li>
           <li><a href = 'https://www.instagram.com/codingcommanders' class ='fa fa-instagram'></a></li>
           <li><a href = 'https://github.com/codingCommanders/' class ='fa fa-github'></a></li>
           <li><a href = 'https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ' class='fa fa-youtube'></a></li>
      </ul>
  </body>
</html>

➼ <ul class = "horizon"></ul> - Unordered List, class = "horizon" - (CSS Lists)
➼ <li></li> - List - (CSS Lists)
➼ <a> - Links - (CSS Links)
➼ Social Media Icons - Pay attention to the class names

Color Selector



Hex:


RBG:

Applied Project

Continue working on the Ad Project:
Part I: Explained on the bottom of CSS Color Lesson.
AND
Part II: Explained on the bottom of CSS Links Lesson.

Play with the code in the code editor below. Change values in the CSS code and see what happens! You can always refreash the page to go back to the orginal code.