смещение, анимация

@vudd2007 · Регистрация: 19.02.2013

Студворк — интернет-сервис помощи студентам

http://jsbin.com/eyimox/2#

Мне нужно чтоб при нажатии на Item главный блок main отежал сначало влево, а потом с его правой стороныы вылазило поле с информацией(ну типа меню и описание).

Что посоветуете?

@Taatshi · 02.05.2013, 00:34

vudd2007, разместите код на форуме.

@vudd2007 · 02.05.2013, 00:43 **[ТС]**

Сообщение от Taatshi

vudd2007, разместите код на форуме.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id=main>
        <div class=main>
        <ul>
            <li><a href=#>Item 1</a></li>
            <li><a href=#>Item 2</a></li>
            <li><a href=#>Item 3</a></li>
            <li><a href=#>Item 4</a></li>
        </ul>
        </div>
        <div class=rightmenu>
        <ul>
            <li class=top></li>
            <li class=middle>
                <h1>Text Text Text</h1>
                <p>Text Text Text Text Text Text Text Text Text Text Text Text</p>
            </li>
            <li class=bottom>
                <h2>Data</h2>
            </li>
        </ul>
        </div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
* {
    margin:0;
    padding:0;
    font:1em Arial;
}
body {
    background:url(image/flovers.jpg);
}
 
#main {
    width:300px;
    height:600px;
    border:5px solid rgba(102,204,255,1);
    margin:10px auto;
    display:blok;
    border-radius:20px;
    transition:all 1.6s;
    overflow:hidden;
}
#main:hover {
    width:910px;
}
.main {
    float:left;
    width:290px;
    height:590px;
    border:5px solid rgba(102,204,255,1);
    background:rgba(102,204,255,.4);
    border-radius:14px;
    transition:all .6s;
    margin:0;
}
.main ul {
    margin:40px 20px;
    list-style:none;
    display:block;
    margin:200px auto;
}
.main ul li {
    line-height:40px;
}
.main ul li a {
    display:block;
    text-align:center;
    line-height:26px;
    font-size:.9em;
    color:rgba(180,30,80,1);
    text-transform:uppercase;
    cursor:pointer;
    border-radius:10px;
    transition:all .6s;
    border:1px solid transparent;
    text-decoration:none;
    font-weight:bold;
    text-shadow:1px -2px 1px rgba(255,255,255,.1);
}
.main ul li a:hover {
    text-decoration:underline;
}
.main ul li a:focus {
    transform:translate(-100px,0);
    opacity:0;
}
.rightmenu {
    min-width:0px;
    max-width:600px;
    height:590px;
    border:5px solid rgba(102,204,255,1);
    background:rgba(50,204,255,.4);
    border-radius:14px;
    margin-left:300px;
    overflow:hidden;
}
.top {
    display:block;
    width:596px;
    height:100px;
    background:url(../%D0%BD%D0%B0%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0/image/main.jpg) center;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border:2px solid rgba(51,0,153,.4);
}
.middle {
    width:596;
    height:290px;
    border:2px solid rgba(51,0,153,.4);
    display:block;
    padding:60px;
}
.middle h1 {
    font-weight:bold;
    font-size:1.3em;
    text-align:center;
}
.middle p {
    font-size:.9em;
    padding-top:20px;
    overflow:hidden;
}
.bottom {
    width:596px;
    height:68px;
    border:2px solid rgba(51,0,153,.4);
    display:block;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    text-align:right;
}
.bottom h2 {
    padding:12px 48px 0 0;
    font-weight:bold;
    font-size:1em;
    opacity:.6;
}

Добавлено через 5 минут
В данном случае эта функция реализованна через #main:hover, мне же нужно чтоб она реализовалась после нажатия на item1/2/3/4.

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28

	смещение, анимация 01.05.2013, 22:52. Показов 2383. Ответов 2 Метки нет (Все метки) http://jsbin.com/eyimox/2# Мне нужно чтоб при нажатии на Item главный блок main отежал сначало влево, а потом с его правой стороныы вылазило поле с информацией(ну типа меню и описание). Что посоветуете? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.05.2013, 00:34
	vudd2007, разместите код на форуме. 0

Опции темы

смещение, анимация

Решение