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

    Mar 3, 2010
    Land of Enchantment
    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 68020

    Apr 17, 2012
    Destin, FL
    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:
    <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