- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Что делать, если ваша email-рассылка попала в спам
10 распространенных причин и решений
Екатерина Ткаченко
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте, делаю сайт, на сайте есть панелька которая по кнопке выдвигается.
Хочу сделать три варианта данного блока:
Регистрация, Поиск по сайту, Авторизация
Решил попробовать сделать так, скопировал я первый блок и продублировал его и так же js но вписал id другой который будет совпадать с формой выдвижки.
JS
HTML
Стили у кнопок одни и те-же, а вот когда блок выдвигает то там только размеры разные блока.
CSS
Можно стиль кнопки один и тот же сделать, а стиль блоков нужен разный.
Для Авторизации блок не большой, для регистрации так же, для поиска по сайту, большой.
Все щас работает, но когда нажимаю что бы выдвинуть, то он спускает и все другие кнопки и глючит, я как только не мутил со стилями, замучился, походу не хватает моих знаний.
Нужно сделать так с верху три кнопки, как щас сделано
(Скрин 1)
Скрин 2
При нажатии на кнопку, раскрывается само поле, и видно что спустилось в низ и с кнопкой все правильно, но то же спустились другие кнопки. а они должны быть с верху прижаты.
КАЖДЫЙ БЛОК ДОЛЖЕН БЫТЬ ИНДИВИДУАЛЬНЫМ И НЕ БЫТЬ ПРИВЯЗАН К ДРУГ ДРУГУ, КАК то так.
Помогите решить проблему.
Реализовал немного по другому, нашел css код без всяких js
HTML
<div id="pokazat">
<a href="#" class="menutop" onClick="document.getElementById('pokazat').style.display='none';document.getElementById('skryt').style.display='';return false;">Авторизация</a></div>
<div id="skryt" style="display:none">
<p style="padding:20px">Тут пишем текст, который нужно показывать и скрывать</p>
<a href="#" class="menutophover" onClick="document.getElementById('skryt').style.display='none';document.getElementById('pokazat').style.display='';return false;">Закрыть авторизацию</a>
</div>
Вопрос такой, как сделать так, что бы не приходилось нажимать закрыть авторизацию, а просто мышкой щелкнул где ни будь и он закрыл, что бы и кнопка работала и мышкой если щелкнул, а как еще сделать что бы сайт затемнялся когда раскрываешь форму.
нашел стиль затемнения всего кроме самой выдвижной формы.
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 9990;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
как правильно теперь сделать, что бы она работала ?
сам код выше html
а вот css
.menutop {
text-transform: uppercase;
position: relative;
display: block;
font-size: 14px;
font-weight: bold;
background: #F89DC2;
text-align: center;
width: 340px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 15px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
.menutop a{
color: #000;
}
.menutop:hover{
background: #D23771;
color: #fff;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
#skryt {
margin-top: -15px;
background: #FFCCE2;
height: 300px;
width:346px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
border-bottom: solid 3px #D23771;
}
.menutophover {
margin-top: 227px;
text-transform: uppercase;
position: relative;
display: block;
font-size: 14px;
padding-bottom:3px;
font-weight: bold;
background: #D23771;
text-align: center;
width: 340px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 15px;
-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}
.menutophover a{
color: #fff;
}
.menutophover:hover{
background: #fff;
color: #000;
border-left: solid 3px #fff;
border-right: solid 3px #fff;
border-bottom: solid 3px #fff;
-webkit-transition: background 0.8s ease;
-moz-transition: background 0.8s ease;
-o-transition: background 0.8s ease;
-khtml-transition: background 0.8s ease;
transition: background 0.8s ease;
}