jquery sliding menu
Page 1 of 1
jquery sliding menu
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.
Re: jquery sliding menu
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.
Re: jquery sliding menu
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.
Re: jquery sliding menu
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.
Re: jquery sliding menu
Thanks!!!!! That's awesome!Re: jquery sliding menu
Um, you know you can make your own topic, I'm not so good at fixing broken code (especially other people's)Page 1 of 1