Здравствуйте дорогие читатели моего блога, в данном решении мы будем создавать в форме добавление комментариев, ячейки с выпадающими смайлами и bb кодами, подобное решение вы могли видеть на сайте В Контакте, но в отличии от него, мы будем реализовывать данное решение только благодаря css стилям.
Шаг 1 - Установим HTML:
Для начало давайте установим каркас, для этого заходим в Админ панель => Дизайн => Управление дизайном => Комментарии => Форма добавления комментариев удаляем старый html код и устанавливаем следующий:
HTML
<!-- Форма комментарий -->
<div class="forma_comment left">
<div class="comment_os">
<div class="menu_n sm_1">
<a href="#" ><img alt="smail" src="http://ucoz-helper.ucoz.com/forma-comment/smail.gif"></a>
<div class="dd_menu_sm"><span class="dd_ugol1"></span>
<script type="text/javascript" src="http://ucoz-helper.ucoz.com/forma-comment/smile.js"></script>
<a class="link_sm right" href="javascript://" rel="nofollow" onclick="new _uWnd('Sml',' ',-250,-350,{autosize:0,closeonesc:1,resize:0},{url:'/index/35-1-0'});return false;">Ещё смайлы </a>
</div>
</div>
if($BBCODES$)?>
<div class="menu_n sm_2">
<a href="#" ><img alt="bb code" src="/img/sm_bb.png"></a>
<div class="dd_menu_bb"><span class="dd_ugol2"></span>
<a href="javascript://" onclick="simpletag('b')" title="Жирный">B</a>
<a href="javascript://" onclick="simpletag('i')" title="Курсив" class="panel_i" >i</a>
<a href="javascript://" onclick="tag_url('message','')" title="Добавить ссылку">http:</a>
<a href="javascript://" onclick="tag_image()" title="Добавить Картинку">img</a>
<a href="javascript://" onclick="simpletag('quote')" title="Цитата">Цитата</a>
<a href="javascript://" onclick="simpletag('code')" title="Вставить html-css код" class="panel_code" >Сode</a>
<a href="javascript://" class="panel_close" onclick="closeall('message','');" title="Закрыть все BB-коды">Close-BB</a>
<a href="javascript://" onclick="window.open('/index/17','bbcodes','scrollbars=1,width=550,height=450,left=0,top=0');" class="panel_info" >Справка</a>
$BBCODES$
</div>
</div>
endif?>
<textarea style="height:120px;" rows="8" name="message" id="message" cols="50">$MESSAGE$</textarea>
</div>
if(!$USER_LOGGED_IN$)?>
<input class="comm_input left" type="text" name="name" value="Имя" onclick="if (this.value=='Имя'){this.value='';}" size="30" maxlength="60">
<input class="comm_input right" type="text" name="email" value="E-mail" onclick="if (this.value=='E-mail'){this.value='';}" size="30" maxlength="60">
endif?>
if($ERROR$)?><div class="panel_error left">$ERROR$</div>endif?>
<div class="panel_bottom left">
$SECURITY_CODE$
<input type="submit" class="kn_dobavit right" name="submit" value="Добавить комментарий">
</div>
</div>
<!-- /Форма комментарий -->
Шаг 2 - Установим CSS:
Теперь для правильного отображение формы добавление комментарий пропишем следующие css стили:
CSS-Code
/* Выпадающие смайлы
------------------------------------------*/
.menu_n {
display:block;
position:absolute;
}
.sm_1 {top:5px;left:10px;}
.sm_2 {top:7px; left:35px;}
.dd_menu_sm,
.dd_menu_bb {
float:left;
padding:7px;
left:-999em;
z-index:998;
background:#fff;
position:absolute;
border:1px solid #999;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
box-shadow: 0px 0px 5px #c4c4c4;
}
.dd_menu_sm {margin: 0px 0px 0px -5px;}
.dd_menu_bb {margin: -2px 0px 0px -30px;}
.dd_ugol1,
.dd_menu_sm {width:240px;}
.dd_ugol2,
.dd_menu_bb {width:500px;}
.dd_ugol1,
.dd_ugol2 {
float:left;
height:25px;
top:-25px;
position:absolute;
background:url(http://ucoz-helper.ucoz.com/forma-comment/fon_ugol_1.png) no-repeat center bottom;
}
.dd_ugol1 {right:119px;}
.dd_ugol2 {right:223px;}
.menu_n:hover .dd_menu_sm,
.menu_n:hover .dd_menu_bb {
top:30px;
left:0px;
right:auto;
}
.link_sm {margin: -18px 5px 0px 0px;}
/* Вид Панели BB-кодов
------------------------------------------*/
.dd_menu_bb a:link,
.dd_menu_bb a:visited {
float:left;
padding: 3px 10px 4px 10px;
margin: 0px 5px 0px 0px;
background:#F6F6F6;
cursor:pointer;
border:1px solid #B2B2B2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font: 10px Verdana,Arial,Helvetica, sans-serif; color:#555; text-shadow: 1px 1px 1px #fff;
}
.dd_menu_bb a:hover {background:#fff;}
.panel_i {font-style:italic!important; }
.panel_u {text-decoration: underline!important; }
.panel_info {float:right!important; margin: 0px!important;}
/* Разбор палётов (КАПЧА)
------------------------------------------*/
.dd_menu_bb .codeButtons,
.panel_bottom img {
display:none;
}
#secuImgC {
margin:0!important;
float:left!important;
display:inline!important;
border:1px solid #CAD1DB!important;
}
.securityCode {
color:#777!important;
margin:0!important;
float:left!important;
height:25px!important;
background:#f9f9f9!important;
border:1px solid #CAD1DB!important;
border-right:none!important;
}
/* кнопка добавить комментарий */
.kn_dobavit {
cursor:pointer;
height:37px;
border:1px solid #72b837!important;
color:#236114!important;
text-shadow:1px 1px 1px #d7ffb6!important;
background: #9aeb56!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9aeb56), color-stop(1, #7ecb3d))!important;
background: -moz-linear-gradient(top, #9aeb56 1%, #7ecb3d 100%)!important;
background: -o-linear-gradient(#9aeb56, #7ecb3d)!important;
}
.kn_dobavit:active {
-webkit-box-shadow:inset 0px 0px 3px #5b9728!important;
-moz-box-shadow:inset 0px 0px 3px #5b9728!important;
box-shadow:inset 0px 0px 3px #5b9728!important;
}
.kn_dobavit:hover {
background:#aff278!important;
}
/* Дополнение */
.left {float:left; /* выравнивание элемента по левому краю страницы */}
.right {float:right; /* выравнивание элемента по правому краю страницы */}
/* Фон полей при нажатии */
.dd_menu_bb a:focus,
.securityCode:focus,
.comm_input:focus,
.forma_comment textarea:focus {
-webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important; /* Тень в браузоре Chrome и Safari верх-право-низ-лево */
-moz-box-shadow:inset 0px 1px 3px #c3c3c3!important; /* Тень в браузоре Firefox верх-право-низ-лево */
box-shadow:inset 0px 1px 3px #c3c3c3!important; /* Тень в CSS3 верх-право-низ-лево */
}
.forma_comment input {padding: 5px 10px!important;}
/* Прозрачность */
.forma_comment a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
}
Обратите внимание, что в данном решении я использовал абсолютное позиционирование объектов, в результате чего, ячейки с выпадающей информацией которые расположены над формой добавление комментариев, отображаются именно в самой форме.
На этом всё, спасибо за внимание!
· 
03:51
