Спросите SM: Как создать красочный сайта с JQuery?

Нам нравится экспериментировать с новыми идеями и концепциями.Мы хотели, чтобы бросить вызов самим себе и предоставить нашим читателям с новыми форматами.Это сообщение является первым в нашей “ Задать Smashing Magazine” series, в которых известные разработчики из сообщества ответа веб-дизайн наших readers’ вопросы и предложить решения общих problems.

Сегодня мы рады приветствовать Chris Coyier, которые вы знаете из своих статей о CSS-Tricks, на наш Smashing Редакция журнала.Отныне, Крис будет регулярно отвечать на ваши CSS и JQuery вопросы, связанные с настоящим и ответы на наиболее интересные, полезные и оригинальные в своих статьях на Smashing Magazine.Добро пожаловать, Крис

Конечно, вы можете отправить любое CSS и JQuery связанных вопрос, который вы хотите.Чтобы задать вопрос, Вы можете сделать любое из следующих действий:

Отправить письмо Криса на задать [в] SmashingMagazine [точка] com с вашим вопросом,
Задайте свой вопрос в нашем forum, Вам необходимо регистрации (да, форум официально не запущен, но она работает!),
Или, если у вас есть быстрый вопрос, просто твит нас @ smashingmag или @ chriscoyier с тегом “ [Задать SM] ”.

Пожалуйста, обратите внимание: Крис будет делать то, что он может ответить на большинство вопросов, но он, конечно, не сможет ответить на все из них.Тем не менее, мы надеемся, что наш форум может помочь вам решить вашу проблему в случае Криса couldn’ T поможет вам out.

Как спроектировать Красочные сайта с помощью CSS и JQuery

Let’ начнем с первого вопроса от одного из наших читателей:

“ Мне было предложено создать карту сайта для нашего нового корпоративного проекта, но я wasn’ T смог найти хорошие учебники в Интернете.Не могли бы вы мне помочь?Мы ищем хорошо организованные, чистые и красочные карты сайта с динамическими эффектами (JQuery основе, если это возможно) ”.

Мартин Tortier

Chris Coyier ответов:

Содержание тяжелых веб-сайтов с глубоким навигационной структуры могут извлечь выгоду из sitemaps.Карта сайта содержит ссылки на все важные страницы на веб-сайт, как правило, визуально организованы в иерархии.Как правило, они не должны были открытия и закрытия механизмов для отображения иерархии.Если вы заставляете кого-то нажмите кнопку пять раз, чтобы развернуть на то, что они ищут, то есть “ навигации, ” Не Карта сайта, и isn’ T очень полезным.Имея все ссылки видны сразу идеально подходит для людей, которые ищут страница за то, что они ищут.Правда, хотя, визуально просматривать большие и глубокие карта может стать запутанным quickly.

В этом демо статье, мы будем строить визуально интересным сайта, что делаетИерархия четкое помощью color.

Просмотреть Demo | Скачать Files

Семантический HTML Markup

Совершенный HTML структура сайта является неупорядоченный список (< ul>) элемент.Каждый список представляет собой один слой иерархии.Мы можем гнездо списков внутри других списков, чтобы построить вниз и завершить Карта сайта hierarchy.

Мы будем использовать типичный университета в качестве примера.Университет сайтах часто уродства содержания, со страницами, начиная от информации о кампусе и приема в спортивной научной работы для выпускников фондов.Let’ посмотрим на некоторые чистые неупорядоченный-лист markup.

 <ul>
  <li>
    <a href="#">Visiting Campus</a>
    <ul>
      <li>
        <a href="#">Tours</a>
        <ul>
          <li><a href="#">Undergraduate</a></li>
          <li>
            <a href="#">Walking</a>
            <ul>
              <li><a href="#">Guided</a></li>
              <li><a href="#">Unguided</a></li>
            </ul> <!-- END Walking -->
          </li>
          <li><a href="#">Group</a></li>
          <li><a href="#">Field Trips</a></li>
        </ul> <!-- END Tours -->
      </li>
      <li><a href="#">Campus Map</a></li>
      <li><a href="#">Events Calendar</a></li>
      <li>
        <a href="#">Athletics</a>
        <ul>
          <li><a href="#">Football</a></li>
          <li><a href="#">Baseball</a></li>
          <li><a href="#">Soccer</a></li>
          <li><a href="#">Volleyball</a></li>
        </ul> <!-- END Athletics -->
      </li>
      <li><a href="#">Arts</a></li>
      <li><a href="#">Science</a></li>
      <li><a href="#">Hospital</a></li>
    </ul> <!-- END Visiting Campus -->
  </li>
  <li><a href="#">Admissions</a></li>
  <li><a href="#">Student Life</a></li>
  <li><a href="#">Academics</a></li>
  <li><a href="#">International</a></li>
  <li><a href="#">Research</a></li>
</ul>

Эта разметка, все само собой и совершенно без стилей, служит вполне полезная sitemap.

example

Стилизации с CSS

Некоторые очень простой CSS будет иметь это скучно ol’ список spiffed в кратчайшие сроки.Отступы каждого ребенка списка, так же, как браузер по умолчанию, имеет смысл для установления иерархии.We’ буду держать эту идею, но дом каждого списка в своем собственном окне.We’ VL тень на фоне коробок в оттенках серого, от темного серого на “ base” части страницы (или самый высокий уровень в иерархии) для легкой сединой на “ top” (или низкий уровень в иерархии.)

ul                { padding: 8px 25px; list-style: none;
                    background: #282828; }
ul ul             { background: #393939; }
ul ul ul          { background: #4b4b4b; }
ul ul ul ul       { background: #5a5a5a; }

Конечно, мы уже выполнили основную сброс CSS, установить некоторые основные типографии и применяются некоторые фоновые изображения для дополнительного spiffiness.Вы можете Ознакомиться с полной CSS если вы хотите, чтобы увидеть его в полном объеме.Вот что мы имеем на данный момент:

example

Бонус CSS для WebKit Browsers

Наши эффект начинает выглядеть как коробки укладываются на ящики.За несколько прогрессивного улучшения, мы можем опираться на это смотреть с CSS3 окно тень собственности.В настоящее время только WebKit-браузеры поддерживают эту функцию с фирменной расширения, но это работает!Чтобы создать этот эффект, добавьте в CSS:

ul { -webkit-box-shadow: 2px 2px 5px black; }

example
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 22.01.2009 by Newsbot