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: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: jquery sliding menu

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

Hi,

What is it that doesn't work in your code? Could you post it?

soccerwebsitemaker wrote: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

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: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: jquery sliding menu

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

Hi, the list markup is a bit sloppy, and it might cause your code not to work as expected. Also, jquery ready function can't be placed inside a regular function. jquery uses it to make sure your code runs after the page has finished loading, therefore all your code needs to be put inside the ready function.

However, if you simply need a list to pop up on mouse over, here's a possible solution. HTML bit:

Code: Select all
  <img src="mylogo.jpg" alt="" id="rollOverImage" />

   <ul id="menu">

     <li>Credit Shop</li>

     <li>Item 2</li>

    <li>Item 3</li>
      
   </ul>


jquery bit:

Place this just before the closing body tag inside script tags:

Code: Select all
  function hideMenu() {
    $('#menu').hide();
   }
      
   function showMenu() {
     $('#menu').slideToggle('fast');
   }

  $(document).ready(function() {
    //Hide all list items on page load
      hideMenu();
      //retrieve image id
      var myImage = $('#rollOverImage');   
      //Attach handler to the image on hover to show list items
      myImage.hover(showMenu);

    }); //end of ready function   


soccerwebsitemaker wrote: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

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: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

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: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/


+ Post a reply

Page 1 of 1

?>