18.03.15, 12:27
0 комментарий
  Уроки

Кнопка для сайта с дополнительной информацией

В данном уроке рассмотрим создание кнопки с дополнительной информацией, которая поможет проинформировать пользователя о его дальнейших, возможных действиях. В примере мы будем использовать кнопку загрузки, с дополнительной информацией и возможностью выбора функций.

Чтобы активировать действие, нам необходимо нажать на кнопку, в результате чего кнопка трансформируется в окно, в котором можно продолжить действие. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо создать простую разметку, для этого у нас последовательность классов, мы устанавливаем шапку с классом отображения стандартной кнопки, а затем у нас будет очередность выбора с помощью радиокнопок.

<div>
<header>Загрузить<i class="fa fa-angle-down"></i></header>
<ul>
<li><label><input type="radio" name="dl" checked>Для дома (бесплатно)</label></li>
<li><label><input type="radio" name="dl">1 лицензия (1 рубль)</label></li>
<li><label><input type="radio" name="dl">10 лицензий (10 рублей)</label></li>
</ul>
<section>
<button><i class="fa fa-cloud-download"></i><br>В Облако</button>
<button><i class="fa fa-download"></i><br>Скачать</button>
</section>
</div>


В конце мы предлагаем выбрать какое действие совершить, сохранить в облако или загрузить. Это позволит усовершенствовать загрузку, так как облачные хранилища стали весьма популярны.


Шаг 2. CSS

Теперь нам необходимо стилизовать нашу кнопку, для этого мы применим несколько простых классов. Сперва мы стилизуем общие параметры, затем саму кнопку.

div {
width:300px;
display:block;
margin:0 auto;
border-radius:4px;
background:#eee;
height:34px;
overflow:hidden;
position:relative;
top:30%;
transform:translateY(-30%);
font-weight:200;
font-size:15px;
line-height:20px;
}

.touch {
height:auto;
overflow:auto
}

header {
background:#2098F6;
padding:8px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#fff;
background-clip:padding-box;
display:block;
cursor:pointer;
position:relative
}

header i {
position:absolute;
right:15px
}

ul {
color:#fff;
list-style-type:none;
margin:0;
padding:8px;
font-size:0
}

li {
margin:12px 0;
color:#222;
font-size:13px
}

section {
display:table;
table-layout:auto;
width:100%
}

input {
margin-right:8px
}

button {
border:0;
margin:0;
padding:10px;
display:table-cell;
width:50%;
background:rgba(0,0,0,0.5);
transition:background .4s ease;
color:#fff;
cursor:pointer
}

button:first-child {
border-right:1px solid rgba(255,255,255,0.5)
}

button:hover {
background:#2098F6
}

button .fa {
font-size:1.2rem
}


Для кнопки и окна нам необходимо установить два варианта отображения, неактивного и активного формата, что позволит сделать кнопку более живой.


Шаг 3. JS

Последним действием будет вызов функции при нажатии на кнопку, его используем для уведомления о активном действии, чтобы отобразить больше информации после нажатия:

$("button").click(function() {
alert("Boom");
});

$("header").click(function() {
$("div").toggleClass("touch")
});


В результате мы получаем достаточно удобную в использовании кнопку, которая поможет расширить стандартные возможности при загрузки.

Готово!

Напишите своё мнение