The following tutorials will walk you through creating several effects using
techniques that will combine the HTML, JavaScript and CSS you have studied in
the past lessons to create useful effects and tools.
This is where all of the study and practice culminate to show you
what the possiblities are to produce some dazzling eye-candy that catch the
attention of the visitors to the sites you will be creating.
Now more than ever, the presentation of the material and how users interact
with it, become just as important as the content and the subject matter on the
website. By becoming versed with basic design fundamentals and elements,
combined with the working knowledge of HTML, CSS and JavaScript, one is armed
with tools to create fun and effective interactive designs that capture the
attention and promote interaction.
<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
Step 2) Add CSS:
Example
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the
overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */ background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in
or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with
the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s;/* Transition effects on hover color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important; /* Override the font-size
specified earlier (36px) for all navigation links */
}
/* When the height of the screen is less than 450 pixels, change the font-size
of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important; top: 15px; right: 35px;
}
}
Step 3) Add JavaScript:
The example below slides in the overlay navigation menu from left to right
(0 to 100% width), when it is triggered:
Example
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
The example below slides in the overlay navigation menu downwards from the
top (0 to 100% height).
Note: In this example, note that the CSS is slightly
different from the one above (default height is now 0, width is 100% and
overflow-y is hidden (disable vertical scroll, except for small screens)):
Example
/* Open */
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
HTML & CSS: You will use the same styles as before, only this time,
wrapping a container element around each <div> element and then specifying
a class name for each.
The container element is used to show a pointer symbol when the user moves
the mouse over the divs (bars). When it is clicked on, it will execute a
JavaScript function that adds a new class name to it, which will change the
styles of each horizontal bar: the first and the last bar transform and
rotated to create the letter "x". The bar in the middle fades out and becomes
invisible.
