Boolean Island !

popup menu by CSS & JS

Posted by: ranacse05 on: May 6, 2008

popup menus are very popular now a days.There are many software which helps us to create popup menus.Those software use a JavaScript file.But the main problem is its really tough to edit that JS file without that software.And one software doesn’t support another software’s files.So i was looking for some simple script which will helps me understand and what can i change when ever i want.Then i found a nice solution its based on CSS and javaScript.It is using visibility property.Here is an example.

<div id="MENU"
  style="position:relative; width:80px; text-align:center;
  background-color:#DC6000; color:#FFFFFF; cursor:hand"
    onmouseover="document.getElementById('ITEMS').style.visibility='visible'"
    onmouseout="document.getElementById('ITEMS').style.visibility='hidden'">
      Menu
</div>

<div id="ITEMS"
style="position:relative; visibility:hidden; width:80px; text-align:center;
background-color:#DEB887; color:#FFFFFF"
  onmouseover="this.style.visibility='visible'"
  onmouseout="this.style.visibility='hidden'">

  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 1
  </div>
  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 2
  </div>
  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 3
  </div>

</div>

<p>Other page content...</p>

Just copy and paste the code inside a HTML file and watch :) .

4 Responses to "popup menu by CSS & JS"

I guess lots of people will be helpful by this instruction. :)

Nice step, go ahead. it will helpfull for web publisher

sharif

nice tutorial…….

everything worked just like charm, but there is one thing i couldn’t sort.
i placed the menu up on the left of my header, but it just preserves a space between the menu and the header as the numbers of languages i add increases, how can i possibly resolve that?

Leave a Reply

My blog worth


My site is worth $3431.
How much is yours worth?

My Twittes

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

FireFox

Firefox 3

My Facebook

this is Raquibul's profile

View Raquibul Islam's profile on LinkedIn

My fav

 

May 2008
S M T W T F S
« Apr   Jun »
 123
45678910
11121314151617
18192021222324
25262728293031

Flickr Photos

Tea !

History

me

me

ramsagor

me,monga,mim

me,monga,mim

me,monga,mim

More Photos

My Bookmarks

Dynamic Malloc

Blog Stats

  • 36,018 hits