CSS Dropdown Menu

Let’s create a dropdown menu with CSS and HTML only. There are lots of fancy menus out there. This is just an experimental HTML-CSS based multi-level menu with room for improvements. Someone starting to learn CSS might find this helpful.

To quickly explain how it’s done, menu is contained within ul and each menu item is contained within individual li elements. Menu item with children has a class .children and that adds some extra styling for the child menu segment. The child segment is hidden by default and is only displayed on mouse over (:hover). There is a small arrow before the child segment. Style for that can be found in the :before segment for child ul. This arrow also ensures continuous mouse over presence on the parent li. If the arrow is removed, the space between the parent li and child ul will break the continuity of mouse over effect. That can be fixed using padding to the children.

The nav element wrapping the whole thing is just to create a container and set a width for demo purpose.

Here is the demo code on JSFiddle:

Useful extensions for Laravel

I’m starting to love Laravel. And while starting new project, there are few extensions I like to use which saves a lot of time. Maybe someone else will find these useful as well.

1. Laravel 4 Generators

A really awesome extension from Jeffrey Way. This makes life easier by creating all the controllers and models with a single command. A must have extension before starting a new application.

2. Confide

Every app requires a decent authentication system. To sum up the required features there need to be a registration process, a log in process, email validation, password recovery etc. This is really tedious to create all those over and over. Confide solves that problem.

3. Entrust

This might not be essential for all applications but it is a very useful one too. This extension creates a role management on Laravel. This is from the same author of Confide and works better with it.

I’ll enrich this list later if I get to love some other useful extension. All the related suggestions are welcome.

Advanced object selection using Mootools

Mootools’ “Selectors” utility has some really strong feature. It really saves a lot of time and sweat. Using this property, one can select a tag (any one can!), tag with specific name, id or any other attribute (huh!) and most amazingly part of a property value matching to some string…

Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Continue reading

File upload/download on MySQL database

Well… It is already a well discussed topic. But when I was first trying to find out how to do this, I really got stuck. Actully it took me a lot of time to find out the key code segment for the purpose.

So, here is what I’ve learned:

The table:

Suppose the structure of the MySQL table (say ‘file_table‘) is like this:

It has three fileds:

  • id : the primary key, integer type with auto increment feature.
  • content: the content of file, blob type.
  • type: varchar type, the type of the file (e.g. doc, pdf etc.).


I think you can create a HTML form with a input with file type. Its pretty simple. Just use this code to make a input field be able to upload file:

<input id="file_upload" name="file_upload" type="file" />

Now the backend coding. I’m using PHP for this. Continue reading

Monitor’s ICC Profile

Well… I’m not an expert on this section, but just solved my problem regarding this. So thought, I’d share.

I used to see the white as yellow on my Photoshop!! My monitor is Samsung SyncMaster 920NW. This problem occurred both in Windows XP and Vista!! Explored different forum but didn’t get the perfect solution. Then I started to check out different settings in my Vista control panel.

Here is what I’ve changed:

Go to Control Panel > Hardware and Sound > Color Management.

I’ve first selected the display device from combo box and then checked ‘Use my setting for this device’. Then removed the active ICC profile and added Adobe RGB (1998) as default profile.

That’s it! Well it worked for me. You are on your own risk… 😀