Существует достаточно обширный список скриптов, которые могут помочь веб-дизайнеру в реализации его идей и поставленных задач. Веб-дизайнер должен иметь в своём арсенале скрипты для различных целей. Так и я привёл пример скриптов, которые использую я лично:

1. Многоуровневое меню

Живой пример:

1. Скачать jquery.js, распаковать и переместить его в корневой каталог сайта.
2. Поместить этот код в HTML, между ‹HEAD› и ‹/HEAD›.
3. Поместить этот код в HTML, в то место где вы хотите увидеть меню.

<div id="menu">
<h6><a class="cl" href="вашассылка.html">Ссылка 1</a></h2>
<h6><a class="cl" href="вашассылка.html">Ссылка 2</a></h2>
<h6><a class="cl" href="вашассылка.html">Ссылка 3</a></h2>
<h6><a class="acl" onclick="$('#aiv').slideToggle('fast');" href="javascript://">Выпадающая ссылка 1</a></h2>
<div id="aiv" style="display:none">
<div class="ags">
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a>
</div>
</div>
<h6><a class="acl" onclick="$('#av').slideToggle('fast');" href="javascript://">Выпадающая ссылка 2</a></h2>
<div id="av" style="display:none">
<div class="ags">
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a><br>
<a href="вашассылка.html">Ссылка</a>
</div>
</div>
<h6><a class="cl" href="вашассылка.html">Ссылка 4</a></h2>
</div>

4. Поместить этот код в CSS.
5. Радоваться!

2. Горизантальное меню

Живой пример:

1. Поместить этот код в HTML, в то место где вы хотите увидеть меню.
2. Поместить этот код в CSS.
3. Радоваться!

3. Прокрутка вверх страницы

Живой пример можете наблюдать немного левее.

1. Скачать jquery.js или jquerymin.js, распаковать и переместить их в корневой каталог сайта.
2. Поместить этот код в HTML, между ‹HEAD› и ‹/HEAD›.
3. Поместить этот код в HTML, между ‹BODY› и ‹/BODY›.
4. Поместить этот код в CSS.
5. Радоваться!

4. Увеличение/уменьшение шрифта

Живой пример можете наблюдать в правом верхнем углу.

1. Поместить этот код в HTML, между ‹HEAD› и ‹/HEAD›.
2. Поместить этот код в HTML, в то место где вы хотите увидеть этот чудесный скрипт.
3. Радоваться!

5. Плавное разворачиание области

Живой пример:

Кликни меня

1. Скачать jquery.js, распаковать и переместить его в корневой каталог сайта.
2. Поместить этот код в HTML, между ‹HEAD› и ‹/HEAD›.
3. Поместить этот код в HTML, в то место где вы хотите увидеть этот скрипт.
4. Радоваться!

6. CSS ленты

Живой пример:

Супер-пупер текст

1. Поместить этот код в HTML, в то место где вы хотите увидеть этот чудесный скрипт.
2. Поместить этот код в CSS.

h1{
    text-align: center;
    position: relative;
    color: #fff;
    margin: 0 -30px 30px -30px;
    padding: 10px 0;
    text-shadow: 0 1px rgba(0,0,0,.8);
    background: #5c5c5c;
    background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 0 rgba(0,0,0,.3);
}

h1:before, h1:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
    bottom: -10px;
}

h1:before
{
    border-width: 0 10px 10px 0;
    border-right-color: #222;
    left: 0;
}

h1:after
{
    border-width: 0 0 10px 10px;
    border-left-color: #222;
    right: 0;
}

3. Радоваться!