Results 1 to 2 of 2

Thread: creating a drop down menu similar to another websites

  1. #1
    itsmaddylol is offline New Member: Posts Will Be Moderated
    Join Date
    Feb 2011
    Posts
    1

    creating a drop down menu similar to another websites

    no, i'm not interested in copying it. i'm looking for ways to achieve a similar effect. the menu in question is the one used on collegefashionista.com


    i need a similar menu that you click/hover over one item (ex/ what school are you from?) that expands to a large list. i need this list to not just lay over the page, but in fact push the content down. this probably requires some javascript/jquery, but i figured i would start here for ideas.

  2. #2
    Join Date
    Sep 2010
    Location
    USA > Seatle > at my computer
    Posts
    220
    You are right about the JavaScript, you are going to need that. In order to push the other content away you need to position it relatively. If I where you I would start by making the basic CSS lay out first. Make it so that when you change the height in CSS the page automaticly moves down to make room. Remember "position:relative;" is going to be your ticket!

    Now that that works all you need to do is use Jquery's animation function. Once you include jquery it should be this simple
    Code:
    $("#TheButton").click(function(){
        $("#TheSlider").animate({
            'height' : '800px'
        },500,"swing")
    })
    To make it slide back up just make another animate function to restore it to its origonal height. You may wish to use a Boolean type (JavaScript doesn't really have variable types, everything is more or less just an object) variable to store the state of the slider(up is false and down is true).

    Good luck getting it to work
    and thou shall not dual boot for ye can only serve one OS.

    Just to be clear Linux is a Kernel not an operating system.

Similar Threads

  1. Replies: 0
    Last Post: 07 Mar 2008, 02:22 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •