Time for action — building a fancy navigation bar

Let's take a look at how we can use custom-designed tooltips to add a little progressively enhanced punch to a basic navigation bar:

  1. Let's start by setting up a basic HTML page with associated folders and files just as we did in Chapter 1, Designer, Meet jQuery. In the body of the document, include a simple navigation bar like this:
    <ul id="navigation"> <li><a href="home.html" title="An introduction to who we are and what we do">Home</a></li>
<li><a href ="about.html" title="Learn more about our company">About</a></li>
<li><a href="contact.html" title="Send us a message. We'd love to hear from you!">Contact</a></li>
<li><a href="work.html" title="View a portfolio of the work we've done for our clients">Our Work</a></li>
</ul>
  2. Next, we'll add some CSS styles to our navigation bar. There's a lot of CSS here because I'm using a gradient as a background and it requires a lot of different CSS for different browsers right now. Add these lines of CSS to your styles.css file. If you prefer a different style, feel free to customize the CSS to suit your own taste:
    #navigation {
background: rgb(132,136,206); /* Old browsers */
background: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(132,136,206,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(132,136,206,1)), color-stop(50%,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8488ce', endColorstr='#8488ce',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* W3C */
list-style-type: none;
margin: 100px 20px 20px 20px;
padding: 0;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#navigation li {
margin: 0;
padding: 0;
display: block;
float: left;
border-right: 1px solid #4449a8;
}
#navigation a {
color: #fff;
border-right: 1px solid #8488ce;
display: block;
padding: 10px;
}
#navigation a:hover {
background: #859900;
border-right-color: #a3bb00;
}
  3. Now we have a navigation bar horizontally across our page, like this:
    Time for action — building a fancy navigation bar
  4. I've included title attributes on my links and when I move my mouse over the navigation links, those are visible. I'd like to replace these boring browser default tooltips with friendly-looking conversation bubbles below my navigation.
  5. Just like we did in the previous example, we're going to copy the qTip CSS and JavaScript to our own styles and scripts folders and attach them to the HTML document:
    <!DOCTYPE html>
<html>
<head>
<title>Chapter 5: Creating Custom Tooltips</title>
<link rel="stylesheet" href="styles/jquery.qtip.min.css"/>
<script src="../scripts/jquery.js"></script>
<script src="scripts/jquery.qtip.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
  6. Next, open your scripts.js file so we can call the qtip() method and pass in our customizations. We'll start off nearly the same way as last time, except that we'll use a different selector, since we only want to select links inside the navigation bar:
    $(document).ready(function(){
$('#navigation a').qtip();
});

    Now the default tooltips are replaced with qTip-styled tooltips.

  7. Next, we're going to create our own style for the navigation tooltips, so we'll write some new CSS to make them look like speech bubbles. Add these styles to your styles.css file:
    .ui-tooltip-conversation .ui-tooltip-titlebar,
.ui-tooltip-conversation .ui-tooltip-content{
border: 3px solid #555;
filter: none; -ms-filter: none;
}
.ui-tooltip-conversation .ui-tooltip-titlebar{
background: #859900;
color: white;
font-weight: normal;
font-family: serif;
border-bottom-width: 0;
}
.ui-tooltip-conversation .ui-tooltip-content{
background-color: #F9F9F9;
color: #859900;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
padding: 10px;
}
.ui-tooltip-conversation .ui-tooltip-icon{
border: 2px solid #555;
background: #859900;
}
.ui-tooltip-conversation .ui-tooltip-icon .ui-icon{
background-color: #859900;
color: #555;
}
  8. Now that we've got a new CSS style for our tooltips ready to go, we just have to add this new class to the tooltips. Go back to scripts.js and add the new class to the JavaScript:
    $('#navigation a').qtip({
style: {
classes: 'ui-tooltip-conversation'
}
});
  9. Next, let's position the speech bubbles so that they appear underneath each of the navigation links. In scripts.js, pass the position information to the qtip() method:
    $('#navigation a').qtip({
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'ui-tooltip-conversation',
width: '150px'
}
});
  10. Now, we need to control the width of the tooltips so they don't appear too wide. We'll set the width to 150px:
    $('#navigation a').qtip({
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'ui-tooltip-conversation',
width: '150px'
}
});
  11. Now the last thing we'll do is change the way the tooltips appear and disappear from the page. By default, the qTip plugin uses a very quick and subtle fade in and fade out. Let's change that, so that the tooltips slide into view and slide back out of view:
    $('#navigation a').qtip({
position: {
my: 'top center',
at: 'bottom center'
},

show: {
effect: function(offset) {
$(this).slideDown(300);
}
},
hide: {
effect: function(offset) {
$(this).slideUp(100);
}
},
style: {
classes: 'ui-tooltip-conversation',

width: '150px'
}
});
  12. Now when you view the page in a browser, you can see the conversation bubbles slide into view underneath each navigation link when you move your mouse over the link, and slide back out of view when you move your mouse off the link.

What just happened?

We reviewed how to create and attach a custom CSS style to qTip's tooltips and how to position the tooltip wherever you'd like it to appear. We also learned how to control the width of the tooltips to ensure we get a uniform size.

Then we saw how to override the default show and hide behaviors and replace them with custom animations. In this case, we used jQuery's slideDown() effect to show the tooltips. We passed a value of 300 to the slideDown() method, which means the animation will take 300 milliseconds to complete, or about a third of a second. I've found that if an animation takes much longer than that, site visitors get impatient waiting for it.

Next, we overrode the default hide behavior with jQuery's slideUp() method. I passed a value of 100, meaning the animation will complete rather quickly in about one-tenth of a second. When this animation runs, the site visitor has already decided to move on, so it's best to get the information out of their way as quickly as possible.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.74.54