Often there is a need for a specifc style of menus on Web pages. These menus show up after a specific event (for example: click or hover over) and they stay visible as long as the cursor is over them.

Developing such menus is not trivial at least to say. I have managed to find two solutions to this.

One solution is based on CSS (Cascading Style Sheets) described in the excellent article: Pure CSS Menus.

The solution I have worked out for the menu is based on JavaScript, goes like this:

1. Retrieve the top HTML element for the menu or create the HTML elements for the menu. This can be a result of a mouse-click or a mouse-over event.
2. Register the mouseout event for every HTML element under the menu, the event should invoke a function checking if the menu should be closed.
3. Use the event.target (or event.srcElement on some browsers) and event.relatedTarget (or event.toElement on some browsers) properties from the event to check if the menu should be closed.
4. The condition for closing the menu is: the mouse has not entered (event.relatedTarget) the top menu item and it has not entered any other element that is a child of the top menu item.
   This second part may need a supporting function to determine whether an element is a child of another element, example (see isAChildOf function): Mouseenter and mouseleave events for Firefox (and other non-IE browsers)
5. (Optional) To get a funky effect, hook up the close action to a timer and only close it on expiry. In the meantime any mouseover event to any menu item should disable the timer.

Another example of the pointer sensitive menus can be found on the TDT 3D Web site. Unfortunately the code is scrambled, but it seems that it combines CSS and JavaScript to achieve a pointer sensitive, roll-down, delayed hiding menu effect.

The reasults of the new theme are already up on this blog…

The customization went pretty smooth with only a few gotchas.

My personal choice of tools were:

• Xara Extreme for vector graphics. I have designed the whole page with this proggy.
• GIMP the bitmap editor – to slice up the page into manageble pieces.
• Bluefish text editor on Ubuntu.
  The story here is that I am running an Ubuntu virtual machine with WordPress installed (and some other apps as well), where I can do all sorts of test and customization without breaking the live site.

I used the default theme from WordPress as the basis for my new theme: blupark ONE. The documentation is pretty clear about how to do theme customization and the default theme is fairly well structured and documented (inline comments).

A few gotchas though:

• Most of the customization is done through CSS. As a matter of fact, hardly anything had to be done with the HTML/PHP code – at least for the moment. The difficulty is that it is very easy to get lost in the hierarchy and long list of style definitions.
• The theme uses a set of well placed DIV, rather than a TABLE, to partition the page content. I am not sure which one is worse actually. TABLEs have a pain in the neck behavior when you start playing with padding, border, margin, width, height, etc. DIVs are similarly rubbish when it comes to constructing a page.

I am planning further tuning and enhancements to the theme, these will come later…

Selecting the right, or just a content management application for the Web is similarly challenging as picking the album and photo management package.

The most important is to define the requirements for the content management application.

• What type of content is it going to present and manager?
• How much time is it going to take to add, update, remove, comment on the content?
• Is the structure for the content complex, is it more hierarchical or more flat?
• How complex (or fancy) the presentation, the look&feel of the content will be?

I had two major paths to chose from: take a full blown Content Management System (CMS), try a Wiki system, or go with a light-weight blog style content manager? I decided that a blog-style will fit the purpose, because:

• blogging it is the “thing” to do on the Web lately,
• it is easy (in other words, does not need much time) to manage,
• the structure and the use (reading, commenting) of blogs is simple and it is almost common knowledge,
• it has all the features I may need to host the content I have to deliver.

There are quite a few Web applications available for blogging.

First I tried b2evolution, but it was not as exciting as the second choice: WordPress. I will not bore you with the feature this proggy has to offer, here are the reasons I liked it:

• Easy and simple installation. This happened remotely using nothing else than a browser.
• Heaps of excellent quality themes for free. This is always a good indication. Furthermore, the theme customization is fairly simple as well.
• A nice set of plug-ins.
• Support for pages, kind of a mini content management system.
• Online theme editor – it is nice to fine-tune the theme on the spot from the admin client.

Next step with WordPress is to customize the theme…

You will soon realize that there are plenty of Web applications for you to build a Web site. Actually, there are so many that it is difficult to chose the right ones. This post is related to the Web applications chosen to build the blupark.net Web site, however other Web sites, depending on the purpose, type, size, complexity may chose a totally different set of apps.

It was clear to have the following functions available on the site:

• Articles, discussions, blogs, and so on
• Photo album management and organizer
• Hosting various applications and projects in the future

The hosting environment provides install scripts for most of the Web applications one may need. The installation is very easy thorugh the control panel, filling out a few forms in Fantastico.

The first application I was trying to sort out was the Photo album organizer. The current Fantastico environment only supports 4Images Gallery. Installation went quick and smooth, but the application just did not cut it. There is nothing particularly wrong with the application, it just feels more like an administrative client or dashboard rather than a nice Web based gallery.

The next option was to install something from scratch (without Fantastico). Next in line was Gallery2.
Gallery2′s installation is more than just impressive. It goes very smooth, it provides plenty of help, test (database connection) and validation. It is actually pretty amazing how far Web application installation evolved in the Open Source world. Things that I was used to in the enterprise, J2EE environment were simply overtaken in some instances of OSS.

So I got Gallery2 installed, configured and running perfectly fine on the site. My next task was to customize the theme, but that seems to be a royal pain in the neck. I am not happy with the lack of (incomplete) documentation, and the complexity that is exposed to the Web designer – that’s right, themes should not require the developer role. I guess the (low) number of available themes on the Web is a good indicator.

Chosing a blogging application is coming…