The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Header pull down

  • # August 21, 2012 at 7:41 am


    Okay I am beginning some client work ( 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?


    Edit: I’d like the pages to look something like this: – 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

    This reply has been reported for inappropriate content.


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

    Something like that?

    # August 22, 2012 at 1:14 pm

    I wonder if this codepen might help you…

    # August 23, 2012 at 6:42 am

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    I’ve achieved pulling pages without refreshing with the content pages – 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed