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

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

ОБСУЖДЕНИЕ

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

Вертикальное мульти меню
Просмотров: 1276  Скачан: 189 раз  Комментариев в теме: 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...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

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

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

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

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

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

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

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

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

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

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

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

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

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...
  • Текущий 1.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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