Menu items appear from an image

savache27
savache27 used Ask the Experts™
on
Hi,

I have an image in my left side menu that says "Local Weather". I would like to give the user two different options of where to get the weather report. Is there a way I can make the two items come out of the image like a side menu?

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
have a div with your two items, on click of image just show this div, and again on another click hide it.

you can use jquery toggle or show/hide methods...

http://papermashup.com/simple-jquery-showhide-div/
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/
can you please share screenshot or URL, so that the issue can be understand in better way?

thanks

Author

Commented:
@BuggyCoder: This isn't exactly what I was talking about, because I wanted the options to slide out to the side rather than below the image. I'm trying the code from the first link you provided. Is there a way to make it where it's not visible when the page loads? I current have one image, and when I click that image two other images slide below that (which are the actual links). But as I said, while the page is loading you can see the two images that should be hidden.

@deegoy418: I've included a screenshot. The weather icon is the last image in the left menu. The first shot shows it before I click the weather icon. The second shows the two options after I click it. I was actually just meaning that when I clicked or scrolled over the weather icon I wanted a side menu with two different weather options to appear. But if it sliding below is the only option I think I can use that. I just wish it wouldn't show those two options while the page is loading.

Thank you both for your help.
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Author

Commented:
Also, my page is now loading with errors on IE since I've included this code. It doesn't do that on Firefox. Not sure what is going on with that.

Author

Commented:
Adding this line stops my top drop down menus from working:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type=
  "text/javascript">

This is what I have before I add that script:

  <script type="text/javascript" src="rv4_js/utility.js">
</script>
  <script type="text/javascript" src="rv4_js/jquery-1.2.6.min.js">
</script>
  <script type="text/javascript" src="rv4_js/superfish.js">
</script>
  <script type="text/javascript" src="rv4_js/jquery.hoverIntent.min.js">
</script>
  <script type="text/javascript" src="rv4_js/jqueryui.slide.min.js">
</script>
  <script type="text/javascript" src="rv4_js/dropDown.js">
</script>
  <script type="text/javascript" src="rv4_js/SpryMenuBar.js">
</script>


Will those not work together?

Author

Commented:
Oh, it looks like I'm loading jquery too many times. Sorry for that last question. I still need to know if there is a way to hide the hidden images that show up while the page loads. I'm not sure why it does that.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial