RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Вертикальное меню

Вертикальное мульти меню
Просмотров: 1422  Скачан: 220 раз  Комментариев в теме: 0

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

Шаг 1 - создание разметки

 

HTML

<div id="page-wrap">
    <div id="menu">
        <ul>
            <li><a href="#">Природа                   </a></li>
            <li><a href="#">Receivability             </a></li>
            <li><a href="#">Alone time                </a></li>
            <li><a href="#">Togetherness              </a></li>
            <li><a href="#">Imperfection              </a></li>
            <li><a href="#">Exercise                  </a></li>
            <li><a href="#">Rest                      </a></li>
            <li><a href="#">Бог                       </a></li>
            <li><a href="#">Thankfulness              </a></li>
            <li><a href="#">Forgiveness               </a></li>
            <li><a href="#">Inner peace               </a></li>
            <li><a href="#">Тишина                    </a></li>
            <li><a href="#">Trust                     </a></li>
            <li><a href="#">Contentness               </a></li>
            <li><a href="#">Sustainable visions       </a></li>
            <li><a href="#">Reflection                </a></li>
            <li><a href="#">Prayer+meditation         </a></li>
            <li><a href="#">Compassion                </a></li>
            <li><a href="#">Качество                  </a></li>
            <li><a href="#">Patience                  </a></li>
            <li><a href="#">Non-doing                 </a></li>
            <li><a href="#">Presence                  </a></li>
            <li><a href="#">Self-love                 </a></li>
            <li><a href="#">Non-judging               </a></li>
            <li><a href="#">Non-comparing             </a></li>
            <li><a href="#">Интимность                </a></li>
            <li><a href="#">Inaccessibility           </a></li>
            <li><a href="#">Letting go                </a></li>
            <li><a href="#">Holistic thinking         </a></li>
            <li><a href="#">Respecting boundaries     </a></li>
            <li><a href="#">Wholeheartedness          </a></li>
            <li><a href="#">Свобода                   </a></li>
            <li><a href="#">Openness                  </a></li>
            <li><a href="#">Courage to fail           </a></li>
            <li><a href="#">Spiritual awareness       </a></li>
            <li><a href="#">Unselfish motives         </a></li>
            <li><a href="#">Authenticity              </a></li>
            <li><a href="#">Good energy               </a></li>
            <li><a href="#">Intuitive confidence      </a></li>
            <li><a href="#">Emotional expression      </a></li>
            <li><a href="#">Change coping             </a></li>
            <li><a href="#">Body grounding            </a></li>
            <li><a href="#">Courage to be me          </a></li>
            <li><a href="#">Unconditional love        </a></li>
            <li><a href="#">Effortlessness            </a></li>
            <li><a href="#">Listening to my body      </a></li>
            <li><a href="#">Cravings liberation       </a></li>
            <li><a href="#">Courage to ask for help   </a></li>
            <li><a href="#">Терпение                  </a></li>
            <li><a href="#">Courage to be honest      </a></li>
            <li><a href="#">Self-esteem               </a></li>
            <li><a href="#">Nonharming consumption    </a></li>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" >

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {    
    $("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");
    var $el,
    speed = 13.5,
    cur = -1,
    items = $("#menu a"),
    max = items.length - 1;    
    items
    .each(function(i) {
        $(this).attr("data-pos", i);
    })
    .hover(function() {
        $el = $(this);
        $el.addClass("hover");
        $("#mover").css("top", -($el.data("pos") * speed - 40));
        // 40 - верхний отсутп для затухания
        cur = $el.data("pos");
    }, function() {
        $(this).removeClass("hover");
    });
    $(document).keydown(function(event) {
        cur = $(".hover").attr("data-pos");
        // Стрелка вниз
        if (event.keyCode == 40) {
            $("[data-pos=" + cur + "]").trigger("mouseleave");
            if (cur != max) { cur++; }
            $("[data-pos=" + cur + "]").trigger("mouseenter");
        }
        // Стрелка вверх
        if (event.keyCode == 38) {
            $("[data-pos=" + cur + "]").trigger("mouseleave");
            if (cur > 0) { cur--; }
            $("[data-pos=" + cur + "]").trigger("mouseenter");
        }
    });
});
</script>
Материалы по теме:

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery
Интересные публикации:

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Kenburner слайдерKenburner слайдер v1.1

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.3/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить