When web page space is at a premium as with smaller mobile devices viewing the internet, you might want to hide certain areas of your web page. This is especially applicable for your navigation area as it allows the visitors to choose when to see this. Using the show/hide navigation techniques will allow you to make this happen.
For this tutorial, you will learn how to hide your navigation area and provide your viewers with the capability to view it when they want. The information will combine CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.
What Are the Options?
Start With a Typical Code Page
Note that for this sample code page, there is the additional consideration for accessibility using the “Skip to navigation” link and a “Skip to top” link. These links are beneficial for those using non-visual browsers (such as screen readers) or those who are unable to use a pointing device. These links will not only assist with accessibility but will also be useful in being able to show and hide a specific area
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<body id="body"><p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p><article> <!-- main content here --></article><nav id="main_nav"> <ul> <li><a href="">First Link</a></li> <li><a href="">Second Link</a></li> <li><a href="">Third Link</a></li> </ul> <p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p></nav></body></html>Add CSS for the Visible Content Area
For the code sample above, it is time to add in some CSS that controls the visible content area. This will be set to “hide” the navigation area. Remember that the CSS talks directly to <nav id=”main_nav”>.
This means that your hide button html is: <p><a href=”#main_nav” id=”access_nav” class=”access_aid”>Skip to navigation</a></p>.
<!DOCTYPE html>
<html>
<head>
<style>
#main_nav {
display: none;
}
</style>
<body id="body"><p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p><article> <!-- main content here --></article><nav id="main_nav"> <ul> <li><a href="">First Link</a></li> <li><a href="">Second Link</a></li> <li><a href="">Third Link</a></li> </ul> <p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p></nav></body></html>Add CSS to Jump Between Show and Hide
Now to style the target element, it will be time to add in a bit more CSS. In the following code sample, you will see that the target element talks with the ID “main_nav” which is the page’s main navigation area. When your viewer selects the “Skip to navigation” link, the page will jump to “main_nav” as seen in the example.
<!DOCTYPE html>
<html>
<head>
<style>
#main_nav {
display: none;
}
#main_nav:target {
display: block;
}
</style>
<body id="body"><p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p><article> <!-- main content here --></article><nav id="main_nav"> <ul> <li><a href="">First Link</a></li> <li><a href="">Second Link</a></li> <li><a href="">Third Link</a></li> </ul> <p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p></nav></body></html>This code displays in a browser as follows:
If your visitor clicks the Skip to top link, they will see the following:
All of the navigation disappears.
Styling the Navigation
To assure that the navigation stays at the top of the page, you can add in a bit more CSS.
#main_nav {
display: none;
position: absolute;
top: 0;
left: 0;
background: #fff;
}
If you prefer having buttons instead of links, you can create these using CSS.
Adding the following will control the links to become more like buttons which is our end goal.
.access_aid {
/* In addition to the existing declarations... */ background: white 10px 10px / 20px 20px no-repeat;
}
#access_nav {
background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}
#access_top {
background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}
Breaking Down the Code
The following table will help break down the code and explain how this code is applied.
| .access_aid { /* In addition to the existing declarations… */ background: white 30px 10px / 20px 20px no-repeat;} | Sets the background position for the button to be a single instance, 10 pixels in from the left, 10 pixels down from the top, and to be 20 pixels by 20 pixels for width and height. |
| #access_nav { background-image: -webkit-repeating-linear-gradient(#1FC2AC, #1FC2AC 2px, #fff 2px, #fff 4px); background-image: repeating-linear-gradient(#1FC2AC, #1FC2AC 2px, #fff 2px, #fff 4px);} | Adds a repeating horizontal turquoise and white linear gradient for the “show” button. The button looks as follows:  |
| #access_top { background-image: linear-gradient(45deg, transparent 13px, #1FC2AC 13px, #1FC2AC 15px, transparent 0), linear-gradient(-45deg, white 13px, #1FC2AC 13px, #1FC2AC 15px, white 0);} | Adds two diagonal turquoise gradients for “hide”, one for each line that makes up the cross. The button looks as follows:  |
Where to Next?
The “Creating Show / Hide Navigation” tutorial should provide a starting point for further inquiry into the world of HTML properties for customizing your web layout while always keeping in mind the practical applications with HTML and CSS.
Check out “An Introduction to Margins and Padding in CSS and HTML,” and Designing CSS Borders to enhance your understanding and expand your horizon.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
