CSS3 для начинающих. Часть 4.1. Подсказки. Меню.

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

Содержание

1. Создание всплывающих окон с подсказками (ToolTips).
2. Меню с использованием jQuery со встроенными формами.

 

Создание всплывающих окон с подсказками (ToolTips)

Бывают такие ситуации, когда необходимо дополнить сложные элементы сайта подсказками. Самый простой вариант в таком случае — использовать окна с подсказками, так называемые ToolTips. Они появляются при наведении мышки на нужные элемент и доносят до пользователя необходимую информацию. Существует множество решений на основе совместного использования CSS и JavaScript, к примеру библиотеки jQuery. Мы же посмотрим немного вперед и создадим такие подсказки используя только CSS.
5 вариантов всплывающих окон с подсказками на CSS3
Когда вам нужно объяснить какую-либо аббревиатуру или акроним, дать определение слову или просто сообщить какие-либо детали об объекте на который наведен указатель мыши окна с подсказками являются самым простым и в то же время эффективным средством.

Стоит учесть, что те подсказки, создание которых мы разберем в этой статье, будут работать во всех браузерах. В старых браузерах (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

Здесь представлены различные примеры всплывающие окон с подсказками КлассическоеЭто всего лишь простейшие примеры. Используйте их для создания собственных!, Критическая ошибкаErrorКритическая ошибкаЭто всего лишь простейшие примеры. Используйте их для создания собственных!, ПомощьHelpПомощьЭто всего лишь простейшие примеры. Используйте их для создания собственных!, ИнформацияInformationИнформацияЭто всего лишь простейшие примеры. Используйте их для создания собственных! и ПредупреждениеWarningПредупреждениеЭто всего лишь простейшие примеры. Используйте их для создания собственных! реализованными на 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);

оформление всплывающего окна с помощью CSS3
Посмотреть демо

—>В начало

 

FormBox – выпадающее меню с использованием jQuery и CSS3 со встроенными формами

Далее речь пойдет о достаточно интересном проекте называемом FormBox. При дизайне сайта, многие веб-мастера стремятся его сделать более простым для пользователя. Неважно о чем ваш сайт. Самое главное для нас найти баланс в интерфейсе, что позволить пользователям получить легкий доступ ко всем основным функциям не загружая при этом еще одну страницу.
Меню с использованием jQuery со встроенными формами
К таким функциям можно отнести регистрацию, логинизацию и смену пароля. Обычно мы имеем отдельную страницу для логина, отдельную для регистрации и отдельную страницу для восстановления пароля. А проект FormBox призван как раз избавить и нас и пользователя от всех этих лишних страниц.

Посмотреть демо

Итак давайте разберемся, что нам потребуется для создания такого меню. Если вы до этого сталкивались с созданием закладок с помощью jQuery, то разобраться с меню для вас будет гораздо проще. Каждая форма представляет из себя закладку, которая может вызвана при нажатии на пункт меню по его хэштегу (например #tab2). Это позволяет использовать как стандартные ссылки в меню, так и выпадающие формы.

Для начала посмотрим на HTML код необходимый для создания нашего меню. Как вы можете видеть — код начинается со списка ul li ссылок, каждой из которых назначается определенный класс, regular (обычная ссылка) или dropdown (выпадающая закладка). Далее мы описываем нашу FormBox панель, которая будет содержать HTML/Form код. Так как код достаточно большой, я приведу в примере код только первой вкладки.


    • Home

 

 

 

 

 

 

 

  • Pricing

 

 

  • About

 

 

 

 

 

 

 

 

    •  

       

      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.



Запись опубликована в рубрике CSS3, JavaScript с метками , , , , . Добавьте в закладки постоянную ссылку.

10 комментариев: CSS3 для начинающих. Часть 4.1. Подсказки. Меню.

  1. Уведомление: CSS3 для начинающих. Часть 4.1. Подсказки. Меню. | Grabr

  2. Любомир Пильчак говорит:

    О как, интересная статья. Спасибо за анонс в грабре:) Так я нашел полезный блог о ВЕБ дизайне

    • Гилязетдинов Руслан говорит:

      спасибо за проявленный интерес. завтра ждите продолжение этой статьи если интересно.

  3. Игроман говорит:

    Подсказки без скриптов это хорошо, спасибо.

    • Гилязетдинов Руслан говорит:

      пожалуйста — заходите почаще =)

  4. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 4. Аккордеон и подсказки. | RusDigi.org Блог Гилязетдинова Руслана

  5. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана

  6. Уведомление: 10 лучших мануалов по созданию форм с помощью CSS3 | RusDigi.org Блог Гилязетдинова Руслана

  7. SHAHIN говорит:

    Хотябы написали что куда вставлять

  8. Олег говорит:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *