Click here to Skip to main content
12,453,354 members (60,201 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: Javascript
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" />




<!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
Comments
Bryian Tan 6-Oct-12 12:39pm
   
Did you miss something? I don't see the jQuery click event.

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

1. Add 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
<style>
#menu
{
    display: none;
    width: 200px;
    border: solid 2px green;
}
</style>

3. Add menu (I added before the div with id=wrapper)
<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
<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. Wink | ;)
  Permalink  
Comments
ravi1989h 6-Oct-12 18:31pm
   
Thanks sir good solution......
ravi1989h 6-Oct-12 18:34pm
   
can you please tell me how to add click event on this menu option..
enhzflep 6-Oct-12 22:17pm
   
Same way as you add it to any other element. What have you tried?
ravi1989h 6-Oct-12 23:24pm
   
got it sir thanks

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160826.1 | Last Updated 6 Oct 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100