X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Выплывающее меню CSS: transition.
ovak_hb
ovak_hb
Topic Starter сообщение 25.9.2014, 22:00; Ответить: ovak_hb
Сообщение #1


Изучаю HTML and CSS, JS будет в будущем (про существование Jquery знаю). Подскажите в чем может быть проблема. Заготовки (checkbox+menu и checkbox+image) по отдельности "работают",
<style>

input{
position:fixed;
right:5px;
cursor: pointer;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}

label{
position: fixed;
right:0px;
width:0px;
background:rgba(232, 67, 46, 0.45);
border:1px solid red;

-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}

input:checked {
right:210px;
}

input:checked + label {

width:210px;
}

</style>
</head>
<body>

<input type="checkbox">
<label id="menu">dddddddddddddddddddddddddddddddddddddddddddd</label>

</body>

а в сборе checkbox-image-button плавает, а меню не "выплывает".
<style>
input{
position:fixed;
right:5px;
z-index: 1;
margin: 0;
padding: 0;
height: 32px;
width: 30px;
background: #eee url(b_plus.png);
cursor: pointer;
opacity:1;

-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}

#plus {
position:fixed;
right:5px;
width:30px;
height:30px;
background: #eee url(b_minus.png);
border:1px solid red;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}

label {
position: fixed;
right:0px;
width:0px;

background:rgba(232, 67, 46, 0.45);
border:1px solid red;

-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}

input:checked {
right:210px;
}

input:checked + #plus {
right:210px;
}

input:checked + label {
width:210px;
}

</style>
<body>
<input type="checkbox">
<img id="plus">
<label class="menu">dddddddddddddddddddddddddddddddddddddddddddd</label>
</body>


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3331 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3291 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6438 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1652 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1415 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:17
Дизайн