Not able to open menu on click image

Question

0.00/5 (No votes)

See more:

Hi
i want to open menu option on clicking image and close menu option on clicking the same image .can you please help me?

For this image i want to open menu option ( left of departure)
<img src="images/dwn_arw.png" alt="" width="18" height="12" />

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Group</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="style/scrollpanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

</head>
<body>
<div id="wrapper">
  <div class="login_cont">
    <div class="topbar">
    <div class="home_icon"><a href="#"><img src="images/back-arw.png" alt="Home" title="Home" /></a></div>
    <h1 class="fr"><a href="#"><img src="images/icon1.png" alt="" /></a></h1>Departures
    <a href="#"><img src="images/dwn_arw.png" alt="" width="18" height="12" /></a>
    <div class="cl"></div>

    </div>
    <div class="mid_cont">
      <div class="grid_cont">
        <div class="from_cont">
        <div class="fl width60"><input name="" type="text" class="frm_txtfield" width="80%" /></div>
        <div class="fr"><input name="" type="button" class="heading_btn fr" value="Change" /></div>
        <div class="cl"></div>
        </div>
        <div class="from_cont to_cont">
        <div class="fl width60"><input name="" type="text" class="frm_txtfield" width="80%" /></div>
        <div class="fr"><input name="" type="button" class="heading_btn fr" value="Change" /></div>
        <div class="cl"></div>
        </div>
        <div id="scroll-pane">
         <p>
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr class="active">
    <td width="30%" valign="top">P1</td>
    <td width="30%" valign="top">09:05 - 14:15</td>
    <td width="35%" valign="top">Glasgow (GLC)
      <p><span>FC 2C03</span></p>
      </td>
    <td width="5%" align="left"><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
  <tr>
    <td valign="top">P3</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
  <tr>
    <td valign="top">P2</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/error-msg.png" width="24" height="24" /></td>
  </tr>
  <tr>
    <td valign="top">P4</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
   <tr>
    <td valign="top">P4</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
   <tr>
    <td valign="top">P4</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
   <tr>
    <td valign="top">P4</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
   <tr>
    <td valign="top">P4</td>
    <td valign="top">09:05 - 14:15</td>
    <td valign="top">Glasgow (GLC)</td>
    <td><img src="images/correct-icon.png" width="24" height="24" /></td>
  </tr>
</table>

         </p>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

Posted 6-Oct-12 4:46am

ravi1989h

Add a Solution

Comments

Bryian Tan 6-Oct-12 12:39pm

Did you miss something? I don't see the jQuery click event.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Accepted Answer · 2012-10-06T06:30:00

1. Add javascript.

JavaScript

<script>
var menuShown = false;
function onMenuClick()
{
    if (menuShown)
    {
//      hideMenu();
        document.getElementById('menu').style.display = 'none';
    }

    else
    {
//      showMenu();
        document.getElementById('menu').style.display = 'block';
    }
    menuShown = !menuShown;
}
</script>

2. Add style

XML

<style>
#menu
{
    display: none;
    width: 200px;
    border: solid 2px green;
}
</style>

3. Add menu (I added before the div with id=wrapper)

XML

<div id='menu'>
    <ul>
        <li>Menu option 1</li>
        <li>Menu option 2</li>
        <li>Menu option 3</li>
    </ul>
</div>

4. Add handler to image element

HTML

<img src="images/dwn_arw.png" alt="" width="18" height="12" onclick="onMenuClick();" />

5. Swear when you realize that the menu moves the rest of the content around.
6. Spend some time making menu look nice and appear in right spot
7. Discover that you could have used "position: absolute;" and "z-index: 2;" as well as "left" and "top" in the css for the menu, to make it appear anywhere on page, in front of other content.
8. Laugh to yourself since you read the whole post first and now know how to deal with #5 and #6. ;)