Archive for the ‘Free Stuff’ Category

August 14

How to Create a Sleek Navigation with a Sliding Backgound Using jQuery

Sliding Nav Background PreviewAccessibility should be your number one priority when creating a website regardless of it’s size, audience, or client. However, it should never be a constraint on your creativity. There are many ways to get web-creative without compromising any of you users’ experience. In this tutorial, we will target the navigation, which tends to get a lot of attention given it’s prominent position, and create a sliding background effect. Here is a demo of what we will be aiming for, hover over the navigation to see the effect in action.

Step 1

Let’s begin by creating the necessary and most basic HTML to get the page up and running. Regardless of what else you have in the page, this script will require one ul with the id navigation and jQuery, either download a copy or link to the latest version (as I’m doing below). So, right now you should have something that looks more or less like this:

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. 

  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. 

  3. <html>
    4. 

  4.     <head>
    5. 

  5.         <title>Sliding Nav Background</title>
    6. 

  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    7. 

  7.         <script src="http://code.jquery.com/jquery-latest.js">
    8. 

  8.     </script></head>
    9. 

  9.     <body>
    10. 

  10.         <div id="banner">
    11. 

  11.             <h1><span>Sliding Nav</span> Background</h1>
    12. 

  12.             <small>by<a href="http://bedrichrios.com">Bedrich Rios</a></small>
    13. 

  13.         </div>
    14. 

  14.         <!-- step 1 starts here -->
    15. 

  15.         <div id="content">
    16. 

  16.             <ul id="navigation">
    17. 

  17.                 <li><a href="#">Home</a></li>
    18. 

  18.                 <li><a href="#">About</a></li>
    19. 

  19.                 <li><a href="#">Contact</a></li>
    20. 

  20.                 <li><a href="#">News</a></li>
    21. 

  21.             </ul>
    22. 

  22.         </div>
    23. 

  23.         <!-- ends here -->
    24. 

  24.     </body>
    25. 

  25. </html>

Step 2

Now that we have the HTML nice and ready, let’s add some style. The following only demonstrates the CSS that pertains to the navigation, take a look at the source code for the rest of the rules.

  1. #navigation
    2. 

  2. {
    3. 

  3.     list-style: none;
    4. 

  4.     font-size: .8em;
    5. 

  5.     width: 150px;
    6. 

  6.     margin: 0;
    7. 

  7.     padding: 10px 0;
    8. 

  8.     border-left: 1px solid #2e2e2e;
    9. 

  9.     background: url('shadow.jpg') top left repeat-y;
    10. 

  10. }
    11. 

  11.     
    12. 

  12. #navigation li { margin-bottom: 30px; }
    13. 

  13.     
    14. 

  14. #navigation li a
    15. 

  15. {
    16. 

  16.     color: #FF77CC;
    17. 

  17.     text-decoration: none;
    18. 

  18.     padding: 5px 10px;
    19. 

  19.     display: block;
    20. 

  20.     width: 140px;
    21. 

  21. }
    22. 

  22.     
    23. 

  23. #navigation li:last-child { margin-bottom: 0; }
    24. 

  24.     
    25. 

  25. #navigation li a:hover
    26. 

  26. {
    27. 

  27.     color: #fff;
    28. 

  28.     text-decoration: underline;
    29. 

  29. }
    30. 

  30.     
    31. 

  31. #slider 
    32. 

  32. {
    33. 

  33.     background: #444;
    34. 

  34.     display: none;
    35. 

  35.     position: absolute;
    36. 

  36.     z-index: -1;
    37. 

  37.     -moz-border-radius: 0 10px 10px 0;
    38. 

  38.     -webkit-border-radius: 0 10px 10px 0;
    39. 

  39. }

Note: If you are an observant person, you might have notice that there is no element by the id slider in the HTML shown above; but worry not, you will find where that is coming from on the next step of this tutorial.

Step 3

This step requires the use of non-semantic span but worry not web standards believers (I am one myself), we will add this span with the help of jQuery. So, first we will need to target the ul containing our navigation, give it the same width and height of our link elements (remember to add total padding), and hide it. This is what you should have so far:

  1. $(document).ready(function()
    2. 

  2. {
    3. 

  3.     $("#navigation").after("<span id='slider'></span>");
    4. 

  4.     var slider = $("#slider");
    5. 

  5.     
    6. 

  6.     slider.width($("#navigation li a").width() + 20);
    7. 

  7.     slider.height($("#navigation li a").height() + 10);
    8. 

  8.     slider.hide();
    9. 

  9. }

Step 4

Now that we have our slider appended, we can create the script that will provide some eye candy for our JavaScript enabled users. The main idea is to have the newly created slider follow a user’s mouse whenever they move about the navigation. So, we will use the mousemove event to follow the user’s mouse and get it’s current coordinates by utilizing pageX and pageY on the element which was passed to the mousemove event function (”position” in this case). Here is what this should look like:

  1. $("#navigation").mousemove(function(position)
    2. 

  2. {
    3. 

  3.     slider.show();
    4. 

  4.     slider.css("left",$("#navigation").offset().left);
    5. 

  5.     slider.css("top",position.pageY - 10);
    6. 

  6. });

Note: I have subtracted 10 from the “top” to compansate for the links’ total vertical paading and to situate the backgeound right on the middle.

Step 5

Although you could now combine the jQuery done on step 4 and 5 and have a working navigation with a sliding background, there is one more thing to account for, the navigation’s total vertical padding which we applied on the CSS. For this we are going to need an if statement that will prevente the sliding background from leaving our padded navigation. For this step we only need to consider the top padding and the height of the navigation. So, here is what the script looks like we all the parts included:

  1. $(document).ready(function()
    2. 

  2. {
    3. 

  3.     $("#navigation").after("<span id='slider'></span>");
    4. 

  4.     var slider = $("#slider");
    5. 

  5.     
    6. 

  6.     slider.width($("#navigation li a").width() + 20);
    7. 

  7.     slider.height($("#navigation li a").height() + 10);
    8. 

  8.     slider.hide();
    9. 

  9.     
    10. 

  10.     $("#navigation").mousemove(function(position)
    11. 

  11.     {
    12. 

  12.         if(position.pageY > $("#navigation").offset().top + 10 && position.pageY < ($("#navigation").offset().top + $("#navigation").height()))
    13. 

  13.         {
    14. 

  14.             slider.show();
    15. 

  15.             slider.css("left",$("#navigation").offset().left);
    16. 

  16.             slider.css("top",position.pageY - 10);
    17. 

  17.         }
    18. 

  18.     }); 
    19. 

  19. });

Read Me

Feel free to use or alter this technique in any of your projects be it personal or commercial. I don’t ask for anything unless you of course you decide to copy the code in this tutorial entirely and call it your own. However, a link back (www.bedrichrios.com) has never hurt anyone or anything. Enjoy!

Download Source

Posted in CSS, Effects, Free Stuff, Tutorial, jQuery | No Comments »

June 08

Icons, Fonts, and Patterns. 15 Great Free Resources For Web Designers

Icon Image by Dry IconsEvery creative professional needs a great set of tools and a web designer is no exception. And as if we didn’t have enough difficulty coming up with a design every other week (a bit of an exaggeration but you get the point), more often than not, we find ourselves hunting down needed design elements through Google.  Therefore, I have decided to share 15 of my favorite “freebies” sites with you. These are sites that contain free non-commercial as well as for-commercial use icons, fonts, and Photoshop patterns. Please make sure to read the copyright text before using these free materials.

Free Icons

  1. Dry Icons
    “All icon sets at DryIcons.com are carefully designed and developed by our team of professional web and graphic designers. We designed the DryIcons website to bring your applications the best professional appearance.”
  2. TurboMilk
    “These icons packs is free to use for personal non-commercial purposes. Please give credits to http://www.turbomilk.com in case of public use. We sincerely hope that these icons will make you happy and nobody get hurt.”
  3. Free Icons
    “Here you will find the best free icons from the icon artists,The icons copyright belongs original authors, They are free for personal and non commercial use / free for public non-commercial use only mention the authors. If you are an icon designer and want to showcase your Icons, logos , prints , web ui or web design resources, Here is the best place!”
  4. IconBuffet
    “So here’s the deal… a few years back we launched the original IconBuffet. At the time we sold stock icons to web designers and other geeky folks all over the world. After a while we figured it would be totally sweet to give away free icons every month to IconBuffet members. Only there’s a little twist… not everyone gets the same icons. So you have to swap icons with your friends to get them all. Kinda like baseball cards. Only you can use them on your website.”
  5. Fast Icon
    This is a site filled with free high quality icons. In addition, a lot of their sets contain theme based icon packs.

Free Fonts

  1. Fawnt
    “Fawnt is a font resource for designers, developers, and anyone that appreciates the web’s highest quality fonts.”
  2. dafont
    A great place to find the perfect font for that next project. This site is most valuable when you are looking for similar font families and not necessarily a specific one.
  3. UrbanFonts
    “See our amazing collection of free fonts and free dingbats. With over 8,000 freeware fonts, you’ve come to the best place to download fonts. Please review our FAQs section for font installation instructions.”
  4. FontStruct
    “FontStruct is a free font-building tool brought to you by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor.
  5. FontCubes
    “Welcome to Font Cubes. Here you’ll find the best free PC fonts and free Mac Fonts from the best font artists in the world. The fonts listed in our free font collection are their author’s property. Please contact their authors for further consultation regarding the use of the listed fonts.”

Free Patterns

  1. Adobe - Photoshop Patterns
    The title says it all. This site contains free patterns shared by the Adobe community.
  2. DinPattern
    “All patterns available here are free to use. I design these patterns just out of fun, and make no money from them. But, if you feel you have gotten some good use out of them, and like to leave a tip, feel free to donate some pocket change to keep this site going…”
  3. Squidfingers
    “Feel free to use any of these patterns on your own site. If you do decide use one, a credit link back to my site is always greatly appreciated.”
  4. Kaliber10000
    “As the name implies, this section of K10k is a resource for deliciously pixellated patterns. Please be nice & give credit to the creators if you use them in your projects, and remember to adhere to the usage-guidelines for each individual pattern.”
  5. Brusheezy
    “Welcome to Brusheezy.com! A place for artists to download and vote for the best custom Photoshop Brushes and photoshop patterns on the internet!”

One Last Thing

The websites above are by no means affiliated, endorsed, or promoted by me, this blog, or anything else on this site. Furthermore, the content within the quote marks are excerpt from their respective sites. Please feel free, encouraged, to leave a comment with your own favorite resources.

Posted in Free Stuff, Web Resources | 3 Comments »