Автор

Kрасивые элементы select для сайта

Kрасивые элементы select для сайта


 

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

 

ДЕМО
ИСХОДНИКИ

 

В уроке мы будем использовать HTML5, по это создаем в первую очередь HTML разметку, которая имеет следующий вид:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Создаем для сайта элемент select | Демонстрация с сайта s-sd.ru</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="page">
<br><br><br><br><br>
	<h1>Сделайте Ваш выбор</h1>

	<form method="post" action="">
		<select name="fancySelect" class="makeMeFancy">
	        <option value="0" selected="selected" data-skip="1">Выберите продукт</option>
        	<option value="1" data-icon="img/products/js.png" data-html-text="Главная страница сайта&lt;i&gt;перейти на страницу сайта&lt;/i&gt;">Информационный блон по веб-дизайну</option>
        	<option value="2" data-icon="img/products/php.png" data-html-text="Скачать необходимый софт&lt;i&gt;загрузить&lt;/i&gt;">CMS+шаблоны, плагины</option>
            <option value="3" data-icon="img/products/wp.png" data-html-text="Дополнительная информация по созданию&lt;i&gt;смотреть&lt;/i&gt;">Интересные уроки по созданию сайтов</option>
            <option value="4" data-icon="img/products/joomla.png" data-html-text="Новости сайта теперь всегда под рукой&lt;i&gt;подписывайтесь&lt;/i&gt;">RSS новости нашего блога всегда рядом</option>
        </select>
    </form>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

 

Далее рассмотрим некоторые атрибуты, например атрибут data используются для объединения информации в элементах option. В них размещается иконка продукта и текстовое описание с форматированием. Оба этих пункта будут выводиться в нашей  версии элемента select.

Теперь подключаем эффекты, jQuery проверяет элемент select, и, используя атрибуты данных, строит разметку, которая добавляется сразу за элементом select:

<div style="width: 356px; <code>class</code><code>=</code><code>"tzSelect"</code>">
	<div <code>class</code><code>=</code><code>"selectBox expanded"</code>>Выберите продукт</div>
	<ul>
		<li><img src="img/products/js.png"><span>JavaScript + jQuery для начинающих в видеоформате<i>посмотреть видеопрезентацию</i></span></li>
		<li><img src="img/products/php.png"><span>PHP + MySQL для начинающих<i>купить</i></span></li>
		<li><img src="img/products/wp.png"><span>WordPress - профессиональный блог за один день<i>скачать</i></span></li>
		<li><img src="img/products/joomla.png"><span>Joomla - профессиональный сайт за один день<i>купить</i></span></li>
	</ul>
</div>

Наше меню будет строить неупорядоченный список с элементами li, которые представляют каждый пункт option из элемента select.

Теперь рассмотрим наш JavaScript, который будет осуществлять плавную анимацию нашего элемента:

$(document).ready(function(){

// Элемент select, который будет замещаться:
	var select = $('select.makeMeFancy');
        var selectBoxContainer = $('<div>',{
		width		: select.outerWidth(),
		className	: 'tzSelect',
		html		: '<div></div>'
	});

	var dropDown = $('<ul>',{className:'dropDown'});
	var selectBox = selectBoxContainer.find('.selectBox');

	// Цикл по оригинальному элементу select

	select.find('option').each(function(i){
	var option = $(this);

		if(i==select.attr('selectedIndex')){
			selectBox.html(option.text());}

		// Так как используется jQuery 1.4.3, то мы можем получить доступ
		// к атрибутам данных HTML5 с помощью метода data().

		if(option.data('skip')){return true;
		}

		// Создаем выпадающий пункт в соответствии
		// с иконкой данных и атрибутами HTML5 данных:

		var li = $('<li>',{
			html:	'<img src="'+option.data('icon')+'" /><span>'+
					option.data('html-text')+'</span>'
		});
		li.click(function(){
			selectBox.html(option.text());
			dropDown.trigger('hide');

// Когда происходит событие click, мы также отражаем
// изменения в оригинальном элементе select:
			select.val(option.val());
			return false;
		});
		dropDown.append(li);
	});
	selectBoxContainer.append(dropDown.hide());
	select.hide().after(selectBoxContainer);

	// Привязываем пользовательские события show и hide к элементу dropDown:

	dropDown.bind('show',function(){
		if(dropDown.is(':animated')){
			return false;
		}

		selectBox.addClass('expanded');
		dropDown.slideDown();
		}).bind('hide',function(){
		if(dropDown.is(':animated')){
		return false;
		}

		selectBox.removeClass('expanded');
		dropDown.slideUp();

	}).bind('toggle',function(){
		if(selectBox.hasClass('expanded')){
			dropDown.trigger('hide');
		}
		else dropDown.trigger('show');
	});

	selectBox.click(function(){
		dropDown.trigger('toggle');
		return false;
	});

// Если нажать кнопку мыши где-нибудь на странице при открытом элементе   dropDown,
// он будет спрятан:
	$(document).click(function(){
		dropDown.trigger('hide');
	});
});

 

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

Затем мы рассматриваем наши стили CSS, будем использовать CSS3, задаем стили для нашего элемента:

#page{
	width:490px;
	margin:50px auto;
}

#page h1{
	font-weight:normal;
	text-indent:-99999px;
	overflow:hidden;
	background:url('../img/your_product.png') no-repeat;
	width:490px;
	height:36px;
}

#page form{
	margin:20px auto;
	width:460px;
}

.tzSelect{
/* Контейнер для нового элемента select */
	height:34px;
	display:inline-block;
	min-width:460px;
	position:relative;

/* Предварительная загрузка фонового изображения для выпадающих пунктов */
	background:url("../img/dropdown_slice.png") no-repeat -99999px;
}

.tzSelect .selectBox{
	position:absolute;
	height:100%;
	width:100%;

/* Установка шрифта */

	font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align:center;
	text-shadow:1px 1px 0 #EEEEEE;
	color:#666666;

/* Использование множественных фонов CSS3 */

background:url('../img/select_slice.png') repeat-x #ddd;
background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png');background-position:0 -136px, right -204px, 50% -68px, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
cursor:pointer;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
.tzSelect .selectBox:hover,
.tzSelect .selectBox.expanded{
	background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
	color:#2c5667;
	text-shadow:1px 1px 0 #9bc2d0;
}

 

В данном примере используется множество прозрачных изображений, которые накладывается один на одного. Множественные фоновые изображения поддерживаются в Firefox, Safari, Chrome и Opera. Для Internet Explorer и старых версий браузеров.

.tzSelect .dropDown{
	position:absolute;
	top:40px;
	left:0;
	width:100%;
	border:1px solid #32333b;
	border-width:0 1px 1px;
	list-style:none;

	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	-moz-box-shadow:0 0 4px #111;
	-webkit-box-shadow:0 0 4px #111;
	box-shadow:0 0 4px #111;
}

.tzSelect li{
	height:85px;
	cursor:pointer;
	position:relative;

	/* Использование множественных фонов CSS3 */

	background:url('../img/dropdown_slice.png') repeat-x #222;
	background-image:url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png');
	background-position: 50% -171px, 0 -85px, 0 0;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

.tzSelect li:hover{
	background-position: 50% -256px, 0 -85px, 0 0;
}

.tzSelect li span{
	left:88px;
	position:absolute;
	top:27px;
}

.tzSelect li i{
	color:#999999;
	display:block;
	font-size:12px;
}

.tzSelect li img{
	left:9px;
	position:absolute;
	top:13px;
}

 

Используя box-sizing, нам необходимо присвоить ему значение border-box, этим  мы предотвратим увеличение общей ширины, так как наши фрагменты размещаются внутри элемента. На этом все, наши улучшенные элементы выбора созданы,  удачных Вам экспериментов.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Kрасивые элементы select для сайта

Если вы хотите с экономить место на своем сайте, при этом привернуть внимание посетителей к информации оформленной оригинальным образом, тогда этот урок именно для Вас.  Речь о том, как сделать так, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения. Данный эффект работает благодаря фреймворку jQuery. Что весьма удобно, ведь позволит достичь необходимого результата, давайте посмотрим что получилось..


Kрасивые элементы select для сайта

Из многих CMS мной была выбрана бесплатная система управления сайтом DLE. Система очень гибкая и удобная для индивидуального дизайна, причем любой сложности. Единственным недостатком этой системы, это стандартная блочная система, а точнее все последующие страницы сайта одинаковые по формам, блокам, располагающихся справа или слева, и весь веб дизайн сайта расположен в одном файле,  тоесть в шаблоне дизайна.  

На сегодняшний день наша студия полностью ушла от бесплатных систем и начала работу по созданию сайтов на платных так называемых движках. В данный момент мы создаем сайты на UMI.CMS, и наша студия является официальным партнером этой компании в области разработки сайтов и веб дизайна. К данной системе лично у меня пока ни каких нареканий нет, я не нашел ни каких минусов в этой системе управления сайтом. Особо хотелось бы отметить огромное преимущество этой редакции, а точнее это быстрое и удобное создание форм обратной связи любой сложности, используемых как для обратной связи, так и как форм всевозможных онлайн заказов.


Kрасивые элементы select для сайта

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


Kрасивые элементы select для сайта

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close