You probably have noticed the characters—usually arrows—displayed on some navigation menus to indicate the presence of subitems under an item. I find them helpful, and I recently looked to see if it was possible to have them displayed on a CSS drop-down menu by using only CSS (that is, without any JavaScript assistance). In this howto I explain the solution I arrived at:

How to display these useful indicators on a CSS drop-down menu by using the selector :not.

For a simple demo, see the menu of this site, op111.net.

It is a simple solution that works in all browsers except Internet Explorer, where the indicators simply do not appear at all. Hence, it is a progressive enhancement, or, to put it the other way round, it degrades gracefully in old or wayward browsers.

It is also a solution that suggested to me that the :not selector may offer possibilities that are unexplored. If you know of other useful applications of the :not selector, be kind enough to enligthen us with your comment!

Step 1

To each anchor in the menu we add an indicator-character wrapped in a span with an appropriate class:

<span class="more"> &darr;</span>

For this howto I use the downward arrow as indicator, and more as the class name.

So, supposing we have a menu with two top-level items, one of which has a subitem:

<ul>
  <li>
    <a href="http://x.net/p1">Page1</a>
  </li>
  <li>
    <a href="http://x.net/p2">Page2</a>
    <ul>
      <li>
        <a href="http://x.net/p2/s1">Subpage1</a>
      </li>
    </ul>
  </li>
</ul>

... what we aim at is:

<ul>
  <li>
    <a href="http://x.net/p1">Page1<span class="more"> &darr;</span></a>
  </li>
  <li>
    <a href="http://x.net/p2">Page2<span class="more"> &darr;</span></a>
    <ul>
      <li>
        <a href="http://x.net/p2/s1">Subpage1<span class="more"> &darr;</span></a>
      </li>
    </ul>
  </li>
</ul>

The best way to add the indicators will depend, of course, on how the markup is generated. If you use WordPress, look at the Appendix at the end for some examples.

Let’s see the second step now...

Step 2

We make a CSS rule to hide all indicators we added:

li a .more { display: none; }

Why did we do that?

Because the indicators we added in the first step appear in all items, but not all items have subitems. So, in the second step we hid the indicators, and in the third step we will instruct the browser to display indicators only in items with subitems:

Step 3

We make a second CSS rule:

li a:not(:last-child) .more { display: inline; }

Done!

How does this work?

In items with subitems, the a anchor is followed by a ul element (which containts the subitems). So, in items with subitems the anchor is not the last child of its li parent. This is the condition that our :not rule specifies, saying, in human language:

Select .more within any anchor that is not the last child of its parent, and display it inline.

The display:none declaration of the second step is understood by all common browsers. So, all browsers will hide the indicators from display. Then, browsers that understand :not and :last-child will show the indicators where appropriate.

Simple, perfectly valid CSS 3, and, for this reason, future-proof too!

Fine... But!...

I want the helpful indicators in Internet Explorer too!

That’s not possible with CSS alone, because IE (even IE8) knows nothing about CSS3 selectors like :not and :last-child (or :only-child, which would have the same effect here).

So, for Internet Explorer you will have to resort to a mixture of CSS and JavaScript. Either use something like Superfish or write some custom JavaScript. If the site already uses a JS framework, I imagine the code would be pretty simple. In jQuery, for example, all it takes is one line:

jQuery(document).ready(function($) {
    $('a:not(:last-child) .more').show();
});

Then, load the JavaScript snippet conditionally if the user agent is Internet Explorer, so that good browsers don’t have to download unnecessary bytes.

I want different indicators for parents of different levels!

I omitted that from the example on purpose, to keep the markup as simple as possible. It’s easy to do:

1. Add two indicators to each anchor, one for subitems that expand vertically and another for subitems that expand horizontally, and wrap each indicator in its own span along with an appropriate class. E.g.: more-v and more-h.
2. Hide all indicators.
3. For top-level parents display the one indicator by making a selector that applies to top-level parents only. E.g.:
   • #menu > ul > a:not(:last-child) .more-v
4. For lower-level parents display the other indicator by making a selector that targets lower-level parents. E.g.:
   • ul ul a:not(:last-child) .more-h

Links

That’s it for now. Thanks for reading!

Here are a few links to help your work and research on drop-down menu systems:

• CSS browser compatibility table at QuirksMode. See which browsers support advanced CSS3 selectors.
• Dropdown low down — Tyssen Design. Extensive comparative review of drop-down menus.
• Free CSS Drop-Down Menu Framework. Popular, actively maintained, relatively easy to set up, and licensed under the GPLv3.
• Keyboard accessible dropdown menu. Full keyboard-accessibility even without JavaScript!
• Superfish. A jQuery plugin that adds useful enhancements, including indicators, to Suckerfish-type drop-down menus.

Appendix

Here are three bits of code that show how to generate the markup for the indicators in WordPress.

If you are constructing a WordPress theme from scratch, simply use the link_after argument of wp_page_menu(). If the menu is generated by wp_list_pages(), you can pass the exact same argument to it too. Here is an example that uses wp_page_menu():

wp_page_menu(array(
    'depth' => 2,
    'link_after' => '<span class="more"> &darr;</span>',
    'sort_column' => 'menu_order',
    'title_li' => '',
));

wp_page_menu() and wp_list_pages() can also be modified by applying a filter, which is convenient if you do not want to edit template files directly.

For wp_page_menu() the indicator markup is added by applying a filter to wp_page_menu_args():

function my_page_menu($args)
{
    $args['link_after'] = '<span class="more"> &darr;</span>';
    return $args;
}
add_filter('wp_page_menu_args', 'my_page_menu');

For wp_list_pages() your filter will have to do a simple string replacement instead:

function my_list_pages($html)
{
    return str_replace('</a>', '<span class="more"> &darr;</span>' . '</a>', $html);
}
add_filter('wp_list_pages', 'my_list_pages');

Add to del.icio.us

© 2010 op111.net | Permalink

Click on the links to visit the websites or on the thumbnails to see the full-size captures. You can navigate between captures by hitting the Left and Right arrow buttons on your keyboard.

en-ca.org

en-ca.org is a two-page website for a book on Canadian-English orthography. Its front page uses a single font, Constantia. The manicule/index image is a nice touch.

Visit en-ca.org!

kyleslattery.com

kyleslattery.com, the custom-built website of Kyle Slattery, has one of the best navigation bars I’ve seen. See the drop-down menu on the first screenshot:

Visit kyleslattery.com!

madebyfrog.com

This is the homepage of the Frog CMS, and it makes me want to try this CMS. (Not something I will say for many publishing platforms.) Built with Frog CMS.

Visit madebyfrog.com!

melly.me

Text shadows are often used in web design without thought or reason, with results that range from indifferent to bad. In melly.me text-shadow—and transparency—are a successful and integral part of the design. On the left is the home page; on the right the Archives and Tags page. Built with Habari.

Visit melly.me!

nikolay.bg

Black/Red/White schemes are common but they are also difficult to get right; the result can easily get jarring or too stark. nikolay.bg, the website of Nikolay Bachiyski, gets it right. Also, like all designs in this selection, it makes good use of white space. Built with WordPress.

Visit nikolay.bg!

tom.preston-werner.com

tom.preston-werner.com has a functional and inviting front page: Just a series of title links that you want to click on. (Why aren’t more blogs like this?) Its individual article pages use full paragraph justification without hyphenation but they somehow almost get away with it thanks to the relatively wide lines. Built with Jekyll.

Visit tom.preston-werner.com!

whistleandfish.com

whistleandfish.com has a beautiful header, while its paragraphs are among the most readable I’ve seen. Its typography also serves as a reminder that fancy font options is not something good design can’t live without. The fonts on the left are Liberation Serif and Liberation Sans (the fallback defaults for serif and sans-serif in my Linux desktop). The page on the right uses Georgia and Verdana (Verdana is second after Helvetica Neue in the sans-serif stack). Built with WordPress.

Visit whistleandfish.com!

wilsonminer.com

I never would have thought that I would enjoy a site whose front page is in a shade of violet (amethyst in this case). Yet the colour is what I like most in wilsonminer.com. I would like its individual pages more if they didn’t use indentation to distinguish paragraphs. Built with Django.

Visit wilsonminer.com!

Notes

Screenshots are from Firefox 3.5 for Linux and Firefox 3.7 for Windows. (Hover over the images to see which is which.)

Add to del.icio.us

© 2009 op111.net | Permalink

Reliable economical webhosting for small websites is hard to find.

Most small websites with low traffic don’t need a dedicated server and cannot justify its expense either. So, it is common practice to host small sites along with other small sites in one server. This practice is called “shared hosting”. In this way, cost is shared and a website can be hosted for only a few dollars or euros per month. However, along with cost, resources, most importantly RAM and CPU, are also shared.

Then, the equation a responsible host must solve is: How many websites to put on one server to keep cost as low as possible while maintaining good quality of service?

When the websites are too many, the host “oversells”. What constitutes overselling is difficult to define, since it involves many factors and varies from case to case, but overselling is not rare, and you will know it if it happens to you. The symptoms are two: poor uptime and low speed. The problem is, you cannot know in advance.

A good indication that a company may be overselling is “overpromising” — for example, offering plans with “unlimited” bandwidth and “unlimited” storage for 5 or 6 dollars per month. In fact, unless you have previous experience with a company, or people that you trust have had previous experience, overpromising may be the only indication to go by.

Overpromising is also a problem on its own. Unless you are naïve, you know that it is impossible to get 1TB of monthly transfer for $4.95, or “unlimited” storage and “unlimited” bandwidth for any price whatsoever. But what you cannot know is what you do get, which is often less than what you need, even if your needs are modest.

My experience with companies that promise ridiculous numbers has been unpleasant. I avoid them and, if you value your time and your peace of mind, you should too: When you see unrealistic promises, steer away!

In this review I talk about two hosting providers, A Small Orange and Utopian.net, that are different in that: They don’t try to lure you with impossible numbers.

Utopian.net

op111.net, this site, is hosted with Utopian.net. One reason I selected Utopian.net is that they don’t make unrealistic promises: their basic plan gives 8GB storage and 8GB monthly bandwidth for $10/month or $110/year.

Compared to the offerings of some big names, this may seem too little for too much. It’s anything but that, for two reasons:

First, the numbers are real!

Second, the quality of service and the set of features are rare in budget hosting:

• Good speed
• Modern setup
• Alternative PHP Cache (APC)
• gzip compression of HTML, CSS and Javascript
• Knowledgeable administration
• People familiar with top web-publishing systems like Habari and WordPress
• Friendly, efficient support

... to name a few.

In fact, as far as I know, Utopian.net is unique in offering full gzip compression in a shared-hosting plan. This and APC are two features I especially appreciate in their setup.

You don’t know what APC and gzip compression are? Here is a quick explanation:

APC (Alternative PHP Cache) is an accelerator that makes the generation of PHP pages up to 3 times faster and, in doing so, benefits both ends of the transaction: By caching PHP scripts in their compiled state, it reduces server load, while, at the other end, pages are served faster, which makes for a better user experience.

gzip compression means that the web server compresses a page before sending it to the browser. The browser then decompresses the compressed elements and shows the page to the user. The result is faster transfer and, again, a better user experience. However, gzip compression costs in RAM and in CPU time, and, for this reason, it is rare in shared-hosting environments.

The benefits of gzipping are most impressive in pages with few images or media files. (Most images and media files are already compressed with specialized algorithms and cannot be compressed more without loss of quality.) Here are the numbers for two op111.net pages, the homepage and one long illustrated article, as reported by the Firefox extension Web Developer:

Notice the difference for the homepage of op111.net: The document is 92kB but the browser has to get only 21kB — almost one fifth of the original size!

To return to the subject of my review, all in all I’m very happy with Utopian.net and I recommend them to anyone looking for trouble-free and responsible shared hosting.

A Small Orange

I recently looked for a very small auxiliary plan to host a testing site. And I found one that I fell in love with, “Tiny Orange”, by A Small Orange, a provider with two qualities I appreciate in Utopian.net:

1. Openness
2. Honest offerings

“Tiny Orange” offers 75MB storage and 3GB monthly transfer for $25/year, or $20/year if you use a coupon! If you keep reading, you can get it for even less, or get a special 25% discount on any A Small Orange plan! (The special coupon expired!)

Tiny Orange is, of course, tiny! It’s not for everyone, but, depending on your requirements, it may be enough for you. To illustrate what 3GB/month is good for, the BBC News low-graphics homepage is about 24kB, while the eBay homepage is about 280kB. With the Tiny Orange you can serve 375 eBay homepages per day or 4400 BBC News homepages per day. — Not bad at all for less than 2 US dollars per month!

Then, what makes this super economical plan even better is that it has everything the larger ASO plans have, even SSH access. In other words, it is a full-featured plan, tiny only in storage and transfer.

In general, ASO plans feature everything you need to run a modern website on a modern platform and don’t impose artificial limitations. For example, you can use as many databases or subdomains as you wish, as long as you don’t exceed the storage space and monthly transfer of your plan. And the amount of space and transfer are realistic, which means that A Small Orange take their clients seriously. In return, I can take them seriously too.

The only things I’ve missed in my ASO plan are gzip compression and PHP cache, but this is because I’ve been spoiled by Utopian.net. As I said, I know of no other shared-hosting provider that offers these two features.

IMPRESSIONS AND NOTES

My Tiny Orange plan is very young and I used it mainly for testing, so I cannot write a proper review of ASO. But up to now I’m happy with it. It’s been perfect for what I bought it for. What follows is some impressions and notes.

Activation. ASO activate new accounts manually, to prevent abuse. So, there is delay between payment and activation. My account was activated 29 minutes after payment, which is when I received the welcome e-mail:

op111.net/c/aso-welcome-2009.txt

Features and compatibility. I installed 3 web-publishing systems that use PHP and MySQL—Drupal, Habari and WordPress—and everything is fine up to now. I also used cPanel a few times, which is the latest version, and it works well too. FTP connectivity is good and fast.

Technical support. I knew that ASO is reputed for its good technical support, and my short experience confirms this reputation. I contacted support twice via the help desk, once because of my stupidity and once because Habari needed a PHP extension that, as it turned out, had been temporarily disabled. Both issues were resolved within minutes.

ASO support is available via e-mail (official), the help desk (official), at the ASO forum (unofficial) and at the ASO wiki (unofficial).

Speed. Speed in page generation is good and I never noticed high server load. Transfer speed is good too, at least from my basic aDSL connection. I uploaded a 24MB file, so that you can check for yourself from your own connection and location: http://op109.net/c/ruby-1.8.6-26.exe 20091003: I deleted the file to free some space in my Tiny account.

Uptime. On the 1st of March I started monitoring 3 websites on 3 different ASO servers at intervals of 1 minute. One has 100% uptime up to now. The second was down twice, for 40 minutes and for 5 minutes. The third was down once for 18 minutes. To translate these numbers to uptime percentages:

• 45 minutes downtime in 10 days is 99.70% uptime
• 18 minutes downtime in 10 days is 99.87% uptime

I will update these numbers on the 1st of April.

A Small Orange guarantee 99.5% uptime, and they also have a page that displays the current status of all servers:

status.asmallorange.com

NOTE. The behaviour of 3 servers over a period of 10 or 30 or 60 days cannot tell much about a company with dozens of servers. Certainly, it cannot tell with any confidence that the servers are reliable. But it could be a sign that they are not reliable.

25% special discount for op111.net readers

If you want to try ASO, the kind people at A Small Orange offered a special 25% discount for op111.net readers on all ASO plans. It is for new clients only and valid for 14 days — until 25 March 2009. The special discount that ASO kindly offered expired, but you can use one of the two coupon codes below:

1. op111.net-$5  ‹  Use this to get 5 US dollars off the standard price!
2. op111.net-15%  ‹  Use this to get 15 percent off the standard price!
3. refer.asmallorange.com/21259  ‹  Click to get an ASO plan!

DISCLOSURE. When you use an op111.net code, my ASO account is credited with one month’s worth of the plan you buy. So, if you buy a plan that is $5/month, my account is credited with 5 dollars. (I think you can guess by now that my main motivation for publishing the coupons is not the credit — I just like the service!)

The following table shows the 5 shared-hosting plans by ASO, the standard prices, and the prices you get with the 15% discount. Note that all plans except Tiny offer 14 months when you buy 1 year. Prices are in US dollars.

             Space     Trnsfr      Std    (mo)    −15%    (mo)
---------------------------------------------------------------      
 Tiny         75MB        3GB       25  (2.08)      21  (1.77)
 Small       400MB       10GB       60  (4.29)      51  (3.64)
 Medium     1000MB       25GB      120  (8.57)     102  (7.29)
 Large      2500MB       60GB      240 (17.14)     204 (14.57)
 Super      4500MB      100GB      360 (25.71)     306 (21.86)

TIP 1. For the Tiny Orange the $5 coupon gives a better discount than the 15% coupon.

TIP 2. If you want to try ASO but don’t have a domain name, Go Daddy offers .info domains (http://example.info/) for $1.99.

Thanks for reading!

δκ

Links

A Small Orange
Utopian.net

How to Choose a Good Web Host by Owen Winkler at Asymptomatic.

Changes

2009-03-29

Added 2 new coupon codes for ASO: op111.net-$5 and op111.net-15%. (The 25% coupon expired.) Several other edits and corrections

2009-03-14

Added quick explanations of APC and gzip compression.

Add to del.icio.us

© 2009 op111.net | Permalink

tumblr log-in screen.

Add to del.icio.us

© 2008 op111.net | Permalink