Posted on By seodiz_baza_

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

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

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

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

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

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

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

<form action="../"><select name="navigation"><option selected="selected" value="https://seodiz.ru/seo/">Seo  и продвижение</option><option value="https://seodiz.ru/dizain/">Дизайн и верстка</option><option value="https://seodiz.ru/money/">Заработок и монетизация</option><option value="https://seodiz.ru/news/">Разные новости</option><option value="https://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 поддерживается всеми распространенными браузерами является причиной популярности и частого использования этих выпадающих списков для создания навигации на сайтах.

Читайте также: javascript