CSS:
  • 1.  Floats & clears #1
  • 2. Floats & clears #2
  • 3. Positioning #1
  • 4. Fullscreen background
  • 5. CSS filters
  • 6. Making a menu
  • 7. CSS 3
  • 8. Responsive webdesign
  • CSS: MAKING A MENUQuote: a simple menu is a collection of buttons.

    Making a menu via CSS can sometimes be frustrating and time consuming. If you look at the other content on our page, you’ll realise that the most visual CSS and complexity will be in your menu. So let’s take a look at some easy(er) ways of making typical menu you’ll find on websites these days.

    Lets start with a classic menu that consists out of block containing some text. We’ll use the most commonly used text for menu’s ever. No need to be creative there.

    Rule #1: Always define your menu as a list. More specifically: a bullet list.

    There are some negative but mostly positive reasons why you should do this. However, it’s a general rule and as such, everyone will have a faster and easier time finding and using your menu.

    Here’s a basic menu in code:

    <ul id="menu">
      <li>Home</li>
      <li>About Me</li>
      <li>Contact</li>
    </ul>

    You’ll notice that in order to stack your items in your list you’ll need <li> elements, which stand for list items. *What a surprise*. Don’t forget that every element in the list should be clickable and that means we’re in the need, the need for anchor tags. I’ll just add an a tag in every element with the href set to #. That means that this link will go nowhere for now.

    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    The standard color coding for a link is blue (ugly if you ask me) and there is a line underneath. The fact they are blue and underlined was necessary in the past for people to recognise them as interactive text, but nowadays people are smart enough to figure out where the links are.

    Rule #2: Define your links with a different color that the default blue and no line. The line is no longer needed and lowers readability of text.

    So, here is the CSS to the HTML:

    #menu a{
      color: red;
      text-decoration: none;
    }

    Let’s assume that the menu has to be horizontal and at the top of your page. You’ll see that every button is stacked underneath one another. To fix this we’ll give our buttons the float property, but in doing so, some stuff might go wrong (god-damn floats!). On our list itself we’ll have to specify two important things. First: give your list a height. Second: remove those annoying bullets that we don’t want to use.

    #menu{
      height: 50px;
      list-style-type: none;
    }

    Rule #3: A list (menu) on a webpage needs a lot of information. From functionality to design. So most CSS you’ll apply to your buttons themselves, the a tags.

    Let’s take a look at what I would add to them to make it all look a little bit prettier:

    #menu a{
      color: white;
      text-decoration: none;
      padding: 10px 20px; 
      float: left; 
      background-color: red; 
      border-radius: 8px; 
      margin-right: 10px;
    }
    Home
    About
    Contact

    So, let's take a look at the code one line at a time:

    1. Change the color of the text
    2. Remove the bottom line
    3. Give the button and the text some breathing room
    4. Put the buttons next to each other
    5. Make the background color red
    6. Round off the corners
    7. Make sure there si a space between the buttons

    And now we have a good looking horizontal menu. What we could add as an extra is some sort of rollover when people hover over the button.

    #menu a:hover{
      background-color: blue;
    }

    We'll take a look at some extras like: animation in menu's, vertical buttons, ... in the next tutorial.

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy