Exam Revision

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

by Ken Wai Ooi

HTML

<header>
  <h1>Welcome to the BWT Pet Store</h1>
<div id="menu">
  <ul>
	<li><div onclick="loadContent('fish')"> Fish </div></li>
	<li> <div onclick="loadContent('dog')"> Dog </div></li>
	<li><div onclick="loadContent('cat')"> Cat </div></li>
	</ul>
</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>
  </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>
  </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> 
  </div>
</div>

CSS

#fish {
  display: block;
}

#dog {
  display: none;
}
#cat {
  display: none;
}

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

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

header {
  width: 100%;
}

#menu div:hover {
   background-color: #555;
	 color: white;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li div
{
	  display: block;
    color: grey;
    padding: 8px 16px;
    text-decoration: none;
}
li  {
    display: block;
    color: #000;
    padding:0px 0px;
    text-decoration: none;
}
#menu
{

	float: left;
}

/* Change the link color on hover */

JavaScript

// Function to display pre-loaded content
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";
}