I have this menu that stays in a fixed position on all pages.. It gives you the option to hide or show the menu.. You click "hide menu"... the menu fades away... then you click "Show menu".. the menu reappears (sorry for illustrating that concept).. very simple right? right! The problem is that I want the menu to be hidden by default (just on the home page).. I have no idea how to do this.. but I am assuming it cant be too complex of an issue.. here is the code for the menu:
jQuery(document).ready(function(){
// Fade Effects
jQuery(function(){
// Fade in homepage on pageload
jQuery("body.home").css({"display" : "none"}).fadeIn('slow');
//portfolio thumb fadein fadeout
jQuery(".fader img").css("opacity",1);
jQuery(".fader span.title,.fader span.category").css("opacity",0);
jQuery(".fader").hover(function(){
jQuery(this).find("img").fadeTo("slow", .4);
jQuery(this).find("span.title,span.category").fadeTo("slow", 1);
jQuery(this).find("span.title,span.category").css("color","#fff");
}, function(){
jQuery(this).find("img").fadeTo("slow", 1);
jQuery(this).find("span.title,span.category").fadeTo("slow", 0);
jQuery(this).find("span.title,span.category").css("color","#ccc");
});
});
// Menu Hide Effects
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
jQuery('#hide').click(function(){
jQuery('#menu').fadeToggle();
jQuery(this).text(jQuery(this).text() == '+ Show menu' ? '- Hide menu' : '+ Show menu');
return false;
});
// Menu SlideToggle Effects
jQuery("ul.toggle").hide();
jQuery("li.trigger").toggle(function(){
jQuery(this).addClass("active");
}, function () {
jQuery(this).removeClass("active");
});
jQuery("li.trigger").click(function(){
jQuery(this).next("ul.toggle").slideToggle("slow,");
});
});
So thats my question / issue guys... If anyone could help me asap.. It would mean so much to me, it honestly would mean the world to me. Agian, I would like to make the menu invisible by default.. just on the homepage..