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.
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:
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
This is a great CSS framework I’ve found online. Its optionality, and ease of use amazed me. This is mainly a grid based framework. You just create your element (e.g. div, span) and attach a class that corresponds to the disired width of your element. Thats it. 🙂
This really worth a visit…
This is the continuation of my previous post Basic HTML – Part 1. On this phase of the post, I’m going to explain the table and form tags.
Table is a very important tag and widely used for alignment management of web pages. It is defined by the <table> tag. Some hierarchy are needed to be maintained for tables. First the table, then row, then column and finally content of the column. Continue reading
Well.. I was supposed to take a short class for my developer group in a recent project. I thought I’d rather post the topics and some detail of that class here, which can help beginners.
First of all, we are going to learn some keywords and their use:
- HTML – Hyper Text Markup Language.
- Used to write web pages. Browsers understand this language. You have to talk with web browsers in this language.
- Tags are used to distinguish different elements in a web page. As an example, we’d use the anchor tag (<a>) to define anchor or links.
- CSS – Cascading Style Sheet
- CSS is used to define style for a web page. We’d learn about CSS in a later session.
Now I’m going to explain some rapidly used tags here. Continue reading