Сайт полной ширины

Question

Мне было интересно, может ли кто-нибудь помочь мне выяснить, какие технические требования или кто-нибудь есть примеры того, как сделать такой сайт: Full width accordion Я пытаюсь создать сайт для портфолио, который выглядит несколько подобный это. Любой вход оценивается

Спасибо!

Answer 1

Эффект аккордеона может быть достигнут, хотя и будет скрываться и показывать элементы.

Например, вы можете использовать jQuery и slideToggle на элементе аккордеона с щелчком, а затем slideUp на всех других элементах аккордеона для достижения довольно простого и приятного эффекта. Добавьте в некоторый css или javascript, чтобы его размер был в высоту экрана, а затем используйте javascript для прокрутки, и вы в значительной степени сделали это.

Также обратите внимание на то, что этот сайт использует ajax, чтобы загружать файлы динамически, вместо того чтобы иметь все это на одной странице. Это значительно уменьшает размер сайта и может ускорить начальную загрузку за счет загрузки каждой панели аккордеона при их открытии.

Вот действительно простой пример, который я бросил вместе. Она не делает Ajax загрузки, но это дает эффект аккордеона: https://jsfiddle.net/uw9gaep2/

HTML для одной из панелей (вы хотите установить content дел до display:none с помощью CSS или тега стиля):

<div class="pane"> 
    <div class="title"> 
    Thing 1 
    </div> 
    <div class="content"> 
    blahblah 
    </div> 
</div> 

JQuery:

$('.title').on('click', function() { 
    // Save the content and title to vars 
    var $title = $(this); 
    var $content = $title.next('.content'); 

    // Slide toggle the one we want 
    $content.slideToggle('fast', function() { 
    // Once it's done scroll to the title (http://stackoverflow.com/a/6677069/1687909) 
    $('html, body').animate({ 
     scrollTop: $title.offset().top 
    }, 200); 
    }); 

    // Slide up all the other ones 
    $('.content').not($content).slideUp('fast'); 
}); 

Answer 2

Я сделал демо, демонстрирующий, как можно достичь что-то подобное с начальной загрузки, некоторые javascript, и немного CSS:

jsfiddle demo

$('a[data-toggle="collapse"]').on('click', function() { 
    var $target, 
     offset; 

    if ($(this).closest('.panel').prev().find('.panel-collapse').hasClass('in')) { 
     $target = $(this).closest('.panel').prev().find('a[data-toggle="collapse"]'); 
     offset = 0; 
    } else { 
     $target = $(this); 
     offset = 36; 
    } 

    $('html, body').animate({ 
     scrollTop: $target.position().top - offset 
    }); 
}); 

CSS (по привычке это Сасс/SCSS):

.panel-group { 
    margin-bottom: 0; 

    .panel { 
    border-radius: 0; 

    &+.panel { 
     margin-top: 0; 
    } 

    &-body { 
     height: calc(100vh - 90px); 
    } 
    } 
} 

.panel-default { 
    & > .panel-heading { 
    height: 36px; 
    } 
} 

.jumbotron { 
    //background-image: url(http://lorempixel.com/800/600); 
    background-color: #333; 
    background-position: center center; 
    background-size: cover; 
    margin-bottom: 0; 
    height: 100vh; 
} 

Что выделились мне о сайте вы связаны не была его полная ширина природа, которая легко выполнить, а скорее его полноразмерный характер, который немного сложнее. Обратите внимание на мое использование calc() и vh в CSS для достижения эффекта. Это еще не совсем (проблема при изменении размера окна вверх/вниз), но в качестве отправной точки это может сработать.