Создаем простой одностраничный сайт-визитку с помощью jQuery

Иногда требуется создать для небольшой компании одностраничный сайт визитку, который сочетал бы в себе простоту, элегантность и функциональность. С помощью 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('&ndash;');
            $(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;
    });
});

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/8cz5ad2yTbk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Создаем простой одностраничный сайт-визитку с помощью jQuery | | 2012-06-19 12:04:54 | | Статьи Web-мастеру | | Иногда требуется создать для небольшой компании одностраничный сайт визитку, который сочетал бы в себе простоту, элегантность и функциональность. С помощью jQuery и типографики можно сделать отличный | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: