I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.
So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:
Page Setup
First I know the effect will be created using jQuery so I’ll be downloading a local copy for this project. It’s all pretty simple except for the hovering triggers based on event delegation. But we can get into that later in the article.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Hidden Author Bio Display Demo - DesignM.ag</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://ift.tt/13cRQb3">
<link rel="icon" href="http://ift.tt/13cRQb3">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
I’ve also created a new stylesheet named styles.css. This has all my typical page resets along with a number of extra styles to position the bio and top navbar. To keep things simpler I didn’t use a whole lot of extra text or links within this toolbar. But for your own website it’s entirely possible to move things around as necessary.
<header id="topbar">
<div id="logo"><h1>MySite Logo</h1></div>
<div id="avatar-icon">
<img src="img/avatar.jpg" alt="Author avatar photo" class="authoravi">
<div id="author-bio-box">
<img src="img/avatar.jpg" alt="author big photo" class="bigavi">
<h2>Jake Rocheleau</h2>
<p>Jake is a writer and designer found all over the Internet. He specializes in UI design, frontend development, branding, and content strategy.</p>
</div>
</div>
</header>
This is really the most important HTML on the webpage. Directly after the opening body tag I’ve setup a new header element as the base container. The logo and the avatar have their own separate divs positioned within this container. Whenever a user hovers on top of the #avatar-icon image, we display the internal #author-bio-box.
CSS Design
You should take a look over my basic styles and CSS resets if you’re unfamiliar with page structure. At the top I’m referencing an external web font named Montserrat Alternates. Beneath the top navigation bar I’ve setup a wrapper div which contains filler Lorem Ipsum text. You can see how the bio display works even when scrolling down through a webpage.
#avatar-icon {
position: relative;
width: 100px;
margin: 0 auto;
text-align: center;
padding-top: 6px;
cursor: pointer;
}
#avatar-icon .authoravi {
width: 55px;
height: 55px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* header top bar */
#topbar {
display: block;
position: fixed;
top: 0;
width: 100%;
min-width: 750px;
height: 70px;
padding: 0 45px;
z-index: 9999;
background-color: #6e7cc9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6e7cc9), to(#6a74af));
background-image: -webkit-linear-gradient(top, #6e7cc9, #6a74af);
background-image: -moz-linear-gradient(top, #6e7cc9, #6a74af);
background-image: -ms-linear-gradient(top, #6e7cc9, #6a74af);
background-image: -o-linear-gradient(top, #6e7cc9, #6a74af);
background-image: linear-gradient(top, #6e7cc9, #6a74af);
border-bottom: 1px solid #53597c;
}
To keep this avatar centered in position I’m using margin: 0 auto on the fixed-width container. We also need a relative positioning so the interior author box can use absolute positioning. #avatar-icon becomes the new container for this absolute position, as opposed to the entire body element.
Using a fixed position on the #topbar header is key for the navigation to follow along with the user. I’m using large padding on the HTML body so everything on the page gets pushed down beneath this fixed bar. Using the CSS property top: 0 will force this bar to stay fixed at the top of the page, while the other content appears below.
/** bio box **/
#author-bio-box {
display: none;
position: absolute;
cursor: default;
width: 300px;
top: 0;
left: -100px;
padding: 5px 15px 8px 15px;
background: rgba(20,20,20,0.9);
z-index: 99999;
-webkit-border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
}
#author-bio-box .bigavi {
width: 95px;
height: 95px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#author-bio-box h2 {
display: block;
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
text-align: center;
color: #fff;
cursor: text;
font-variant: small-caps;
letter-spacing: -0.03em;
}
#author-bio-box p {
display: block;
font-size: 1.5em;
line-height: 1.35em;
color: #fff;
cursor: text;
}
Finally we get to the hidden author box and other internal elements. The #topbar div uses a z-index of 9,999 so that it appears on top of all other page content. Since we need this author bio to appear on top of the bar I’m using 99,999 z-index to setup the correct layout.
Width is fixed at 300px but since this bio is offset in the center, it won’t appear correct. We can’t use absolute positioning because the content itself will appear outside the boundary box. It’s smarter to use a negative left margin to reposition the author bio exactly where it should appear. Note this value should also be changed as you update the bio box width, so keep this in mind when adjusting for your own project(s).
jQuery Display Effects
Possibly the most confusing piece of my jQuery code is event delegation with the .on() method. By using the body element as my selector it works like an updated event handler to also bind events onto hidden or dynamically-appended elements. Check out this Stack Overflow post to get a better understanding.
$(function(){
$('body').on('mouseenter', '#avatar-icon', function(e){
$('#author-bio-box').css('display','block');
});
$('body').on('mouseleave', '#author-bio-box', function(e){
$(this).css('display','none');
});
});
Also worth noting are the mousenter and mouseleave event triggers. mouse over/out will trigger if the user re-hovers something other than the target element. So if we open the author bio and the user hovers the new avatar image or the bio paragraph, it would see we are hovering something new and close the whole box. Mouseleave will only trigger when leaving the entire container – much safer and provides exactly the effect we need.
So once the user hovers onto #avatar-icon we immediately display the author bio box. And once the mouse leaves those boundaries this box gets re-hidden from view. Truly a simple yet powerful script if you know how to use it.
Final Thoughts
I can admit that this solution probably wouldn’t work best on all websites. But if you’re designing a small author-based blog why not try it out? It is a really interesting concept which is perfect for any fixed-width title bar. Feel free to download a copy of my source code and let us know what you think in the post discussion area.
Source: http://ift.tt/1khdtPw
No comments:
Post a Comment