How to create this drop down box

Question

I am trying to create this dropdown box that slides down and has the bottom image retain as it slides down with content inside it. I have been trying to find scripts dedicated to this but I can't find any. Maybe someone can give me a head start or pointer in doing this. Or does anyone have a script I can work off of?

Here is my objective: to create a slide down menu that slides down and up on click but retains this look to it.

Answer 1

Here is a simple slide down content from what you described with jQuery: http://jsfiddle.net/t9hq9/19/ you could just replace my #bottom with your bottom image, mine is just made in css with border-radius.

HTML:

<div id="content">CONTENT</div>
<div id="bottom"></div>

CSS:

#content {
width: 400px;
border-left: 10px solid #FA802F;
border-right: 10px solid #FA802F;
text-align: center;
padding: 100px 0px 100px 0px;
display: none;
}

#bottom {
width: 420px;
height: 100px;

background-color: #FA802F;
-webkit-border-bottom-left-radius: 50px;
-moz-border-bottom-left-radius: 50px;
border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 50px;
-moz-border-bottom-right-radius: 50px;
border-bottom-right-radius: 100px;   
}

JS:

$('#bottom').toggle(
  function() {
    $('#content').slideDown();
  },
  function() {
    $('#content').slideUp();
  }
);

Answer 2

EDITED (refined the entire code ... including jQuery 1.7.1)

Like many mentioned here, you can just use an image as the background. Using the border-radius you keep your InternetExplorer 8- visitors without the good looks. I, myself, spent months trying to use everyone's png-fix/plug-in etc to give IE8 round corners but, at the end, I gave in and used images.

It so turned out that it is a LOT LESS STRESS on the coding side of things and, applying sprites turns things even easier.

The very bottom (the rounded part) is an entire image (in my case) and the sides is a cut out of that same image with 1px height and cleaned on the center.

The css I applied to my "exercise":

<style type='text/css' media='screen'>
    #wrapper   { position:relative; width:800px; height:800px; margin:0 auto; display:block; z-index:1; }
    #docHeader { position:relative; margin:0; width:100%; height:60px; overflow:hidden; background-color:green; 
        color:orange; font-size:36px; text-align:center; line-height:60px; vertical-align:middle; z-index:2; }

    .nav {
        cursor:pointer;
    }
    .navContent {
        width:172px;
        height:0px;
        overflow:hidden;
        background: transparent url(content.png) repeat-y top left;
    }
    .navContent span {
        display:block;
        margin-left:8px;
        line-height:22px;
        font-size:14px;
        text-align:left;
    }
    .navTitle {
        width:172px;
        height:35px;
        text-align:center;
        line-height:35px;
        vertical-align:middle;
        color:green;
        font-size:24px;
        background: transparent url(bottom.png) no-repeat top left;
    }

    #docBody { position:relative; margin:0; width:100%; height:100%; overflow:auto; z-index:2; }

    #content { position:absolute; top:0; left:0; width:100%; min-height:600px; background:transparent; overflow:auto; z-index:3; }

</style>

The javascript:

<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>

    jQuery( function () {

        $('div.nav').on( { 
            mouseenter : function () {
                var $this = $(this);
                $this.addClass('mouseHasEntered');
                if ($this.hasClass('mouseHasLeft')) $this.removeClass('mouseHasLeft');
                setTimeout( function () {
                    if ($this.hasClass('mouseHasEntered')) {
                        var iCount = $this.find('span').length * 24;
                        $this.find('.navContent').animate( { 'height' : iCount+'px' },1000 );
                    }
                },100);
            },
            mouseleave : function () {
                var $this = $(this);
                $this.addClass('mouseHasLeft');
                if ($this.hasClass('mouseHasEntered')) $this.removeClass('mouseHasEntered');
                setTimeout( function () {
                    if ($this.hasClass('mouseHasLeft')) {
                        $this.find('.navContent').animate( { 'height' : '0px' },1000 );
                    }
                },200);
            }
        });

    });

    $(document).ready( function () {
        setTimeout( function () { /// show the spinning ajax loader gif
            $('#content').load('roundMenu.content.html');
        },2000);
    });

</script>

The body side of things:

  <div id='wrapper' >
   <div id='docHeader' >The Header</div>

   <div class='nav' style='position:absolute; top:60px; left:0; z-index:5; ' >
    <div class='navContent' >
     <span>Go here</span>
     <span>Go there</span>
    </div>
    <div class='navTitle' >OPTIONS I</div>
   </div>

   <div class='nav' style='position:absolute; top:60px; left:209px; z-index:5; ' >
    <div class='navContent' >
     <span>Go here 2</span>
     <span>Go there 2 </span>
     <span>Go ever there </span>
    </div>
    <div class='navTitle' >OPTIONS II</div>
   </div>

   <div class='nav' style='position:absolute; top:60px; left:418px; z-index:5; ' >
    <div class='navContent' >
     <span>Go here 3</span>
     <span>Go there 3 </span>
     <span>Go ever there 2</span>
    </div>
    <div class='navTitle' >OPTIONS III</div>
   </div>

   <div class='nav' style='position:absolute; top:60px; left:628px; z-index:5; ' >
    <div class='navContent' >
     <span>Go here 4</span>
     <span>Go there 4 </span>
     <span>Go ever there 3</span>
     <span>Why not complicate</span>
    </div>
    <div class='navTitle' >OPTIONS IV</div>
   </div>

   <div id='docBody' >

    <div id='content' >
     <img src='ajax-Loader.gif' border='0' alt='0' style='position:relative; margin:45% 45%; ' />
    </div>

   </div>

  </div>

Sample: http://zequinha-bsb.int-domains.com/roundmenu.html

Answer 3

You could cut the rounded portion at the bottom as an image and try something like this:

/* CSS */
#dropDown {
  background: url(menuBottom.png) no-repeat bottom;
  padding-bottom: 40px; /* adjust based on the height of the bottom image */
}
#dropDown ul {
  border-color: orange;
  border-width: 0 5px;      
}

<!-- HTML -->
<nav id="dropDown">
  <ul>
    ...
  </ul>
</nav>

To dynamically show/hide the menu, you can use jQuery.

// When the page has loaded
$(document).ready(function() {
  // Hide the drop-down menu
  $('#dropDown ul').hide();

  $('#dropDown').hover(function() {
    // Show on mouse over
    $('#dropDown ul').show();
  }, function() {
    // Hide on mouse out
    $('#dropDown ul').hide();
  });
});

For more information, A List Apart has a great article on styling unordered lists as menus at http://www.alistapart.com/articles/taminglists/. You may also want to check out http://api.jquery.com/hover/ for details on using jQuery's hover event.