1
\$\begingroup\$

I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about it correctly.

It seems to work but am I doing this inefficiently? Should i be using other methods? Have I aligned using the best procedures etc?

Ignore the fact I haven't used classes please.

    *{
      margin: 0;
      padding: 0;
    }

    body{
      background-color: #FFF;
      font-size: 1.2em;
    }

    header{
      display: grid;
      grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
      width: 100%;
      background-color: #A6A6A6;
    }

    nav{
      grid-column: 2;

    }

    nav ul{
      display: flex;
      min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
      margin: auto;
      /*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
    }

    nav ul li{
      width: 20%; /*width of each flex item is 20% as there are 5 items*/
      text-align: center; /*move text to center of individual list item*/
      list-style: none;
    }


    nav ul li a{
      display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
      color: #FFF;
      padding: 20px; /*this padding changes size of parent list item too*/
      text-decoration: none;
      border-right: solid #FFF 1px;
    }

    /* border decoration-------------------------------------*/
    nav ul li:hover{
      background-color: #767676;
    }

    nav ul li:first-child{
      border-left: solid #FFF 1px;
    }
    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="styles/style.css" />
      <meta name="viewport" content-type="width=device-width initial-scale=1" />
      <title>NavBar Examples</title>
    </head>

    <body>
  
      <header>
        <nav class="centered-navigation-bar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </nav>
      </header>

    </body>
    </html>

Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

Here are a few thoughts:

  1. The universal selector to reset the margin and padding is slow and unnecessary in the case since none of the elements you're using have default margin or padding.

  2. The use of hover by itself is not mobile friendly, and if the user expects to click Home to go to the homepage, a more robust design would be better. For example:

It is a good idea to double up focus and hover styles, so your users get that visual clue that a control will do something when activated, whether they are using mouse or keyboard For situations when the parent menu item needs to carry out a function, such as linking to a web page, a separate button can be added to the parent item, to open and close the submenu. This button can also act as a visual indicator for the presence of a submenu.

  1. For accessibility, add aria-role=menubar to the ul and aria-role=menuitem to each anchor tag.

References

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.