Thomas’ Developer Blog

February 6, 2008

Liquid context menu positioning with divs

Filed under: CSS, HTML — Tags: , , , , , — sanzon @ 9:41 pm

Well I’m going to write a short post today to show you how to create a liquid context menu position using divs.

 Basically what that means is that you don’t have to tell the browser where to set the context menu.  Let’s say for examle you want to have tabbed browsing on your site.  The person rollsover an image or another div and a drop down context menu appears.  It’s really useful with the growing uses of tabs on the web.

 Generally you start with your divs.


<div style="height: 20px">File</div>
<div style="height: 20px">Tools</div>

Fairly simple. You have two menu items. Know you want to add a drop down menu, but the problem is do you have to sit there and set where each of those menus will go?

There is actually a really simple solution to this problem that works on IE 7, FF 2.0, and Safari Beta. I haven’t tested the others on it yet, but I’m sure they’ll work fine.

Basically all you do is place two additional divs within that div.


<div style="overflow: visible; position: relative">
<div style="margin-top: 20px; position: absolute; background-color: blue">Close</div>
</div>

It’s really simple once you look at the code. Generally you start by placing an empty div with a relative position inside the main div. In this case you place the above code within the file div. After you set the empty relative div inside the main div you get the place holder.

Then once you have the position correct you simply place another div inside with an absolute position which will allow it to float above everything else on the site. Set the margin 20px from the top so it doesn’t overlap the file div, and of course set a background so you can’t see through it.

And there you have it, a simple way to avoid having to set div positiing.

Also you’ll have to use javascript to show and hide the context window. I’m sure you can figure that out with the many many many examples online. OH PS: best part is because of the way the div is setup you can do onmouse over and the browser is tricked into thinking the div isn’t positioned as a rectangle. Instead some funky shaped polygon.

Alright: Next post, emulate windows within website… it’ll be long :/

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: