[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

HTML/CSS выпадающие меню + JavaScript

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

Существует ли способ создать выпадающее меню, оставив все ссылки в формате HTML?

Да. Комбинация HTML/CSS и немного JavaScript дает возможность получить такое меню.
Реализуется эта задача с помощью неупорядоченного списка HTML, в котором каждая строка содержит свой встроенный список. Стили CSS управляют видимостью элементов и всей красотой, а JavaScript устраняет проблемы межбраузерного чтения. Работает данный код во всех браузерах, кроме Safari.
Поехали
Создаем список с разделами и подразделами меню.

<ul> <li><a href="#">Главная</a></li>
<li><a href="#">О Компании</a>
<ul>
<li><a href="#">История Компании</a></li>
<li><a href="#">Наши Содрудники</a></li>
<li><a href="#">Филиалы</a></li>
</ul>
</li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Продажа</a></li>
<li><a href="#">Консультации</a></li>
<li><a href="#">Поддержка</a></li>
<li><a href="#">Ремонт</a></li>
<li><a href="#">Обновление</a></li>
</ul>
</li>
<li><a href="#">Цены</a>
<ul>
<li><a href="#">Оптовые</a></li>
<li><a href="#">Розничные</a></li>
<li><a href="#">Скидки</a></li>
<li><a href="#">Бонусы</a></li>
</ul>
</li>
</ul>

Добавляем стили CSS

Для начала надо убрать идентификаторы строк списка list-style: none; и задать ширину списка

ul {
margin: 0;
padding: 0;
list-style: none;
width: 120px;
}

Затем задать относительную позицию для строк главного списка (чтобы внутренний список располагался относительно них) и способ расположения на экране - горизонтальный или вертикальный.

ul li {
position: relative;
/*display: inline; /*для горизонтального размещения раскомментируйте строку */
}

Потом задать стили CSS для подразделов. Display: none; - подразделы невидимы по умолчанию

li ul {
position: absolute;
left: 0px;/* расположение выпадающего списка от левой границы оcновного меню*/
top: 10px;/* расположение выпадающего списка сверху от оcновного меню*/
display: none;
}

Итак, список на месте, подразделы на месте, теперь надо задать стиль самим ссылкам. Здесь можно менять все, что хотите

a {
font-family: Verdana, Tahoma, serif;
font-size: 12px;
color: #003333;
text-decoration: none;
padding: 5px;
border: 1px solid #666666;
}

a:hover {
color: #CCCC00;
}

Вложенный список должен открываться под соответствующим разделом основного списка во всех браузерах, а для этого включите в CSS:

li > ul {
top: auto;
left: auto;
}

Все готово к последнему этапу создания выпадающего меню, а именно организации самого выпадения. Проверьте сначала действие свойства hover для элемента li в браузере NN или Opera

li:hover ul {
display: block;
}

Меню должно работать нормально. Теперь откройте его в IE. Не работает. Да, IE поддерживает hover только для ссылок. Проблему эту можно решить несколькими способами. Например, напишем небольшой скрипт, основанный на DOM. Всавьте в head страницы тег <script type="javascript"> со следующим содержанием,

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
   }
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
      }
     }
    }
   }
  }
window.onload=startList;

в CSS создайте класс, дублирующий li:hover, к которому обращается скрипт,

li.over ul { display:block;}

а в теле страницы элементу ul основного списка присвойте идентификатор, аналогичный тому, котрый Вы использовали при выборе элемента по id (GetElementById) в скрипте.

<ul id="nav">

Скрипт не очень хорош, но при желании можно найти код и по-лучше. В демонстрационных целях этот код вполне подойдет. В части 1 создание выпадающего меню целиком основывается на применении комбанации стилей CSS и HTML --- см. ссылку вверху страницы
Всё. Код готов к применению. Несколько слов о том, чего делать не надо. Не задавайте свойство top вложенного списка больше, чем высота основного списка; для создания пробела между основным и вложенным списком применяйте пустую строку списка. Все остальное можно форматировать по Вашему вкусу.



Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 3444 сегодня - 1

История про CSS (часть II)
05-01-2010   

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

Кол. просмотров: общее - 3420 сегодня - 2

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 3273 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 3284 сегодня - 2

Сокращенные команды в CSS
05-01-2010   

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

Кол. просмотров: общее - 4062 сегодня - 4



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects