Menu with preloaded content

Simple vertical menu using psuedo-class hover and block float left and pre-loaded but hidden content.

by Brian von Konsky

HTML

<header>
  <h1>Welcome to the BWT Pet Store</h1>
  <div id="menu">
    <div onclick="loadContent('fish')"> Fish </div>
    <div onclick="loadContent('dog')"> Dog </div>
    <div onclick="loadContent('cat')"> Cat </div>
  </div>
</header>
<div id="content">

  <div id="fish">
    <h2> Goldfish </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Goldfish3.jpg/560px-Goldfish3.jpg" , alt="picture of a goldfish" />
    <a href="https://commons.wikimedia.org/wiki/File:Goldfish3.jpg">Image License</a>
    <p> You will find information about goldfish on this page.</p>
  </div>

  <div id="dog">
    <h2> Dog </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/483px-Poligraf_Poligrafovich.JPG" />
    <a href="https://commons.wikimedia.org/wiki/File:Poligraf_Poligrafovich.JPG"> Image License</a>
    <p> Dogs are on this page.</p>
  </div>

  <div id="cat">
    <h2> Cat </h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/320px-Kittyply_edit1.jpg">
    <a href="https://commons.wikimedia.org/wiki/File:Kittyply_edit1.jpg"> Image License</a>
    <p> This is all about cats.
    </p>
  </div>
</div>

CSS

#fish {
  display: block;
}

#dog {
  display: none;
}

#cat {
  display: none;
}

#content img {
  width: 256px;
  display: block;
}

body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

header {
  width: 100%;
}

#menu {
  background-color: lightgray;
  margin: auto;
  padding: 0px;
  width: 124px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 55px;
}

#content {
  position: absolute;
  left: 124px;
  top: 55px;
}

#menu div {
  float: left;
  /* float left makes an implicit display:block;  */
  text-decoration: none;
  background-color: green;
  color: yellow;
  width: 100px;
  /* all items have a constant width          */
  height: 16px;
  /* contributes 16px to vertical dimension   */
  border: 2px solid green;
  /* contributes  4px to vertical dimension   */
  padding: 10px;
  /* contributes 20px to vertical dimension   */
  margin: 0px;
  /* contributes  0px to vertical dimension   */
  text-align: center;
}

#menu div:hover {
  background-color: yellow;
  color: green;
  border-color: red;
}

JavaScript

function loadContent(idName) {
  document.getElementById("dog").style.display = "none";
  document.getElementById("cat").style.display = "none";
  document.getElementById("fish").style.display = "none";
  document.getElementById(idName).style.display = "block";
}