Иногда требуется создать для небольшой компании одностраничный сайт визитку, который сочетал бы в себе простоту, элегантность и функциональность. С помощью jQuery и типографики можно сделать отличный шаблон, содержащий всю нужную информацию в компактном виде и разворачивающий пункты меню только за счет манипуляции стилями CSS.

Заголовок
Заголовок содержит только название компании, которое написано огромным шрифтом. Он состоит из двух строк:

<div id="header">
    <div class="head1">RUSELLER</div>
    <div class="head2">COM&COPY;</div>
</div>

Для заголовка используются следующие стили CSS:

#header {
    height: 100px;
    font-size: 192px;
    color: #333;
    letter-spacing: -18px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.head1 {
    position: relative;
    top: -40px;
    left:-15px;
}
.head2 {
    position: relative;
    top: -120px;
    left: -15px;
}

Содержание
Содержание страницы представляет собой основную навигацию и детальную информацию по каждому пункту.

<div id="nav">
    <a href="" class="nav1"><span>+</span> услуги</a>
    <div class="subnav">
        <a href="#" class="nav2 services">Услуга 1</a>
        ...
    </div>
    <a href="" class="nav1"><span>+</span> клиенты</a>
    <div class="subnav">
        <a href="#" class="nav2 clients">Блогеры</a>
        ...
    </div>
    <a href="" class="nav1"><span>+</span> о нас</a>
    <div class="subnav">
        ...
        <a href="" class="nav2 about" id="amethodology">Методы</a>
        <div id="p-about">
            ...
            <p id="a-methodology">
                Требования &rarr; Проектирование &rarr; Макет интерфейса &rarr; Реализация &rarr; Запуск
            </p>
        </div>
    </div>
    <a href="" class="nav1"><span>+</span> контакты</a>
    <div class="subnav">
        <div id="c-contact">
            <p class="con">
                <label>Приходите к нам в офис</label>
                : Central Boulevard Los Gdetotamos
            </p>
            <div class="clear"></div>
            ...
        </div>
    </div>
    <a href="" class="nav1"><span>+</span> блог</a>
    <div class="subnav">
        <a href="#" class="nav2 blog">Запись 1</a>
        ...
    </div>
</div>

C помощью функций jQuery slideUp и slideDown элементы скрываются и выводятся. Также изменяются стили CSS в соответствии с нажатой ссылкой.

$(document).ready(function() {
    $("#nav .nav1").click(function() {
        if (!$(this).next().is(":visible")) {
            $(this).find("span").html('–');
            $(this).next().slideDown('fast');
        }
        else {
            $(this).find("span").html('+');
            $(this).next().slideUp('fast');
        }
        return false;
    });
 
    $(".about").click(function() {
        $(this).css("color", "#ff4040");
        $(this).siblings().css("color", "#999");
 
        var id = "a-"+$(this).attr("id").replace("a", "");
 
        $("#p-about").show();
        $("#"+id).slideDown('fast');
        $("#"+id).siblings().slideUp('fast');
        return false;
    });
});

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

Добавлено: 27 Апреля 2018 06:32:00 Добавил: Андрей Ковальчук Нравится 0

Добавить