Insite Design Lab

Navigation
 

Sliding Doors CSS With (up to) 3 Images

Have you ever designed a great button and wanted to convert it to css?

Do you have a Photoshop button that you would like to grow and shrink around the text it's containing?

Do you know exactly what the sliding doors technique is but are having trouble understanding how to use it?

Well then, this (may) be the tutorial for you!

Other Tutorials On Sliding Doors

  1. For the more technical designer, A List Apart has a great sliding doors tutorial that can be found here
  2. Another great sliding doors tutorial written by Azad Creative and can be found here

What Is The Sliding Doors Technique

Let's take a look at an example. A while back someone showed me this image:

They told me they wanted to use it for titles on a WordPress website. The problem is that Wordpress titles are generated dynamically and therefore you can't depend on titles being a certain width as they will change.

What you don't want happening is this:

or...

This is where sliding doors comes in. Here's the basic idea:

  1. You break the image into three different images. Left corner, Right corner and Middle.
  2. You make your link / title / list item.
  3. You wrap that item in three different elements. (I'm using <li><a href="#"><span>Your Element</span></a></li>)
  4. You give each element a background image. (Left corner, Right corner, Middle)
  5. You have an awesome CSS effect using Sliding Doors.

The Code

Alright, you have all gotten through the theory and are ready to get something done already! Let's get started on the code, feel free to copy it and use it freely in your own work.

The HTML


<div class="navigation">
        <ul>
            <li><a href="#"><span>A Normal Sized Link</span></a>
            <li><a href="#"><span>A Link That's A Little Bit Longer</span></a>
            <li><a href="#"><span>Short Link</span></a>
            <li><a href="#"><span>Warning, this is totally unnecessary. AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</span></a>
        </ul>
</div>

The CSS


.navigation {
     display: block;
}

.navigation * {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 13px;
     text-transform: uppercase;
     line-height: 27px;
}
.navigation ul {
     display: block;
     float: left;
     margin: 37px 0 0 20px;
}

.navigation ul li {
     list-style: none;
     float: left;
     margin: 0 0 0 5px;
     background: url(images/middle.jpg) top left repeat-x;
     text-indent: 10px;
}

.navigation ul li a {
     background: url(images/right.jpg) top right no-repeat;
     display: block;
     color: #000;
     text-decoration: none
}

.navigation ul li a span {
     background: url(images/left.jpg) top left no-repeat;
     display: block;
     padding-right: 10px;
}

Try Out My Sliding Doors

Help Me Out

Did you like the tutorial? Hate it? Learn from it? Did it confuse you? Share with your friends or let me know what you did and didn't like! I'll really appreciate it.

blog comments powered by Disqus