Как сделать интерактивную боковую панель с jQuery и CSS3?

87
11

Я задал такие вопросы и не получил ответа, который действительно помог мне! Я знаю, что это, вероятно, очень легко, и я просто не могу понять это!

Я изучаю jQuery в течение нескольких дней и у меня есть основы, но не могу создать правильную функцию, чтобы этот эффект произошел! Пожалуйста, посетите веб-сайт ниже!

Есть несколько вещей, о которых я хотел бы знать! Во-первых, когда вы впервые заходите на сайт, все сползает на место (боковая панель, нижний колонтитул и т.д.). Основной проблемой является боковая панель, как при наведении курсора на один из значков появляется какая-то подсказка, правая сторона.

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

http://intothearctic.gp/en/

HTML

<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>

CSS

    #sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}

спросил(а) 2014-07-03T09:04:00+04:00 5 лет, 7 месяцев назад
1
Решение
48

вы можете сделать это с помощью position: absolute как упомянуто ранее fizzix, и для каждого вашего вопроса с помощью этого примера html

<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>

1 Прежде всего, когда вы впервые заходите на сайт, все сместится на место (боковая панель, нижний колонтитул и т.д.).

Это может быть достигнуто с помощью jQuery в готовом документе и с помощью setTimeout, если вы хотите его задержать, а затем добавьте класс к элементу, например

CSS:

#sidemenu { 
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}

jQuery:

$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

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

Это может быть достигнуто только с помощью CSS при наведении, вам нужно поместить плавающий элемент внутри элемента, который вы хотите навести, в этом примере submenu-inner внутри внутри submenu, затем добавить некоторый CSS

#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}

во-первых, внутренний элемент прозрачен и расположен ближе к правой стороне, используя left, а затем при наведении, устанавливая положение рядом с контейнером, снова устанавливая left CSS в ширину контейнера

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

это то же самое с номером 1, кроме этого, вызванного событием onClick

здесь рабочий пример по JSFIDDLE

ответил(а) 2014-07-03T13:18:00+04:00 5 лет, 7 месяцев назад
36

Весь сайт использует absolute позиции. Это означает, что они расположены на странице с координатами пикселей. Затем они используют анимацию jQuery для перемещения top и left позиций.

Я сделал краткий пример того, как это сделать ЗДЕСЬ. Вы можете отредактировать это по своему вкусу.


Если вы заинтересованы в том, чтобы увидеть, с чем строился сайт, вы можете увидеть весь список ЗДЕСЬ

ответил(а) 2014-07-03T09:55:00+04:00 5 лет, 7 месяцев назад
35

Я не думаю, что плагин необходим.

Вы можете использовать перевод, чтобы сохранить скрытое меню. transform:translate(90%)

Пожалуйста, обратитесь к этому примеру: JSFIDDLE

ответил(а) 2014-07-03T09:51:00+04:00 5 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема