Hi there! Again!
So why did I use a side navigation that slides in?
In a desktop, your navigation is better if a user can see it right away. Then, you have to make it responsive for tablet and mobile devices.
And I’m just a beginner and I need to make a website right now so I can progress, a side navigation is easier. Actually, it looks great. To cover for accessibility issues, I used the word ‘Menu’ because it’s direct and I added some hover effects to make it look that it is clickable.
Okay, let’s start!
1. Markup your word, ‘Menu’, and your navigation.
I used a span tag in my menu because I can’t find a particular element that indicates its meaning. And I just added an ID of ‘menu’.
Then, I created my navigation with ID of ‘navigation’. Inside my nav element, I enclosed a p tag in a span element with id of ‘closeMenu’. Using my id attribute, I can give my span elements a semantic meaning. Instead of using a close icon, I just used the multiplication operator so it’ll be faster. Next, I added my list of links for my navigation.
<header> <span id="menu">Menu</span> <nav id="navigation"> <span id="closeMenu"><p>×</p></span> <ul> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section> <h1>Hi there!</h1> <p>I'm Eirin Gonzales, the proactive web developer.</p> </section>
2. Style the word, ‘Menu’.
I used my id attribute to select my span element. And I put it in the right side of my page. And to be able to do it, I have to make my span a block element. Because span elements are really inline elements, I have to change it to occupy the whole width.
#menu {
display: block;
text-align: right;
font-size: 1.5rem; /* 24px */
cursor: pointer;
text-transform: uppercase;
font-family: 'Pathway Gothic One', sans-serif;
}
3. Style your navigation.
This is it! This is the cream of the crop, the apple of the eye. Joke! Let’s begin.
The navigation’s height is set to 100% so that it’ll be as tall as the web page. And it’ll look great. Its width is set to 0 initially because the navigation will only appear if the user clicks on the menu.
I make its position fixed so even if the user scrolls down, the navigation will not move and stay as tall as the web page. Make its top and right position to 0 so the navigation will appear at the rightmost side or on the right edge of the view port.
I also added a 0.5s to have a smooth transition when the navigation is showing.
nav {
height: 100%;
width: 0;
background-color: #000;
position: fixed;
z-index: 1;
top: 0;
right: 0;
transition: 0.5s;
}
I’ll add some code to make our navigation beautiful. You can copy them and experiment with it.
nav ul a {
display: block;
text-decoration: none;
font-size: 1.375rem; /* 22px */
font-family: 'Pathway Gothic One', sans-serif;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
#closeMenu p {
font-size: 50px;
padding: 10px 20px;
cursor: pointer;
text-align: right;
color: #fff;
margin: 0;
}
4. Add your jQuery CDN.
Make sure to put your jQuery CDN before the closing body element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
5. Let’s make our nav appear.
In your script, select the span element with id of ‘menu’ and add the click function. This goes same with the span element with id of ‘closeMenu’.
Basically, you’re getting the said span element using jQuery and adding a function when it is clicked. When it is clicked, the navigation’s width will change.
And remember, I added a smooth transition as the navigation’s width changes.
So when the menu is clicked, you’ll see the navigation. And when the closeMenu is clicked, the navigation will be hidden by setting its width back to 0.
$('#menu').click(function(e) {
$('#navigation').width(220);
});
$('#closeMenu').click(function(e) {
$('#navigation').width(0);
});
So, there you go! You’ve just made your navigation slide in on the side.
Still, I recommend customizing and experimenting it to achieve your desired result.
Good luck!
Love,
Eirin
Eirin Gonzales 