Currently Browsing: Home

JQuery Drop Down Menu

Menus are a key way for visitors to go through your site and access the content. Many different types and styles of menus exist. In this tutorial, we are going to create a jQuery drop down menu that can have any number of tiers.

To begin, let’s import some of the key libraries we need.

<!-- Add jQuery From the Google AJAX Libraries -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 

<!-- jQuery Color Plugin -->
<script type="text/javascript" src="jquery.color.js"></script>

This provides us with jQuery as well the color plugin so we can add extra effects. At this point, all we have is some basic HTML.

Read the rest of this entry »

Free WordPress Theme: Easy View

Lateral Code would like to wish you a Happy Valentine’s Day! As a gift to you, we are releasing a free wordpress theme. It’s called Easy View. Here is a quick screenshot:

Read the rest of this entry »

Placing Links In Images

Many of us love to use vivid, clean images to enhance a website design. Unfortunately, it may be necessary to embed links into such an image, which can be a hassle.

In this article, we will present a quick and easy way to add links to your images using a small amount of HTML markup and CSS.

To begin, we must initialize our HTML. For this example, we will use the logo presented by Patrick Lin in his previous article:

It contains the following HTML:

<div id="logo">
	<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>

Read the rest of this entry »

Creating Clever Logo Banners

Good designs are always clever. They need something to help them stand out from the rest. Here’s how to create a clever logo banner that looks good and is SEO Friendly, like the one Lateral Code uses, using an image and some clever CSS.

The first step is to create the banner. For demonstration purposes, the following banner will be used:
Sample Logo

This is the markup involved:


<div id="logo">
	<h1><a href="/" title="Home Page"><span>Sample Logo</span></a></h1>
</div>

Read the rest of this entry »

5 Simple CSS Tricks

CSS can be the key to make or break a site design. To enable you to create and edit your own template, we have decided to present 5 Simple CSS tricks. Please feel free to directly use the code shown here in your own site.

  1. Reset Values

    Many web browsers have default CSS settings for HTML elements. Unfortunately, these settings differ across each browser. In order to maintain a similar look of your site in multiple browsers, resetting these values is a must. Here is a quick reset snippet commonly used:

    * {
         margin: 0;
         padding: 0;
    }

Read the rest of this entry »