Skip to content
May 6, 2008 / ranacse05

popup menu by CSS & JS


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 :).

Advertisements

5 Comments

Leave a Comment
  1. Omi Azad / May 6 2008 7:05 pm

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

  2. sharif / May 6 2008 7:50 pm

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

    sharif

  3. saeed ahmed / May 6 2008 8:47 pm

    nice tutorial…….

  4. hakeem / May 29 2009 8:01 am

    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?

  5. ishan banga / Oct 18 2009 12:47 pm

    Thanks for the share……..

    yesterday i was searching 4 a nice css menu ..the n sundenly i found this site name css menu builder which provides free 200 design menus..
    just see this article->http://myfundoo-blog.blogspot.com/2009/10/need-menu-for-your-websiteblog.html

    —————————————————————————–
    Regards
    I>K>B

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: