#quick-menu {

position: fixed;

left: 20px;

top: 60px;

width: 200px;

height: auto;

background: white;

padding: 20px 10px;

z-index: 2;

}

#quick-menu h3 {

margin-top: 0px;

text-align: center;

color: #333;

font-size: 18px;

}

Notes: now that we have our jump menu on our page, that leaves just one more aspect to create for our template, before we can start to add our examples into the page and before moving on to the next pages. And that is, of course, the functionality for the ‘show code’ button. Before we move on to the next section where we will tackle this area of the build, have a little think about how we might do this. Can we show the code with pure CSS and HTML or do we need to add some JavaScript magic? Have a think about how you would also display the code. Would you have it pop up in a prompt for the user to see in isolation? Or would you have a new box appear below the example showing the code? What about once we’ve clicked the button, how do we get rid of the code again? We don’t want to have all of the code on the screen all the time; we will want a way to hide it again otherwise the page could get quite messy very quickly. Have a think about how you think we should handle this functionality, and then move on to the next section where I will show you how I plan to tackle the challenge. Remember, there is no right or wrong answer here, there are a multitude of ways to do this, and no single one is better or worse than the other. They are simply different ways of tackling the same problem. That’s web design for you!

JavaScript

Let’s now tackle the problem of showing and hiding our code snippets on our website. So far we have left you to tackle the challenges set on your own, but this section is particularly tricky, so let’s walk through it together. If you are feeling confident enough, you are more than welcome to attempt to do this by yourself based on our requirements, which are to show the relevant code to the user. Did you decide how you think it should be done? Well, this is how I plan to do it – hopefully it ties up with how you think we should go about this.

The show button, when clicked, will add a new div below the existing code, which will then show the code on a dark background, then if we click the button again, the div should be removed. We don’t want to have to create two divs with the same code in each time we create a new section, so this must be entirely automated and the new div must be generated on the fly.

Let’s look in more detail at how we can do this.

We will:

• attach a click handler to our button, which will trigger a function;
• this function will check whether the code example is already on the page or not;
• if it is not on the page, then it will take the code from inside the.example div and spit it back out into a new div below it;
• if the code sample is on the page, then it will remove the div from the page.

Sounds simple enough? Well, let’s see what you think in a minute, after we code the functionality.

Let’s start by adding our function to our button in our page HTML, like so: