17 мар 2015
Кнопка для сайта с дополнительной информацией
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Кнопка для сайта с дополнительной информацией .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Кнопка для сайта с дополнительной информацией


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

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

Шаг 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")
});


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

Готово!



Скачивание файлов доступно только зарегистрированным пользователям










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