Build site with content sliding in, static header etc

Discussion in 'Web Design and Development' started by jmiddel, Dec 2, 2015.

  1. jmiddel macrumors member

    Joined:
    Mar 3, 2010
    Location:
    Land of Enchantment
    #1
    Site has header, nav, main-div and footer. I want main-divs of pages 1-7 with all their content to slide in from left/right depending on their position in the nav bar, while the other elements stay put. I've googled this for hours, but just get slide shows and other not relevant stuff. Must be missing the right term for this.

    Thank you!
     
  2. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    SPA ( single page application ) is what you are looking for. But if you are asking questions about it on an Apple forum it may be a little beyond your current programming capabilities.

    You could do exactly what you are looking to do with just a little javascript as well, but it will not be an optimized solution without using some AJAX ( hence the SPA recommendation ).

    Build your site with a div for each content:
    Code:
    <div id='nav-item-1'>Page Stuff goes here</div>
    <div id='nav-item-2'>More page stuff</div>
    Hide every div using CSS ( display: none; ) except for the 'Home' page.

    Then as users click nav items, capture the click using javascript and 'slide' the div in from the left or right.

    Good luck and post us a link in JSFiddle when you have trouble or have solved it!
     

Share This Page