Выпадающий список (select) - замена навигации

2011-03-09 | Веб-дизайн

Select

В случае, если у вас на сайте количество категорий или архивов уже перевалило за 20, и этот список занимает почти всю полезную площадь сайдбара, вы попали на правильную страницу.
Б этой статье я расскажу как намного уменьшить, занимаемое ими в сайдбаре место с помошью выпадающего списка select и javascript.

А таким образом освободившееся в сайдбаре место вы сможете использовать более рационально, для размещения еще какой-нибудь полезной информации или оплаченной спонсорами рекламы.

Самый простой, стандартный выпадающий список.

<form action="../"><select onchange="window.open(this.options[this.selectedIndex].value,'_top')"><option value="" selected="selected">Выберите рубрику</option><option value="http://seodiz.ru/seo/" title="Seo  и продвижение">Seo  и продвижение</option><option value="http://seodiz.ru/dizain/" title="Дизайн и верстка">Дизайн и верстка</option><option value="http://seodiz.ru/money/" title="Заработок и монетизация">Заработок и монетизация</option><option value="http://seodiz.ru/news/" title="Разные новости">Разные новости</option><option value="http://seodiz.ru/projects/" title="Мои проэкты">Мои проэкты</option></select></form>

Можно использовать для вывода списка категорий, архивов, меток и т.д. Переход на выбранную из списка страницу происходит с помощью javascript по событию onchange.

Выпадающий список с кнопкой.

<form action="../"><select name="navigation"><option selected="selected" value="http://seodiz.ru/seo/">Seo  и продвижение</option><option value="http://seodiz.ru/dizain/">Дизайн и верстка</option><option value="http://seodiz.ru/money/">Заработок и монетизация</option><option value="http://seodiz.ru/news/">Разные новости</option><option value="http://seodiz.ru/projects/">Мои проэкты</option></select><input type="button" value="GO!" onclick="ob=this.form.navigation;window.open(ob.options[ob.selectedIndex].value)"/></form>

Этот выпадающий список похож на первый с одной единственной разницей - переход на выбранную из списка страницу происходит только при нажатии кнопки "GO!".

Еще полезно знать, что с помошью аттрибута size можно задать число видимых элементов списка в любом из этих примеров.

...<select size="3">...</select>...

Простой и легкий код, минимальное использование javascript, компактность и то, что select поддерживается всеми распространенными браузерами является причиной популярности и частого использования этих выпадающих списков для создания навигации на сайтах.

Статьи по теме:

Комментарии к записи

RSS

Рекомендую
  1. WEBHOST1 - проверенный недорогой хостинг для сайта с PHP и MYSQL.
  2. LOGASTER - генератор логотипов и фавиконок с поддержкой кириллицы.
  3. QComment - наполнение сайтов комментариями и заработок на отзывах.
Категории

Как создать:

Где найти:

Как заработать:

© 2011-2016 «Сеодиз». Создание сайтов и заработок для начинающих.
Копирование запрещено.