Grow your CSS skills. Land your dream job.

Header pull down

  • # August 21, 2012 at 7:41 am

    Hello,

    Okay I am beginning some client work (http://dl.dropbox.com/u/133074/Medical%20Futures/index.html) and I would like for the header to drop down when a navigation link is clicked on – so the page is filled with purple and the content for that specific page appears.

    I assume this is possible? How difficult would this be to achieve?

    Thanks,

    Edit: I’d like the pages to look something like this: http://dl.dropbox.com/u/133074/Medical%20Futures/about.html – so the purple bar drops down when the page is clicked (without the browser refreshing) and this appears

    # August 21, 2012 at 7:08 pm

    bump

    # August 21, 2012 at 11:52 pm
    #dropdown {
    display: none;
    }
    $('#link').click(function(){
    $('#dropdown').html('whatever you want to do');
    $('#dropdown').slideDown();
    });

    Something like that?

    # August 22, 2012 at 1:14 pm

    I wonder if this codepen might help you…http://codepen.io/mmoustafa/pen/lBwhv

    # August 23, 2012 at 6:42 am

    Both of these examples would require the content to be hidden on one page – any way of doing it so actual pages appear instead of hidden divs. It’s a fairly big website so having all the content on one page would slow the site right down

    # August 23, 2012 at 7:08 am

    Just have the content inside the hidden div, I’m not sure what you’re looking for.

    # August 23, 2012 at 11:31 am

    I don’t think you would be able to do that without something in PHP or the like. Separate pages = new HTTP request = refresh, if I’m not mistaken.

    # August 24, 2012 at 8:09 am

    I’ve achieved pulling pages without refreshing with the content pages http://darynjohnson.com/Medical%20Futures/the-judges.php – I would just like some sort of transition between the home page and content pages without the page loading (such as the header pulling down for example)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".