Видоизменённый быстрый переход между разделами форума (с) Romych

Код:
<form id="qjump" method="get" action="viewforum.php">
<div><label>Быстрый переход по форумам
<br /><select name="id" onchange="window.location=('viewforum.php?id='+this.options[this.selectedIndex].value)">
<optgroup label="Первая">
<option value="8">Новости</option>
<option value="1">+Музыкальный форум</option>
<option value="2">&nbsp; &nbsp; - Тяжелая музыка</option>
<option value="3">&nbsp; &nbsp; - Попса</option>
</optgroup>
<optgroup label="Другая категория">
<option value="4">Спортивный форум</option>
<option value="5">+Форум для всей семьи</option>
<option value="9">&nbsp; &nbsp; - Мамочкам</option>
<option value="7">&nbsp; &nbsp; - Папочкам</option>
<option value="10">&nbsp; &nbsp; - Дети цветы жизни</option>
</optgroup>
</select>
<input type="submit" value=" Вперёд " accesskey="g" />
</label></div>
</form>

как видите в таком варианте не обязательно вставлять полную ссылку (http://forum.mybb.ru/viewforum.php?id=8) на нужный форум, достаточно вставлять лишь id форума (id=8),
значит <option value="8">
атрибут label у нас используется для обозначения категорий форума,  например <optgroup label="Ролевая">
так же можно выделить подфорумы в списке (в виде вложенностей)
Для этого желательно использовать знак "+" и "-".
Если вы делаете ссылки на разные документы одного и того же сайта, то можно не писать каждый раз "http://....", а просто подставлять переменную с этим текстом.
Например:

<option value="1">+ Страница 1</option>
<option value="1_1">&nbsp; &nbsp; - Страница 1_1</option>
<option value="1_2">&nbsp; &nbsp; - Страница 1_2</option>
<option value="1_3">&nbsp; &nbsp; - Страница 1_3</option>
<option value="1_4">&nbsp; &nbsp; - Страница 1_4</option>

или так (для ясности):

<option value="5">+Форум для всей семьи</option>
          <option value="9">&nbsp; &nbsp; - Мамочкам</option>
          <option value="7">&nbsp; &nbsp; - Папочкам</option>
          <option value="10">&nbsp; &nbsp; - Дети цветы жизни</option>

Теперь приукрасим этот выпадающий список:
Обычно он выглядит так:
http://forumd.ru/uploads/0007/e3/f7/60054-4-f.jpg
блёкло, при этом нет никакой плавности появления списка
исправить ситуацию можно с помощью фреймворка jquery и плагина к нему
для тех у кого он ещё не установлен в html-верх:

Код:
<script type="text/javascript" src="http://help4us.ru/include/js/jquery.js"></script>

затем заливаем остальную часть скрипта.
html-верх:

Код:
<script language="javascript" src="http://jquery.sanchezsalvador.com/Scripts/jquery.combobox.js"></script>

    <style type="text/css">
    .comboboxContainer
    {border-left: solid 2px #777;
    border-top: solid 2px #777;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;}
    .comboboxValueContainer
    {background: url(http://s53.radikal.ru/i141/1001/7a/5bc0c35c4661.gif) repeat-x left top;}
    .comboboxValueContent
    {padding-left: 3px;
    text-transform: uppercase;
    cursor: pointer;}
    .comboboxDropDownContainer
    {border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    border-left: solid 1px #aaa;
    border-top: solid 1px #aaa;
    background: #fff;
    overflow: hidden;
    padding-left: 3px;
    width: 250px;
    cursor: pointer;}
    .comboboxDropDownButton
    {width: 16px;
    height: 18px;
    background-image: url(http://s001.radikal.ru/i193/1001/46/6cd53748e2ee.gif);}
    .comboboxGroupItemHeader
    {display: block;
    background: #99cccc;
    color: #000;
    font-family: Impact;}
    .comboboxGroupItemContainer
    {padding-left: 10px;}
    .comboboxItem
    {background: #fff;
    color: #000;
    text-transform: lowercase;
    font-weight: normal;
    font-style: normal;}
    .comboboxItemHover
    {background-color: #999;
    color: #fff;
    text-transform: uppercase;
    padding-left: 4px;}
    </style>

в html-низ:

Код:
    <script type="text/javascript">
    $('#qjump select').combobox(
       {
         comboboxContainerClass: "comboboxContainer",
         comboboxValueContainerClass: "comboboxValueContainer",
         comboboxValueContentClass: "comboboxValueContent",
         comboboxDropDownClass: "comboboxDropDownContainer",
         comboboxDropDownButtonClass: "comboboxDropDownButton",
         comboboxDropDownItemClass: "comboboxItem",
         comboboxDropDownItemHoverClass: "comboboxItemHover",
         comboboxDropDownGroupItemHeaderClass: "comboboxGroupItemHeader",
         comboboxDropDownGroupItemContainerClass: "comboboxGroupItemContainer",
         animationType: "slide",
         width: "200px"
       });
    </script>

в итоге, что мы получаем можно посмотреть Здесь (внизу)
в самом низу форма быстрого перехода.