CODEWITHSUNDEEP
jqueryimagesharepointmenumouseover
Steve
Steve

Reputation: 37

SharePoint Expandable Link Menu when Mouseover Image with Jquery

I'm having an issue creating a mouseover menu for an image within a Content Editor Web part.

The functionality I desire is to have two images in a table, side by side. When a user hovers over one of the images, a drop-down menu appears with a few different links. When the user moves their mouse off of the image, the menu will disappear.

This is my HTML for the Content Editor Web Part containing the images:

<table _moz_resizing="true">
<tbody>
<tr>
<td>
<br/>
<center><a href="/sites/XXXX/AllItems.aspx"><img src="/sites/XXXX/SiteAssets/Link2.png" _moz_resizing="true" alt=""/></a></center>
</td>
<td>
<br/>
<center><a href="/sites/XXXX/Lists/XXXXX/AllItems.aspx"><img src="/sites/XXX/SiteAssets/Link3.png" _moz_resizing="true" alt=""/></a></center>
</td>
</tr>
</tbody>
</table>

These two images are side by side. Now, I would like to incorporate the effect I made note of above as seen at this link: http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

(Only the mouseover effect and essentially for only one "header" (the image) as I will only have three sub-menu links. )

I never really learned javascript, but merely look resources I found online and incorporate them onto pages. Can someone please outline how I would structure the HTML and Jquery with the appropriate DIV tags to get this working? Any help would be greatly appreciated.

Upvotes: 0

Views: 1663

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76817

Instead of the img tags I would put divs into my html code and the images would be the background of my divs. I would put a select tag into each div with display: none as default for the select tags inside the divs. My divs would have a class attribute and on mouseover event I would change the display of the select in the div where the hover was triggered. When mouseout would happen I would change back the display of the inner div. Try to search on google for more information.

I hope this helps

Upvotes: 1

Related Questions