Let's use HTML and CSS to create a nice menu on our webpage.
Return to your HTML editor. First, we'll create a menu with plain HTML. We use an unordered list for this.
In the code, we place it after the <div> for the embedded prezi, as shown in the following code:
<ul>
<li>Home</li>
<li>Bees</li>
<li>Pollination</li>
<li>Evolution</li>
<li>Live together?</li>
<li>Importance of bees</li>
<li>Assignment & sources</li>
<li>The End</li>
</ul> When we look at our webpage, we can see that our menu is underneath our prezi. We want to position it on the right side of our prezi. We can solve this with CSS as shown in the following screenshot:
Next, we'll place the list in a <div> tag so that we can position the menu later with CSS. We'll also add an ID for the <div> tag and an ID for the <ul> tag. We'll create hyperlinks of the menu items with <a href=""></a>. For now, these hyperlinks are empty because we will use JavaScript to make the hyperlinks communicate with the prezi. However, we do need these hyperlinks to design our menu with CSS, as shown in the following code:
<div id="menu">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Bees</a></li>
<li><a href="">Pollination</a></li>
<li><a href="">Evolution</a></li>
<li><a href="">Live together?</a></li>
<li><a href="">Importance of bees</a></li>
<li><a href="">Assignment & sources</a></li>
<li><a href="">The End</a></li>
</ul>
</div>Our next step is to write the CSS code to design and position our menu. We have already created IDs that we'll refer to.
We will write our CSS code in the <head></head> part, just above the </head> tag. First we'll write the <style></style> code in the <head></head> section, as shown in the following code:
<head> <title>The world of bees</title> <style type="text/css"> </style> </head>
We can add our CSS code between the <style> and </style> tags. We used the following code:
#prezi-player {
width: 800px;
float: left;
margin-left: 20px;
}
#menu {
width: 250px;
margin-left: 800px;
font-family: Verdana, Geneva, sans-serif;
}
#nav {
list-style-type: none;
}
#nav li a {
display: block;
color: #333;
padding: 3px;
margin-bottom: 3px;
text-decoration: none;
}
#nav li a:hover {
background-color: #333;
color: #fff;
} Of course, we will not give a full CSS course here, but some explanations about CSS might be appropriate.
In CSS, you reference to an id with #. The code for #prezi-player gives the prezi the space for its width of 800 pixels. The code float: left lets you position to two div next to each other so that the menu can be positioned right next to the prezi.
The menu has a width of 250 pixels and a position of 800 pixels from the left side of the screen (margin-left: 800px). We removed the bullets from the list with the code list-style-type: none. The design of the menu is done in the code #nav li a.
When you move your mouse over the hyperlinks of the menu, a dark gray bar becomes visible for that specific menu item and the text will turn white. This is done with the code #nav li a:hover.
You can view the result of adding the CSS code in the following screenshot:
In this task, we created our menu that we will use to communicate with our prezi. First, we created a plain unordered HTML list. With CSS, we designed this menu to something better looking and positioned it at the right side of the prezi.
Now, we have all the elements ready to add the JavaScript code.