Welcome!

[Eraser35]

How is something like this created with jQuery, HTML, and CSS?

See where it says "Ministry Guide" (next to search box): http://www.yourchurch.com/#

Also, http://www.outside.in has a similar feature when you click "Change Cit" or "Explore Neighborhoods"

Is there a separate <di> that is used to encapsulate the area that is not visible when the "garage door" is up, or is this all taking place in one <div> and it is just a matter of animating the height of that <div> with jQuery?

[Andy]

http://docs.jquery.com/Effects/slideDown#speedcallback

Now please, start referring to the documentation before posting questions here.
Keep this up and I'll demand part of your salary for doing your work for you.

[Eraser35]

Man, Andy you are a tough cookie. Thanks though. I'm a newbie at HTML/CSS/JavaScript (as in I've only been doing this for 2 weeks.) I suppose it's more comforting when I have you do the Googleing for me

[Eraser35]

Andy please don't eat me alive. So I've got it working. Thought there are some issues, as expected... I created a <div> to house this sliding garage door (pun intended), so when it is triggered it slides down and takes up 50% of my page, similar to the YourChurch link I posted..This <div> is below my header <div> that houses the entire navigation structure. They butt up right to each other.

1) The sliding animation seems to be very jerky. I've used jQuery before and it's typically very nice and fluid. For this particular script, it starts off sliding down nice and smooth (this takes place for about 10% of the slide, but then makes a quick jump to the end point, almost like the jQuery got tired of sliding and had no patience.)

2) I tried setting a specific navigation button to trigger this slide, i.e. "Settings", which happens to be a an <li>. However, I am having difficulty getting this button to trigger the slide. I tried replacing $(document.body) with $("#settings"), but it does not work.

Current JS

Code: Select all

$(document).ready(function() {
   $(document.body).click(function () {
      if ($("#garagedoor").is(":hidden")) {
        $("#garagedoor").slideDown("slow");
      } else {
        $("#garagedoor").hide();
      }
    });
});

Current CSS for Garage Door

Code: Select all

#garagedoor {
   top: 2.6em;
   border-top: 2px groove #888888;
   border-bottom: 2px groove #888888;
   position: fixed;
   width: 100%;
   height: 50%;
   background-color: #888888;
   display: none;
   z-index: 5;
}