Вертикальное навигационное меню Ормана Кларка: версия от CSS3

Вертикальное навигационное меню Ормана Кларка

От автора: следующее в серии кодированных Орманом Кларком (Orman Clark) PSD – его потрясающее Вертикальное навигационное меню. Мы воссоздадим его с помощью CSS3 и jQuery, используя минимально возможное количество изображений.

Единственные изображения, которые мы применим – для иконок; с помощью нового инструмента под названием SpriteRight я создам спрайт, но это необязательно. Дополнительно для создания градиентов CSS3 я использую GradientApp, но это тоже необязательно.

Детали учебника

Раздел: CSS3

Сложность: Средняя

Примерное время выполнения: 45 минут

Дополнительные требования: SpriteRight или GradientApp (необязательно)

скачать исходникидемо

Шаг 1: Основная разметка HTML

Давайте начнём с добавления основной разметки в пустой документ HTML5:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
         
        <title>Vertical Navigation Menu: CSS3 Coded</title>
         
        <link rel="stylesheet" href="css/styles.css">
         
    </head>
<body>
 
</body>
</html>

А теперь разметка нашего меню: неупорядоченный список внутри контейнера- упаковщика.

<div id="wrapper">
 
    <ul class="menu">
        <li class="item1"><a href="#">Friends <span>340</span></a></li>
        <li class="item2"><a href="#">Videos <span>147</span></a></li>
        <li class="item3"><a href="#">Galleries <span>340</span></a></li>
        <li class="item4"><a href="#">Podcasts <span>222</span></a></li>
        <li class="item5"><a href="#">Robots <span>16</span></a></li>
    </ul>
 
</div>

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

<div id="wrapper">
 
    <ul class="menu">
        <li class="item1"><a href="#">Friends <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item2"><a href="#">Videos <span>147</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item3"><a href="#">Galleries <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item4"><a href="#">Podcasts <span>222</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item5"><a href="#">Robots <span>16</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
    </ul>
 
</div>

Да, возможно, покажется слишком много, но пусть это вас не смущает. Сначала мы создали неупорядоченный список из пяти элементов, каждый с тегом-привязкой внутри. Затем добавили вложенные неупорядоченные списки, каждый из которых состоит из трёх элементов.

Я также добавил каждому элементу списка класс, позже это облегчит работу со стилями. Наконец, для чисел мы создали тег внутри каждого тега-привязки. Если посмотреть через браузер, это должно выглядеть так:

Шаг 2: «Подвижный» шрифт

Сначала убедимся, что наше меню правильно отображается. Добавьте в css/styles.css эти правила, они установят поля и отступ для всех ul на 0 и удалят стиль списка.

ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

Перед назначением стилей нашему меню давайте создадим упаковщик с фиксированной шириной и размером шрифта 13px (выраженном в em). Сначала добавим правило font-size:100%; для body. Это гарантирует, что стили будут основаны на размерах шрифта по умолчанию для браузера (обычно 16px).

Теперь объясню, как работает упаковщик размера шрифта. Нам нужно выразить его как em – пропорционально размеру шрифта его родительского элемента. Нам нужен размер 13px, так, если родительский размер — 16px, наш конечный em получится: 13 / 16 = 0.8125. 13px это 0.8125*16px.

Измеряя шрифты (и прочие элементы) в единицах em, мы делаем их «подвижными». Теперь, если изменить размер шрифта упаковщика (или его значение по умолчанию в браузере), то в зависимости от этого подстроится все меню. Пусть это вас не смущает: если потребуется помощь с конвертированием шрифтов, советую вам посетить сайт pxtoem.com.

body {
    font-size: 100%;
}
a {
    text-decoration: none;
}
ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper { 
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}

Мы назначили упаковщику фиксированную ширину в 220px и отцентрировали его с небольшим верхним полем, добавив margin:100px auto;.

Шаг 3: CSS главного меню

Далее добавим меню несколько стилей. Установим ширину и высоту ul меню на auto, затем применим к нему тень. Установив высоту на auto, мы добьёмся того, что при открытии слайдера тень станет подстраиваться.

Затем тэги-привязки; мы добавим ширину в 100%, это значит, что они будут растягиваться до 220px – ширины упаковщика. Для высоты применим em’ы – значит, вернёмся к основному размеру шрифта 13px. Наш .psd показывает высоту 36px и является нашей целью. Возьмём 36, разделим на 13, получится примерно 2.75em (36 / 13 = 2.76923077). Кроме того, для высоты строки (чтобы выровнять весь текст по вертикали) возьмем 2.75em, затем применим текстовый отступ, чтобы отодвинуть текст, оставив немного места для будущей иконки.

Добавим в фон градиент CSS3, я создал его с помощью GradientApp. Затем изменим шрифт, применив Helvetica Neue и белый цвет наряду с текстовой тенью. Отметьте, что здесь мы не использовали размер шрифта. Это оттого, что основной шрифт упаковщика — 13px, и его унаследовали наши привязки, так что нет нужды его добавлять.

body {
    font-size: 100%;
}
a {
    text-decoration: none;
}
ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper { 
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}

Так! Теперь все уже смотрится получше, а еще у нас появилась структура! А как насчёт добавить цвет фона, чтобы лучше выделить меню?

body {
    background:#32373d;
}

Совет: помните об EM’ах

Из вышеприведенного CSS заметно, что забыть о фактическом значении единиц em легко. Представить в комментариях свои исходные вычисления было бы отличной идеей, чтобы, вернувшись в будущем к коду, можно было расшифровать сделанное ранее. Помните формулу: желаемый размер (px) / родительский размер (px) = результант (em) и используйте символ приблизительности (≈), если округляете результат.

#wrapper { 
    font-size: 0.8125em;    /* 13/16 = 0.8125*/
}
 
.menu > li > a {
    height: 2.75em;         /* 36/13 ≈ 2.75*/
    line-height: 2.75em;    /* 36/13 ≈ 2.75*/
    text-indent: 2.75em;    /* 36/13 ≈ 2.75*/
}

Шаг 4: CSS Подменю

Пора добавить CSS для белых подменю. Нам нужно добавить белый фон с серыми границами. Обратите внимание, что у последнего элемента нет нижней границы, поэтому мы обратимся к нему для ее удаления посредством псевдоселектора :last-child. У него имеется темно-синяя граница, поэтому мы удалим серый цвет и добавим синий.

Следующий шаг аналогичен предыдущему; снова добавим высоту и ширину и изменим фон на белый. На этот раз нам придется изменить размер шрифта. Нам нужно 12px, поэтому с помощью своей формулы желаемый размер (px) / родительский размер (px) = результант (em) получим 0.923em.

Еще давайте поменяем цвет текста на серый. Заметьте, что использован display:block. Если бы мы использовали float:left, меню плавно не анимировались бы, так что применим display: block для того, анимация происходила красиво и плавно. Также обратите внимание, что добавлен дополнительный стиль; мы применяем его к последнему дочернему элементу в под-ul. Это следует сделать для того, чтобы иметь возможность менять цвет границы.

.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}

Начинает смотреться реально хорошо!

Шаг 5: Стили активного состояния и проведения мышью над объектом

Сейчас мы добавим стили активного состояния меню и состояния проведения над ним мышью, специально для того момента, когда «аккордеон» развернут! Кроме того, добавим в активное меню нижнюю границу. Теперь вы думаете: «Почему мы не добавили класс активного состояния?». Что ж, друзья, как раз этим позже займется jQuery.

.menu > li > a:hover,
.menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}

Шаг 6: Иконки главного меню

Добавим иконки, используя псевдокласс :before. Сначала возьмем все теги-привязки во вложенных ul, применим фоновый спрайт и установим его на no repeat. Назначим размер шрифта 36px, хотя здесь нет текста; применим 36px, чтобы можно было использовать ширину и высоту в 1em, что равняется сейчас 36px. Затем сдвинем элемент на 50% вниз и удалим .5em с верхнего поля, чтобы отцентрировать его.

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

Примечание: Я создал этот спрайт с помощью нового приложения под названием SpriteRight, если хотите поработать над ним, то в исходники я включил изображения и файлы проекта.

.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}

Шаг 7: Числа основного меню

Так, помните добавленные нами диапазоны? Ими создадутся числа!

Сначала добавим размер шрифта 11px (что примерно соответствует 0.857em). Мы разместим их абсолютно и сдвинем справа на 1em – снова em, чтобы они были «подвижными». Сдвинем число вниз на 50% от верха и удалим верхнее поле, чтобы разместить его по центру. Фон будет добавлен вместе с тенями блока, внутренней и внешней. Для создания ширины и высоты и «подвижности» снова применим отступ. Мы даже для border radius использовали em’ы; нам это пригодится, потому что если увеличить текст, они окажутся непропорциональными. Еще я добавил другой стиль для моментов, когда к ссылке применяется проведение курсором или активное состояние.

.menu > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}

Шаг 8: Числа и указатели подменю

Этот процесс подобен предыдущему шагу, поэтому не стану вдаваться в подробности. Основные отличия здесь состоят в том, что я удалил цвет фона, изменил границу и цвет шрифта. Нам нужно добавить указатель, а для этого ещё раз довериться псевдоклассу :before. Определяем ширину и высоту и добавляем позиционирование слева, используя em, чтобы гарантировать «подвижность».

И наконец, состояние при наведении курсора (спасибо тем, кто в комментах указал это важное упущение). Просто применим к тексту-привязке, псевдоуказателю и числу внутри диапазона более тёмный цвет (#32373D).

.menu ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}
 
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}

Теперь все выглядит весьма круто, верно? Думаю, самое время добавить функциональность!

Шаг 9: Пора jQuery

Держу пари, вы ждали этого момента! Ну что ж, мы, наконец, добрались до jQuery. Прежде всего, нужно обратиться к библиотеке jQuery с помощью сервиса, предоставляемого Google’ом. Последняя текущая версия — 1.7.1. В раздел head своей HTML-страницы добавьте следующее:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Теперь добавьте кое-что в конец html-документа перед закрывающим тегом body. Не беспокойтесь о том, что это сбивает с толку, через минуту я все объясню.

<script type="text/javascript">
$(function() {
 
    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
     
    menu_ul.hide();
 
    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
 
});
</script>
var menu_ul = $('.menu > li > ul'),
    menu_a  = $('.menu > li > a');

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

menu_ul.hide();

Так скрываются все подменю при загрузке страницы.

menu_a.click(function(e) {

Сначала отдаем указание что-либо делать при щелчке по одному из тэгов-привязок основного меню.

e.preventDefault();

Здесь мы препятствуем тэгам-привязкам следовать по ссылкам или менять адрес в адресной строке. Например, если вы создадите тэг-привязку со ссылкой на ‘#’ при щелчке на его, то теперь он не станет отображаться в адресной строке. Тэги-привязки в основном отключены.

if(!$(this).hasClass('active')) {
    menu_a.removeClass('active');

Теперь отдадим указание о том, что ЕСЛИ у menu_a имеется класс ‘active’, то его следует удалить.

menu_ul.filter(':visible').slideUp('normal');

Здесь мы используем ‘.filter’ и ‘:visible’. Если меню открыто, сдвиньте его вверх с нормальной скоростью.

$(this).addClass('active').next().stop(true,true).slideDown('normal');

Если меню закрыто, добавить класс ‘active’ (так мы можем обратиться к хорошему стилю CSS) и сдвинуть его вниз с нормальной скоростью.

} else {
    $(this).removeClass('active');
    $(this).next().stop(true,true).slideUp('normal');

Теперь нужно использовать ELSE как часть своего условного оператора. Так, ELSE удаляет класс «active», и сдвигает меню вверх, чтобы скрыть его. Именно так можно кодировать любое меню без необходимости в перезагрузке страницы.

Примечание: Если вы хотите изменить скорость скольжения, измените normal на, скажем, ’500′. Так меню станет сдвигаться за 500 миллисекунд.

Заключение

Итак, мы сделали все полностью! Создали код отличного вертикального навигационного меню Ормана с помощью CSS3 и jQuery! Оставайтесь на связи, чтобы получить подсказки и советы о том, как создать его с помощью одного лишь CSS3 и псевдоселектора :target.

Надеюсь, вы довольны этим учебником, спасибо за чтение!

Автор: Luke Spoor

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки: , , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (41)

  1. VITEK

    Очень познавательно! Спасибо!

  2. Оптимизатор

    Орман Кларк — это кто? дизайнер ??

  3. анатолий

    отличный пример! спасибо большое пригодиться!=)

  4. Kirill

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

    • Виктор Рог

      Кирилл, не совсем понял Вашего комментария. Заметьте данная статья является переводом с зарубежного источника.

      • Kirill

        Я имел ввиду, что если бы ваш сайт был бы на нескольких языках, расшаривать его было бы куда лучше, чем просто на русском :)

  5. Сергей

    Откровенно говоря — отвратительная техника. В ИЕ-7 багов валом, в ИЕ — маркеры внутренних меню уехали. Короче, кросбраузерности ни на грош….

    • Андрей Кудлай

      Наверное это потому, что автор урока попросту не только не пользуется IE7, но даже не обращает на него внимания… Собственно, компания Microsoft также уже не поддерживает эту версию браузера и давненько предлагает обновить его до 8-ой версии, которая, к слову говоря, вышла уже более 3-х лет назад!!! А ведь есть и более новая версия… Так почему бы не пользоваться всеми преимуществами качественного продукта, а не сетовать на то, что разработчики не подстраиваются под давно устаревший продукт?

      • Сергей

        Я бы тоже с удовольствием не обращал внимания на ИЕ, если бы не заказчики, которые в 99% случаев из 100% требуют поддержки этих браузеров. Да и статистика показывает, что на покой ушел пока что только ИЕ 6, а вот семерка продолжает жить даже в буржуйнете.
        Новые техники безусловно, требуют пристального внимания к себе и, к слову сказать, присутствующие в данном примере баги в большинстве своем успешно фиксятся даже в ИЕ 7 — просто, автор выдал, мягко говоря сыроватый пример))

    • Леонид

      Вы бы Сергей ещё в ИЕ-5 пробовали бы работать.

      • Сергей

        Леонид, я бы с удовольствием вообще не обращал бы внимания на ИЕ. Но Вы попробуйте рассказать заказчику, у которого сайт просматривают 5- 15% посетителей с помощью ИЕ 7, что им нужно обновить браузер.
        К слову, те же американцы несмотря на любовь к использованию новых техник продолжают требовать поддержку ИЕ 7 (иногда даже в режимах совместимости). И плевать они хотели на то, когда и какой браузер вышел. Говорю это, поскольку постоянно сталкиваюсь с подобными требованиями в повседневной работе.
        Да и потом, если хотите выполнять работу качественно, то и делайте ее качественно без оглядки на браузеры — благо возможности такие есть. А что касается данного примера, то еще раз повторюсь — сырой, сляпан по быстрому. Те баги, которые в примере присутствуют поправить не сложно. Просто автор вообще в другие браузеры не заглядывал.

  6. Виктор

    Клева !!!!!!

  7. Максим

    Извините за глупый вопрос, но как позиционировать меню? Укажите именно тот кусок кода, куда нужно вписывать значения для позиционирования.

    • Андрей Кудлай

      Само меню находится в списке UL (ul class=»menu»)… берете его (без упаковщика wrapper) и вставляете в нужное место Вашего сайта… и не нужно никакого позиционирования.

      • Максим

        Вставлено в body, там и нужно. Мне нужно позиционирование.

        • Андрей Кудлай

          В BODY помещается абсолютно весь контент сайта… я написал, что меню находится в списке с классом menu — его и позиционируйте относительно нужного элемента сайта.
          Как именно позиционируется элемент — вот, пожалуйста, урок «Позиционирование в CSS«.

          • Максим

            >?меню находится в списке с классом menu

            Например:
            .menu
            .menu > li > a
            .menu ul li a
            .menu > li > a:hover, .menu > li > a.active

            ^ в этих классах мне нужно выставить «left и top», или в каком-то одном?
            Спасибо, посмотрю урок.

          • Андрей Кудлай

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

          • Максим

            Блин, ладно. Спасибо

          • Андрей Кудлай

            Пожалуйста.

  8. Dmitry

    Ну! Ведь же можете, когда хотите! Все понятно и доступно! Правда в ранних версиях IE — это действовать всё равно не будет… но это не беда. Важен сам процесс осознавания, мышления, и накопление знаний! Большое спасибо! Как буду делать что-нибудь вне официальной работы, так блесну интеллектом! :-) ))
    P.S. После вашей статьи: http://webformyself.com/sozdajte-s-pomoshhyu-css3-stranicu-s-roskoshnym-tizerom-primankoj/
    я, отчаился и подумал, что Ваш сайт слишком заумный для меня… Но сегодня понял, что это не так. Спасибо!

  9. Евгения

    А как создать горизонтальное меню?

  10. Filonik

    а на joomla 1.7 можно Это использовать?

  11. Стас

    Раньше думал, что знаю CSS. Сломало полностью. Большое спасибо.

  12. Salma

    Здравствуйте!
    Замечательное и удобное меню.
    Вот только один вопрос: почему не показывает русские буквы? Т.е. вместо англ букв я хочу например русские вставить. Ан нет , не отображает

    • Андрей Кудлай

      Здравствуйте.
      Что значит «не показывает русские буквы»? Вообще не показывает или все же что-то есть вместо них? Только что попробовал, у меня все ок с кириллицей.
      Сформулируйте вопрос более четко и милости просим на наш форум для его решения.

    • Dmitry

      Всё показывает. Меня так увлекла эта тема, что я сразу сделал на него сайт, так как представился случай! Смотрим: turgenev.ru/1812/vystavka_1812/Vystavka1812/index2.html

  13. Василий

    Здравствуйте, а как сделать так, чтобы к примеру «Friends» было не раскрывающемся списком, а ссылкой ведущей на отдельную страницу? Я попробовал вставить вместо «#» ссылку и «ul» который вложен во «Friends» удалил, но ссылка не работает. Ссылка работает только в том случае если удалить из документа скрипт «initiate accordion»

    • Андрей Кудлай

      Здравствуйте.
      Навешивайте событие клика только на те пункты, у которых есть вложенные элементы. Для решения вопросов, связанных с кодом, у нас есть форум, на котором можно задать свой вопрос.

      • Василий

        Спасение утопающих — дело рук самих утопающих. Спасибо.

        • Андрей Кудлай

          Тоже верно, если предложенный вариант (форум) — для вас принципиально не вариант… в комментариях ведь код (а именно он нужен вам, насколько я понял) выкладывать не очень удобно, это гораздо удобнее сделать на форуме (для решения нужно буквально дописать одну строку кода)… ну а здесь (в комментариях) я могу подсказать решение без кода, что я и сделал.

  14. Василий

    Андрей, когда отвечаете на комментарий, не забывайте пожалуйста о том, что вы профессионал, а я всего лишь чайник, для которого, то, что вы написали — «Навешивайте событие клика только на те пункты, у которых есть вложенные элементы.» вобще не понятно. И все равно спасибо. Буду дальше искать решение своей проблемки.

    • Андрей Кудлай

      Василий, дело в том, что на всех не угодишь… некоторые, наоборот, возмущаются, когда им пытаешься «разжевать» какую-то мелочь и говорят, что «это и так понятно»… я ведь не знаю, каков ваш уровень, мне отсюда этого совсем не видно :)
      В любом случае, в комментариях подсказать решение в коде проблематично (комментарии для этого мало подходят)… ну а событие клика — это ни что иное, как клик мышью по пункту меню… в данном случае это событие нужно было обрабатывать только для тех пунктов, у которых есть дочерние элементы (подпункты), т.е. всего-то в скрипте нужно поправить выборку элементов… даже не знаю, как это проще описать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree