Сегодня я начинаю четвертую часть цикла статей CSS3 для начинающих. В этой статье мы рассмотрим различные способы работы с меню, которые стали доступны с введением CSS3, а так же рассмотрим создание всплывающих окон с подсказками, создание закладок на чистом CSS и создание эффекта закругленных лент. Итак, приступим.
[adsense]
Содержание
1. Создание всплывающих окон с подсказками (ToolTips).
2. Меню с использованием jQuery со встроенными формами.
Создание всплывающих окон с подсказками (ToolTips)
Бывают такие ситуации, когда необходимо дополнить сложные элементы сайта подсказками. Самый простой вариант в таком случае — использовать окна с подсказками, так называемые ToolTips. Они появляются при наведении мышки на нужные элемент и доносят до пользователя необходимую информацию. Существует множество решений на основе совместного использования CSS и JavaScript, к примеру библиотеки jQuery. Мы же посмотрим немного вперед и создадим такие подсказки используя только CSS.
Когда вам нужно объяснить какую-либо аббревиатуру или акроним, дать определение слову или просто сообщить какие-либо детали об объекте на который наведен указатель мыши окна с подсказками являются самым простым и в то же время эффективным средством.
Стоит учесть, что те подсказки, создание которых мы разберем в этой статье, будут работать во всех браузерах. В старых браузерах (IE 8 И ниже), возможно, они будут выглядеть хуже, так как там не будет поддержки некоторых свойств CSS3 (мы будем использовать border-radius
и box-shadow
).
Сегодня мы разберем 5 разных типов окон с подсказками. Все они будут выглядеть стандартно, но вы так же сможете их сразу применить в своих проектах. Не бойтесь экспериментировать.
Для начала создадим HTML заготовку для наших экспериментов. Код будет выглядеть вот так:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ToolTips Example
Всплывающие окна с подсказками — ToolTips
Здесь представлены различные примеры всплывающие окон с подсказками КлассическоеЭто всего лишь простейшие примеры. Используйте их для создания собственных!, Критическая ошибкаКритическая ошибкаЭто всего лишь простейшие примеры. Используйте их для создания собственных!, ПомощьПомощьЭто всего лишь простейшие примеры. Используйте их для создания собственных!, ИнформацияИнформацияЭто всего лишь простейшие примеры. Используйте их для создания собственных! и ПредупреждениеПредупреждениеЭто всего лишь простейшие примеры. Используйте их для создания собственных! реализованными на CSS3. Это всего лишь простейшие примеры. Используйте их для создания собственных!
Как видно из кода, мы имеем заголовок <h1>
, абзац с текстом <p>
, в котором содержаться анкоры <a>
с различными стилями tooltip
. После того, как мы добавим описание стилей, тот текст, что заключен в тег <span>
будет невидим до того момента, пока мы не наведем на анкор указатель мыши. Каждый тег <span>
имеет свой класс, что позволит нам создать различные варианты окон с подсказками.
Далее для наглядности зададим в таблице стилей для анкоров нижнюю границу (dotted)
и поменяем курсор мыши на стрелку с вопросом. Мы используем здесь так же свойство outline
чтобы ссылка была не похожа на обычную кликабельную ссылку. Если же вам нужно чтобы подсказка выводилась у реальной ссылки, вы можете убрать это свойство. Так же для скрытия подсказки мы использовали отрицательное значение margin
. Делается для того, чтобы данный вариант работал даже в старых браузерах.
После всего этого нам остается добавить только код в CSS, который будет выводить наши окна с подсказками. Код будет выглядеть следующим образом:
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
Последняя строка использует HTML хак для IE6 чтобы обеспечить прозрачный фон в этом старом убогом браузере.
И закончим мы с нашими подсказками добавлением границ и фона, чтобы отделить их от остального текста. Для обычных браузеров подойдет такой код:
.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
А для современных, поддерживающих CSS3 свойства, браузеров мы используем закругление границ и создадим тень от окна:
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
Посмотреть демо
FormBox – выпадающее меню с использованием jQuery и CSS3 со встроенными формами
Далее речь пойдет о достаточно интересном проекте называемом FormBox. При дизайне сайта, многие веб-мастера стремятся его сделать более простым для пользователя. Неважно о чем ваш сайт. Самое главное для нас найти баланс в интерфейсе, что позволить пользователям получить легкий доступ ко всем основным функциям не загружая при этом еще одну страницу.
К таким функциям можно отнести регистрацию, логинизацию и смену пароля. Обычно мы имеем отдельную страницу для логина, отдельную для регистрации и отдельную страницу для восстановления пароля. А проект FormBox призван как раз избавить и нас и пользователя от всех этих лишних страниц.
Посмотреть демо
Итак давайте разберемся, что нам потребуется для создания такого меню. Если вы до этого сталкивались с созданием закладок с помощью jQuery, то разобраться с меню для вас будет гораздо проще. Каждая форма представляет из себя закладку, которая может вызвана при нажатии на пункт меню по его хэштегу (например #tab2
). Это позволяет использовать как стандартные ссылки в меню, так и выпадающие формы.
Для начала посмотрим на HTML код необходимый для создания нашего меню. Как вы можете видеть — код начинается со списка ul li
ссылок, каждой из которых назначается определенный класс, regular
(обычная ссылка) или dropdown
(выпадающая закладка). Далее мы описываем нашу FormBox панель, которая будет содержать HTML/Form код. Так как код достаточно большой, я приведу в примере код только первой вкладки.
- Home
- Login
- Sign-Up
- Forgot Password
- Pricing
- About
- Contact
-
Remember Me
Второй шаг — JavaScript. jQuery используется в FormBox’e для создания выпадающего меню, анимации, всплывающих подсказок и смены места расположения. Ниже я приведу код только основных функций, которые используются при реализации FormBox.
По стандарту, FormBox работает как интерфейс основанный на наведении курсора мыши. При наведении курсора мыши на пункт меню, в котором содержится форма, ведет к показу этой формы.При желании можно поменять поведение на клики (функцию tabMenuLinks.hover()
заменить на click()
).
$(window).load(function(){
var tabs = $("#tabs");
var tabPanesContainer = $("ul#tabPanes");
var tabPanesAll = tabPanesContainer.find("li").css("position", "absolute");
var tabMenuLinks = $("ul#tabMenu .dropdown");
var regularLinks = $("ul#tabMenu .regular");
var dropDownSpeed = 200;
var dropUpSpeed = 200;
var menuHeight = '240px';
/*Handle menu links - display the form panel on hover*/
tabMenuLinks.hover(function()
{
var thisMenuItem = $(this);
/*get the offset of this item in respect to the page*/
var thisMargin = thisMenuItem.offset().left;
/*get the offset of the navigation bar in respect to the page*/
var tabsOffset = tabs.offset().left;
var thisIndex = thisMenuItem.index();
thisMargin = Math.floor(thisMargin - tabsOffset);
/*correct the offset*/
var thisOffset = thisMargin - 52;
tabPanesContainer.css('margin-left', thisOffset);
/*begin animateing the drop down*/
tabPanesContainer.stop().animate({
height: menuHeight
}, dropDownSpeed);
/*remove the active class from other menu items*/
tabMenuLinks.removeClass('activeTab');
/*add the active class to the current menu item*/
thisMenuItem.addClass('activeTab');
/*detect and switch to the current form panel*/
var thisHash = thisMenuItem.find("a").attr('href');
var tabClicked = tabPanesAll.filter(thisHash);
tabClicked.appendTo(tabPanesContainer).show();
return false;
}, function() {
$(this).stop();
});
/*Close the currently open menu*/
function closeMenu()
{
tabMenuLinks.removeClass('activeTab');
tabPanesContainer.stop().animate({
height: '0px'
}, dropUpSpeed);
}
/*Handle non tab-menu links*/
regularLinks.hover(function()
{
tabPanesContainer.stop().animate({
height: '0px'
});
tabMenuLinks.removeClass('activeTab');
$(this).addClass('activeTab');
}, function() {
$(this).removeClass('activeTab');
});
Ну и последнее, это оформление стилей с помощью CSS. Я использую CSS3 в FormBox, что дает мне возможность сделать меню более приветливым, сделать кнопки без использования изображений. Ниже привожу основной код CSS:
#tabs {
width:604px;
height:47px;
background-image:url('../images/wooden8.png');
-webkit-box-shadow: 0px 5px 6px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 5px 6px ;
box-shadow: 0px 5px 6px ;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family:Arial;
font-size:14px;
margin:0 auto;
}
ul#tabPanes
{
margin-left:52px;
position:relative;
width:227px;
overflow: hidden;
clear:both;
font-family:Arial;
list-style-type: none;
margin-top:-0px;
position:absolute;
}
ul#tabPanes li
{
width: 227px;
}
ul#tabPanes li#tab1,li#tab2,li#tab3,li#tab4
{
height:227px;
margin-top:-30px;
margin-left:-3px;
display:none;
text-shadow: #ffffff 0px 1px 0px;
background-color:#C9AA7C;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-rightright-radius:5px;
-webkit-border-bottom-left-radius:5px;
background-image:url('../images/wood3.jpg');
background-repeat:no-repeat;
-webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 4px ;
box-shadow: 0px 3px 4px ;
}
Всплывающие подсказки реализованы в данном случае на JavaScript. Привожу код:
$('input').hover(function()
{
var thisItem = $(this);
var msgTip = thisItem.attr('alt');
if(msgTip.length)
{
$('body').append(''+ msgTip +'');
var pos = thisItem.offset();
var width = thisItem.width();
$("#menuTooltip").css( { "left": (pos.left
+ 115) + "px", "top":pos.top - 90 + "px" } );
$("#menuTooltip").fadeIn('slow');
}
}, function()
{
$('div#menuTooltip').remove();
});
Посмотреть демо
Советую почитать подборку интересных материалов от Татьяны aka starpersha Где взять деньги? В интернете!
Ставил тут недавно Asphalt 6 на свой HTC Desire и никак не мог найти кэш для asphalt 6. Поиски увенчались успехом на сайте android4free.ru, где можно найти массу полезного и бесплатного для Anroid.
О как, интересная статья. Спасибо за анонс в грабре:) Так я нашел полезный блог о ВЕБ дизайне
спасибо за проявленный интерес. завтра ждите продолжение этой статьи если интересно.
Подсказки без скриптов это хорошо, спасибо.
пожалуйста — заходите почаще =)
Хотябы написали что куда вставлять
Да автор,статья действительно полезная,но представил ты его не лучшим образом.