Выдвигающийся блок при нажатии на select
Здравствуйте.
Можно ли как-нибудь сделать так, чтобы при нажатии на <select>выдвигался не список, а блок, например, div? Вот неплохой пример, но, к сожалению, не для селекта: http://www.nofaq.net/2014/03/%D0%BA%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%BF%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE-%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D 1%8E%D1%89%D0%B8%D0%B9%D1%81%D1%8F-div/ Делал через чистый ЦСС, но получается убого. Код:
#slideout { |
Webtest,
можно ))) ещё бы ваш html увидеть |
рони, ничего необычного, просто, хочу единый стиль сохранить.
<?php
echo '<div id="t">';
echo '<form method="post" class="form">';
echo '<select name="theme">';
$folder = opendir("themes");
echo '<option selected disabled>Выберите тему</option>';
while (($entry = readdir($folder)) != false) {
if ($entry != "." && $entry != "..") {
echo "<option class='header' value='$entry'>" . $entry. "</option>";
}
}
$folder = closedir($folder);
echo '</select>';
echo '<input type="submit" value="Ок" name="theme_submit">';
echo '</form>';
echo '<form method="post">';
echo '<select>';
echo '<option selected disabled>Выберите фон</option>';
echo '</select>';
echo '<input type="submit" value="Обновить фоны">';
echo '</form>';
echo '</div>';
?>
Там где 'Выберите фон', надо такое сделать. CSS код:
#t {
position:absolute;
top:0;
margin:0;
width:100%;
height:100px;
background: white;
opacity:1;
color: black;
}
/*.select shape {
height: 22px;
width: 120px;
}*/
* {
margin:0;
padding:0;
}
form.form {
float: left;
}
Кстати, не смотрите что у меня не объеденено все в 1 echo, я пока там все пишу/удаляю, так удобнее. |
Webtest,
html а не php :agree: |
рони,
<form method="post"> <select> <option selected disabled>Выберите фон</option> </select> <input type="submit" value="Обновить фоны"> </form> Вот, чтобы при нажатии на Выберите фон выдвигался снизу блок, в который я бы мог что-нибудь настрочить. |
Webtest,
а где блок-то сам? |
рони, но я не знаю как его вставить, можно просто div, который бы расширялся по мере добавления в него контента. Если его вставить в селект, то он не отображается, если ему задать опр. координаты, и, чтобы он при наведении выходил из-за края страницы (как я сделал в шапке темы), то в каждом браузере по разному выглядит + работает плохо.
Раньше было вот так: <form class="fleft"> <div id="slideout"> <select disabled> <option selected disabled>Выберите фон</option> </select> <div id="slideout_inner"> <form method="post" action="index.tpl" onsubmit="return false"> <button class="color" id="red" name="button" value="red" onclick='change_color(this)'></button> <button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'></button> <button class="color" id="yellow" name="button" value="yellow" onclick='change_color(this)'></button> <button class="color" id="green" name="button" value="green" onclick='change_color(this)'></button> <button class="color" id="blue" name="button" value="blue" onclick='change_color(this)'></button> <button class="color" id="lightBlue" name="button" value="lightBlue" onclick='change_color(this)'></button> <button class="color" id="purple" name="button" value="purple" onclick='change_color(this)'></button> <button class="color" id="gray" name="button" value="gray" onclick='change_color(this)'></button> <button class="color" id="brown" name="button" value="brown" onclick='change_color(this)'></button> <button class="color" id="white" name="button" value="white" onclick='change_color(this)'></button> </form> </div> </div> <input type="submit" value="Обновить фоны" class="header" id="refreshButton"> </form> |
Webtest,
а вы не кастомизированый ли селект хотите получить? http://dimox.name/examples/styling-s...ng-jquery-css/ |
рони, посмотрел по вашей ссылке, нужного не нашел, нужно именно чтобы при нажатии на селект открывался блок, чтобы я туда много чего мог добавить.
Несколько кнопок для смены темы и пр. |
Webtest,
:)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">.forma{
text-align:center;
width:400px;
padding:20px;
background:#fefefe;
border:1px solid #000;
border-radius:10px;
}
.open_form{
border:1px solid #fc5f00;
border-radius:20px;
font-size:20px;
padding:10px 25px;
background:#fa9050;
box-shadow:inset 0 1px 5px rgba(255,255,255,.6),inset 0 -15px 10px 5px #fc5f00,0 1px 2px rgba(0,0,0,.2);
text-shadow:1px 1px 0px #cc4f03;
width:250px;
margin:0 auto;
cursor:pointer;
}
.open_form:hover{
background:#fa9050;
box-shadow:inset 0 1px 5px rgba(255,255,255,.6),inset 0 -15px 5px 0px #fc5f00,0 1px 2px rgba(0,0,0,.2);
}
label:hover .sama_forma{
border:1px solid #fc5f00;
border-radius:20px;
font-size:20px;
padding:10px 25px;
background:#fa9050;
box-shadow:inset 0 1px 5px rgba(255,255,255,.6),inset 0 -15px 10px 5px #fc5f00,0 1px 2px rgba(0,0,0,.2);
text-shadow:1px 1px 0px #cc4f03;
width:250px;
margin:0 auto;
cursor:pointer;
height:50px;
transition:all 2s 0.5s;
-moz-transition:all 2s 0.5s;
-webkit-transition:all 2s 0.5s;
-o-transition:all 2s 0.5s;
}
.sama_forma{
background:#fa9050;
height:0px;
margin-top:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="forma">
<label><div disabled class="open_form">
Выберите фон
</div>
<div class="sama_forma" >
<button class="color" id="red" name="button" value="red" onclick='change_color(this)'></button>
<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'></button>
<button class="color" id="yellow" name="button" value="yellow" onclick='change_color(this)'></button>
<button class="color" id="green" name="button" value="green" onclick='change_color(this)'></button>
<button class="color" id="blue" name="button" value="blue" onclick='change_color(this)'></button>
<button class="color" id="lightBlue" name="button" value="lightBlue" onclick='change_color(this)'></button>
<button class="color" id="purple" name="button" value="purple" onclick='change_color(this)'></button>
<button class="color" id="gray" name="button" value="gray" onclick='change_color(this)'></button>
<button class="color" id="brown" name="button" value="brown" onclick='change_color(this)'></button>
<button class="color" id="white" name="button" value="white" onclick='change_color(this)'></button>
</div> </label>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:16. |