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

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

ОБСУЖДЕНИЕ

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

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

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

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

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

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

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

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

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

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

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

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

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

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

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

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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