Over the past few years I have seen dozens of various portfolio website layouts. There are so many different techniques you can use on such a typical user interface. And even with larger design firms or agencies, many of the same UI aesthetics will work great. One of my favorite examples is the sliding navigation found on Riot Industries.
In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.
Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.
More: Navigation sliding from right, or top.
Building our First Document
We can start with the left-hand navigation menu and build out the other demos using similar code snippets. I am including the jQuery and jQuery UI libraries hosted by Google, along with a custom Google Webfont class. We will keep all the sliding codes tucked away inside a separate JS file named nav-left.js.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Vertical Page Navigation Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://www.hongkiat.com/blog/favicon.ico"> <link rel="icon" href="http://www.hongkiat.com/blog/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="global.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=ABeeZee"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/nav-left.js"></script> </head>
This method works so well because we can quickly swap out the JavaScript file to implement a different sliding effect elsewhere on the page. But of course, this also requires some very specific CSS properties. The hidden background content should always be positioned behind the main content window so it is originally out of view.
<div id="about"> <h2>Lorem Ipsum Dolor</h2> .... </div> <div id="mainpage"> <nav> <h1>Webpage Title</h1> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#about">Click Me</a></li> <li><a href="#" class="hovertrigger">Hover Me</a></li> </ul> </nav> <div id="content"> <!-- place your main page content here --> </div> </div>
The inner body container uses 2 divs for separating this content. The first div #about holds our hidden content, and should be labeled appropriately. In this demo we are displaying information about the company but you could make this into anything.
Now the #mainpage div holds everything else that is visible right when the page loads. For our simple demo this just includes a floated navigation menu along with a content div. This effect can work so well because there is often enough room to reorganize content placement in a helpful manner. Additionally some visitors may not care about all your content, so it’s a good choice to offer everything on the same page.
Designing the Page Layout
With all the basic HTML in place we can jump over into our CSS stylesheet. Aside from the typical resets there are also some rules for positioning each of the two divs on top of one-another. More specifically we need the main content div to always be above the hidden div, and we need to limit the content so it fits within the window.
#about {
display: block;
width: 350px;
padding: 8px 11px;
padding-top: 35px;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#mainpage {
width: 100%;
height: auto;
display: block;
background: #473d47 url('http://media02.hongkiat.com/jquery-sliding-navigation/bg.png');
min-height: 800px;
overflow: hidden;
position: relative;
z-index: 2;
color: #fff;
}
Absolute positioning is the quickest way to have the hidden div snap right up onto the page and move everything over it. We are limiting to 350px width because that is just about how many pixels we are sliding the menu open to display this new content. We also need to use overflow: hidden; on the main container because excess content like box shadows will appear outside of where they should be.
#mainpage nav {
position: absolute;
width: 180px;
min-height: 100%;
padding: 0px 8px;
padding-top: 220px;
background: #343638;
}
#mainpage nav h1 {
font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif;
font-size: 2.85em;
line-height: 1.3em;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 11px;
}
#navigation { list-style: none; }
#navigation li { display: block; margin-bottom: 2px; font-size: 1.4em; font-weight: bold; }
#navigation li a { display: block; padding: 8px 6px; width: 100%; color: #d1e0f8; text-decoration: none; }
#navigation li a:hover, #navigation li a.open { color: #fff; background: #484e57; }
Now for the navigation menu I am using a root <nav> container with an internal UL element attached to the ID #navigation. The outer nav container is used to set the background, padding, and size of the whole menu. In this case we want it 180px wide and scaling the full height of our webpage.
The inner anchor links are set up block-style to break down onto a new line. Also this gives extra padding so it is easier to click on the links without being so precise. Much of the other navigation styles are setup later in the document. But these follow a similar ruleset using absolute positioning to pin the navigation menu wherever we want it.
Looking into jQuery Animation
For developers who are unfamiliar with JavaScript this code may appear daunting at first. There are a lot of logic checks and animation functions we’re calling, but the methods are well-explained in the jQuery documentation. But to make things easier we can break this down into separate blocks for each individual action.
$("#navigation li a").on("click", function(e){
e.preventDefault();
var hrefval = $(this).attr("href");
if(hrefval == "#about") {
var distance = $('#mainpage').css('left');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
openSidepage();
} else {
closeSidepage();
}
}
}); // end click event handler
The first chunk of code is placing a click event handler onto all of our navigation links. Whenever the user clicks on a link we call this internal function to stop the href value from loading and instead check which link has been clicked. If we can see the href points to #about then we know the user has clicked the link for our hidden page.
Then we are checking against the current CSS “left†position of the navigation. If this value is set to auto or 0px then it means the nav is closed and we want to open it. Otherwise the left value is larger than 0px and it is already open, so we need to close the menu. The two functions openSidepage() and closeSidepage() are defined a bit lower in the document.
function openSidepage() {
$('#mainpage').animate({
left: '350px'
}, 400, 'easeOutBack');
}
function closeSidepage(){
$("#navigation li a").removeClass("open");
$('#mainpage').animate({
left: '0px'
}, 400, 'easeOutQuint');
} Having these functions written and coded will save us lots of space when writing other methods in the future. Now we don’t have to copy/paste the same codes repeatedly just to generate the same effect. Notice how the two animations are using different easing functions as well. jQuery UI can offer an invaluable service to improve custom animations on your page.
Display Menu on Hover
The other two jQuery blocks are checking for when the user hovers over our “hover†link, and when the user clicks the “close†button. These perform very different tasks but also utilize the same functions written above. Let’s start with the hover effect:
$("#navigation li a").on("hover", function(){
var classval = $(this).hasClass("hovertrigger");
if(classval == true) {
var distance = $('#mainpage').css('left');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
openSidepage();
}
}
}); // end hover event handler We are again checking against every single anchor link in the navigation, except this time our event handler is tied to a hover event. Then we see if the hovered link is using the class .hovertrigger. If so then we want to immediately display the menu from this hover effect, but we don’t want to close it. This is the purpose of the close button, in case users don’t think to click on the other About link which also closes the navigation.
$("#closebtn").on("click", function(e){
e.preventDefault();
closeSidepage();
}); // end close button event handler A lot of these codes are fairly repetitive and perform the same actions many times over. But this is crucial for our layout since the user will have many different ways of accessing the same content. Now inside the nav-right.js we are using the same codes except on the opposite side. So instead of checking the CSS left value, we are checking against the right and seeing if the menu is opened or closed.
Now my other two demos feature the navigation bar on the right-hand side, or at the top of the screen
Using a fixed bottom nav means that it will scroll with you as you go down the page. It is a nice little effect if there is enough padding at the bottom of the screen to keep from cutting off additional page content. Be sure to download a copy of my source code and see what else you can build.
More: Navigation sliding from right, or top.
Final Thoughts
Developers who are unfamiliar with jQuery may feel a bit overwhelmed by the size of these various functions. But in truth the scripts are written very simple and shouldn’t require much time to understand. And even without the sliding effects you can still make an awesome layout focused on this vertical-navigation design style.
I do hope this tutorial may offer a solution to some designers or web developers out there. The codes have been tested in all modern standards-compliant browsers and should work perfectly. You are free to download a copy of my codes and edit/customize to your own liking. But we also want to hear your thoughts on this tutorial in the post discussion area.
No comments:
Post a Comment