phonydev.com

Styling an iPhone-like list

• posted on: February 5, 2009
• filed under: UI

• iPhone/iPod UI often uses lists. It’s nice to be able to style a list in your page so it looks like a native iPhone app, or like the Settings menu/app for example. Here’s one way to do it.

  Demo

  Here’s the end result.

  Markup

  Markup includes just the bare minimum.

  <ul class="nav">
    <li class="first">
      <a href="#">yabba</a>
    </li>
    <li>
     <a href="#">dabba</a>
    </li>
    <li>
      <a href="#">doo</a>
    </li>
  </ul>

  It’s an unordered list with a class name “nav” (you can skip it and style the ul directly if all lists in your application are of the navigational type) and “first” for the first list item. You can also skip “first” and use the :first-child pseudo selector if you don’t care about browsers that don’t support :first-child (IE comes to mind)

  Styles

  First off, some shade of grey for background and sans-serif font:

  body {
    background: #ddd;
    font-family: sans-serif;
  }

  Then, styling the whole list. We want rounded corners, so border-radius makes this a breeze. Also including Firefox’ (-moz-...) and Safari’s (-webkit-...) versions for better x-browser compatibility. No form of border-radius in IE, so IE users will see a sharp-edge box. Wrapping up this style with white background, border and no padding.

  .nav {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background: white;
    border: 1px solid #aaa;
    padding-left: 0;
  }

  Now styling the individual items in the navigation list. Removing the default list bullet with list-style: none and removing the default padding to the left of the list. Bold font and top border to separate each list item. This will result in two border lines for the first item (one from the item and one from the whole list), bit we’ll remove it in a sec.

  .nav li {
    list-style: none;
    padding-left: 0;
    border-top: 1px solid #aaa;
    font-weight: bold;
  }

  OK, first list item - no border, you already have one.

  li.first {
    border-top: 0;
  }

  Now the clickable nav links. Changing the default display of links to block, so that the whole list item (the whole row) is clickable (ok, touchable). Some padding to make bigger rows, dark shade of gray for link color and saying NO to the underline. Final touch - the arrow. It’s an image that we’ll use as a background and position in the middle on the right-hand side.

  .nav a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    background: url(arrow.png) 
  no-repeat right center;
  }

  That’s all folks!

  Beautiful navigation lists with very little effort, simple semantic markup and only one image. Here’s the image if you need it (182 bytes).

  Quick optimization update

  Just thought that this little arrow.png is another HTTP request which is bad for performance, so you can replace this with a base64-encoded version of the icon and inline it in the CSS. Check view/source of the updated example.

1 Comment

1. Comment by cast42 — Aug 5, 2009

   Hi,
   interesting article and design. I like it.
   A possibility to further reduce the footprint is not to use a little arrow.png but the ⟩ character instead:
   .nav li span {
   position: absolute;
   right: 1em;
   }

   yabba⟩
   dabba⟩
   doo⟩

   Kind regards.

Leave a comment