Скрипты для сайта
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
Меню сайта
Теги HTML
Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим
CSS
Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы
Реклама
Зарабатываю на smmka.ru
Все для сайта
Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Выпадающее меню





Навигация по сайту



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

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

Существует кнопка, которая создает вид меню и его разделов. (Пример написания в листинге 7.0) Заполнять эту форму нужно следующим образом:

  • option - задает начало каждого раздела.
  • selected - имя выпадающего списка (его тема).
  • value - указывает на адрес страницы, который надо вписать между ковычек.
  • имя страницы - имя документа, ссылающейся на этот url.
  • title - индексация документа по этому имени, пишут два раза - в ковычках и между скобок.
  • . . . - не обязательно указывать url документа.



  • Листинг 7.0



    <form action="../">
    <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option =". . . " selected="selected">Имя списка</option>
    <option value="url" title="Имя страницы">Имя страницы</option>
    <option value="url" title="Имя страницы">Имя страницы</option>
    <option value="url" title="Имя страницы">Имя страницы</option></select></form>


    Результат:




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

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

    Давайте попробуем создать такое меню. (Листинг 7.1) Меню у нас будет самым эллементарным. На следующей страницы мы с вами будем рассматривать больлее сложные примеры горинтального и вертикального навигационноного меню. Надеюсь, каждый из вас уже определился с тематикой сайта, ведь ссылки должны куда-то вести. Не интересный контент и плохая навигация - первый признак, что ваш сайт потерпит крах. Особенно это касается тех, кто в будущем хочет на нем зарабатывать.


    Листинг 7.1



    <div class="uSpoilerClosed" id="uSpoilerGvK0S4">
    <div class="uSpoilerButBl"><input type="button" class="uSpoilerButton"
    onclick="if($('#uSpoilerGvK0S4')[0]){if ($('.uSpoilerText',$('#uSpoilerGvK0S4'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoilerGvK0S4'))[0].
    style.display='';$('.uSpoilerButton',$('#uSpoilerGvK0S4')).val('[\–] НАЗВАНИЕ');
    $('#uSpoilerGvK0S4').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoilerGvK0S4'))
    [0].style.display='none';$('.uSpoilerButton',$('#uSpoilerGvK0S4')).val('[+] НАЗВАНИЕ');
    $('#uSpoilerGvK0S4').attr('class','uSpoilerClosed');}}" value="[+]
    НАЗВАНИЕ"></div> <div class="uSpoilerText" style="display:none;"></div></div>


    Результат:




    Нажмите еще раз на кнопку и посмотрите, что у нас получилось? Как уже говорилось выше, сайты содержащие контент из аудио и вио роликов, имеют существенный недостаток:

  • файлы на Web-странице занимают большую ее часть.
  • при прокрутке материалов, пользователь не доходит до нужного.
  • отсутствие наличия группы "категории файлов", значительно осложняет поис по сайту.


  • Такая маленькая кнопочка может вместить в себя видео, что значительно сэкономит место на вашей странице. При просмотре Web-страницы, отображаться будет только она, до щелчка по ней. После чего она развернет перед вами вложенное для просмотра видео. Готово!
    По желанию можно сделать сайт, содержащий встроенное видео в эти кнопки. Что позволяем уместить на одной странице гораздо больше информации, чем обычно вставленного плеера.

    Если обратить внимание на листинг, то в нем не прописан код плеера видио. Он указан чуть ниже. Для более удачного примера, видео было вложено заранее. Вставить код нужно в самом коце листига, перед закравающими </div> и написать название вложенного файла. Как мы уже поняли, что к такой кнопочке можно подключить скрытое мультимедия, тогда чтобы создавать внутри нее списки и меню нам особого труда не составит!

    Код плеера


    Для начала попробуем на самом незначительном списке. Этот список не имеет ссылок. Он самое, что ни есть - обычный список с прокруткой. В приведенном примере он кажется маленьким, узким. Ширину и длину списка создаете вы сами. Ширина зависит от самого длинного слово в перечне, длина - от количества слов в списке.


    Листинг 7.2



    <select multiple=""><option>Select</option>
    <option>Textarea</option>
    <option>Label</option>
    <option>Fieldset</option>
    <option>Legend</option>
    </select>



    Результат:




    Вы можете попробовать выбрать из данного списка сразу несколько строк, удерживая клавиши Ctrl и Shift. Еще один атрибут size тега select, который устанавливает высоту выпадающего списка, то есть количество строк, которые будут отображаться. Надо сказать, что различные браузеры по-разному реагируют на этот атрибут. Например, Google Chrome его совсем игнорирует, а Firefox устанавливает высоту списка, равной его значению (при size="1” будет отображаться 1 элемент).



    <select required=""><option></option>
    <option value="1">Option</option>
    <option value="2">Textarea</option>
    <option value="3">Label</option>
    <option value="4">Fieldset</option>
    <option value="5">Legend</option></select>
    <input type="submit" value="Отправить">



    Результат:

    Заработай сейчас!
    Заработай сейчас
    Навигация по сайту






    Поиск по сайту

    Друзья сайта
    Самоучитель html
    Все для веб-мастера
    Музыка для души
    Мир развлечений
    Скачать кино бесплатно!
    Видеоклипы online
    Хостинг от uCoz
    Avon
    Присоединяйтесь
    к   Avon
    img