Login | Register | FAQ
Anonymous

jquery sliding menu

+ Post a reply

6 posts Page 1 of 1


jquery sliding menu

by soccerwebsitemaker » Sun Feb 12, 2012 4:44 pm

I am reaching the end of the JavaScript tutorial, and I wanted to create a sliding menu - with three different parts that slide. I tried many ways, but none work. Could anyone help me with this? Thanks.
User avatar

soccerwebsitemaker

  • Posts: 138
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at

Re: jquery sliding menu

by mariaantonietta » Sun Feb 12, 2012 6:28 pm

User avatar

mariaantonietta

  • Posts: 64
  • Joined: Mon Oct 31, 2011 7:23 pm

Re: jquery sliding menu

by soccerwebsitemaker » Wed Feb 15, 2012 1:31 am

Here is the code. It involves hovering over a image and a list pops up underneath.



HTML:




<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-

1.7.min.js"></script>

<script type="text/javascript" src="creditshop.js"></script>

<link rel="stylesheet" type="text/css" href="creditshop.css" />

</head>

<body>

<h1>Congrats! You have finished your registration process. Now enjoy the

website</h1>

<img src="mylogo.jpg" id="rollOverImage" />

<ul>

<li>Credit Shop</li>

<li>

<li></li>

</body>

</html>





JavaScript:




onload = init;

function init()

{

var myRollOverImage = document.getElementById("rollOverImage");

myRollOverImage.onMouseOver = showMenu;

var start_bonus_date = new Date();

var bonus_success_mes = "Thank you for registering. You start out with 100

credits. Spend them at the shop.";

if (start_bonus_date.getFullYear() < 2013)

{

bonus_success_mes = "Because you registered prior to January 1, 2013 - you

earned a 1000 credits bonus! Spend them wisely at the shop.";

}

else

{

bonus_success_mes = "Thank you for registering. You start off with 100

credits.";

}

alert(bonus_success_mes);

}

function showMenu()

{

$(document).ready(function()

{

var subItems = $('ul li');

var mainImage = $('ul li').has(subItems);

subItems.hide();

$(mainImage).hover(function()

{

subItems.slideToggle('fast');

});

});

}





I'm not very experienced with Jquery (but am with JavaScript) so, there is probably several mistakes.
Thanks for reading and please take a look if you see any problems.
User avatar

soccerwebsitemaker

  • Posts: 138
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at

Re: jquery sliding menu

by mariaantonietta » Wed Feb 15, 2012 11:56 am

User avatar

mariaantonietta

  • Posts: 64
  • Joined: Mon Oct 31, 2011 7:23 pm

Re: jquery sliding menu

by soccerwebsitemaker » Wed Feb 15, 2012 9:53 pm

Thanks!!!!! That's awesome!
User avatar

soccerwebsitemaker

  • Posts: 138
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at

Re: jquery sliding menu

by soccerwebsitemaker » Mon May 14, 2012 12:29 am

Um, you know you can make your own topic, I'm not so good at fixing broken code (especially other people's)
User avatar

soccerwebsitemaker

  • Posts: 138
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at


+ Post a reply

Page 1 of 1