All posts in HTML & CSS

I often see requests for help on how to create a simple dropdown menu without requiring too much effort, and usually I direct people to an article for ‘son of suckerfish’, but since jQuery is in most sites I use now I have moved to using a jQuery based dropdown that is much simpler.

Creating a Dropdown Menu with jQuery and CSS

By on July 6, 2009 in HTML & CSS, jQuery with 2 Comments

The raw base

To start off with, we’re going to at least need some sort of menu structure to get us going. For this, the best way to structure the menu is using an unordered list (ul), nesting your submenus as you go. Below is the example we’re going to use in this demo it its raw unstyled format.

(The running demo is here – http://www.subooa.com.au/example/css_jquery_dropdown.html)

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="mainmenu">
<ul>
	<li><a href="#">Menu item 1</a>
<ul>
	<li><a href="#">Submenu item 1</a></li>
	<li><a href="#">Submenu item 1</a></li>
</ul>
</li>
	<li><a href="#">Menu item 2</a></li>
	<li><a href="#">Menu item 3</a></li>
	<li><a href="#">Menu item 4</a>
<ul>
	<li><a href="#">Submenu item 4.1</a></li>
	<li><a href="#">Submenu item 4.2</a></li>
</ul>
</li>
	<li><a href="#">Menu item 5</a></li>
</ul>
</div>

Opening that in a browser is going to be pretty plain, something like this:
raw_menu

A little css

For the sake of this tutorial we’re only going to give the menu a basic look and not get too fancy. So we’ll just create a nice green and black menu.

The nav we are going to create is going to be a left to right manu, with the second level popping out below its parent, so we first need to order the items left to right and get the submenu it the right position. (To keep it simple, the style is going to be added to the same file and not extracted into a saperate stylesheet)

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!--
		body{
			margin: 0px;
			font-family: Arial, Verdana, Helvetica, Sans-Serif;
		}
 
		#mainmenu ul{
			width: 100%;
			height: 30px;
			background-color: #393;
			margin: 0px;
			padding: 0px;
			font-size: 12px;
		}
			#mainmenu ul li{
				float: left;
				list-style: none;
				margin: 0px;
				position: relative;
				height: 30px;
				width: 100px;
			}
				#mainmenu ul li a{
					display: block;
					padding: 0px 10px;
					height: 30px;
					line-height: 30px;
					color: #FFF;
					text-decoration: none;
					border-right: 1px solid #363;
					border-left: 1px solid #3c3;
				}
 
				#mainmenu ul li ul{
					width: 170px;
					position: absolute;
					left: 0px;
					float: left;
					clear: left;
				}
					#mainmenu ul li ul li{
						background-color: #000;
					}
						#mainmenu ul li.hover ul li a{
							border-width: 0px;
							border-bottom: 1px solid #CCC;
							background-color: #000;
							height: 29px;
							width: 150px;
						}	
 
-->

style_no_js

Hiding the submenu

Now that the menu is working and displaying as we want it to, now we need to hide the submenu by default and setup the style for the hover state.

Change the left value for the “#mainmenu ul li ul” class to be off the screen somewhere (we’re using -12000px here) and add a new hover class for the list item, which moves the ul back to where we just had it when the user hovers over the main menu item.

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11

				#mainmenu ul li ul{
					width: 170px;
					position: absolute;
					left: -12000px;
					float: left;
					clear: left;
				}
 
					#mainmenu ul li.hover ul{
						left: 0px;
					}

Adding the jQuery event… the fun part

Up to this point, the file could run as a standalone HTML file, and with a little extra CSS could actually work in a lot of browsers, but there are many out there that don’t support using the “:hover” on list items, so we need to make use of some javascript to tell the browser to react when the user hovers over the main menu items. So first step here is to actually load the jQuery javascript:

?View Code JAVASCRIPT
1
2

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
	<script type="text/javascript"><!--mce:1--></script>

(The no conflict line has been added in cases where people may already be calling a javascript file that makes use of $, it prevents us from running into any javascript code conflicts)

And now here is where the magic happens, using jQuery you can ‘chain’ function calls one after the other without having to do each function call on an element on its own line which cuts down the file size and keeps things neat and together.

?View Code JAVASCRIPT
1

	<script type="text/javascript"><!--mce:2--></script>

Finally, just to top things off we need to add some hover colors to the menu items.

?View Code CSS
1
2
3
4
5
6

				#mainmenu ul li.hover a{
					background-color: #3c3;
				}
				#mainmenu ul li ul li.hover a{
					background-color: #333;
				}

final_dropdown_menu

And that’s it, a fully functional CSS dropdown using jQuery. In a later article, I’ll cover adding a slight animation and also adding multiple levels of dropdowns.

Demo and full code

Here’s the running demo – http://www.subooa.com.au/example/css_jquery_dropdown.html
In case you got a little lost along the way, you can download the full code here to play with – css_jquery_dropdown.zip

Often a full CMS is way too much of a hassle for a site. If the site you are building is only a handful of pages, having the overhead of a CMS like Joomla, Drupal or Wordpress can be too much overhead. Enter CushyCMS, an extremely simple CMS that allows you (or your client) to edit particular sections of content without the additional baggage.

CushyCMS – Simple CMS for Static Sites

By on June 29, 2009 in HTML & CSS with 3 Comments

CushyCMS is a hosted solution that allows you to build static HTML pages, without the need to install anything extra. This means it is independant of platform, you can use it on a Windows based server, or a Unix based server, the results are the same.

You will of course need to sign up to CushyCMS in order to use the solution, but it’s a very simple process and is free.

Once you’ve signed up, you will be asked to add a site to your account which will require details such as the server name and FTP details so that it can make the adjustments to the site as you make your changes. After adding a site, you will need to add a page to list as editable, clicking on the ‘assign page to site…’ link will bring up a list of files (using the FTP details you entered for the site). Click on the file you want to be able to edit, give it a name, and click the ‘assign page’ button.

You’ll now see that page in your list, and you’ll be able to click through to the edit page. Doing so now though, CushyCMS wont know which parts of the page you want to be editable, so lets go ahead and put in some code to let it know.

Jump into your favourite editor and open up the original file. All you need to do is give all the elements you want to be editble the css class “cushycms”. For example:

?View Code HTML
1

<h1 class="cushycms">My editable title</h1>

Once you’ve added this class to all the elements you want to be editble (including images that are auto resized!) save the file and add it to the server you have hooked up to CushCMS, and go back to the edit page in CushyCMS.

That’s it. Done. Simple right!

It doesn’t stop there though, as the main developer, you can also give access to your clients so they can maintain their own content. You can even assign only certain pages to them if you want to restrict their access. When you add a new “editor” the client will receive an email with their login details, and they will have a simplified view of the admin area and be able to edit the content for only the pages you have allowed them access to.

So next time you build a small site that still needs CMS capabilities, keep CushyCMS in mind.