qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Вертикальное мульти меню
Просмотров: 1530  Скачан: 229 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

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

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

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

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

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

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

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Boxes M...

Меню в виде куба с красивым эффектом трансформации....

Portfolio SitePortfolio Site

Оригинальный одностраничный html шаблон для сайта портфолио, шаблон создан на фоне красивых морских глубин....

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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