Click here to Skip to main content
Rate this: bad
good
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 at 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 at 6-Oct-12 18:31pm
   
Thanks sir good solution......
ravi1989h at 6-Oct-12 18:34pm
   
can you please tell me how to add click event on this menu option..
enhzflep at 6-Oct-12 22:17pm
   
Same way as you add it to any other element. What have you tried?
ravi1989h at 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
0 OriginalGriff 468
1 Sergey Alexandrovich Kryukov 323
2 PhilLenoir 115
3 RajeeshMenoth 110
4 Peter Leow 100
0 Sergey Alexandrovich Kryukov 6,465
1 OriginalGriff 5,926
2 CPallini 2,473
3 Richard MacCutchan 1,687
4 Abhinav S 1,540


Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 6 Oct 2012
Copyright © CodeProject, 1999-2014
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