Создание и оформление вкладок при помощи CSS3 и jQuery
Иногда нам приходится пользоваться специальными объектами, для того чтобы распределить информацию на странице. Различного рода вкладки стали очень популярны, т.к. с ними работать и удобно и приятно. Сегодня мы покажем вам, как создать подобные вкладки, используя CSS3 и ваш любимый jQuery.
HTML
И как всегда, начнём с HTML. Первое, что нам необходимо сотворить, так это ненумерованный список, который будет содержать 4 элемента. Родительскому контейнеру зададим id ‘navbar’. Три элемента списка должны содержать в себе класс ‘inactive’ и один элемент (тот, что будет показан пользователю) будет содержать класс ‘active’. Также нам понабится отдельный блок для добавления заметок, такой как ‘Projects’ и ‘To-do’, так что вам необходимо создать span, которому необходимо присвоить класс ‘notification’.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stylish CSS3 & jQuery Content Slider</title>
<link rel="stylesheet" type="text/css" href="/style-slider.css" />
</head>
<body>
<div id="navbar">
<ul>
<li class="active"><a href="#" title="Projects">Projects<span class="notification">34</span></a></li>
<li class="inactive"><a href="#" title="Contacts">Contacts</a></li>
<li class="inactive"><a href="#" title="Earnings">Earnings</a></li>
<li class="inactive"><a href="#" title="To-do">To-do<span class="notification">100</span></a></li>
</ul>
</div>
</body>
</html>
Теперь создадим ещё один блок div, но на этот раз зададим ему id ‘slider’. Сюда вы будете добавлять всякого разного рода контент, это будут заголовки ‘h2’и какой-то текст, заключённый в теги параграфа ‘p’. (Вы можете делать всё, что хотите, менять текст и так далее, но не вздумайте менять теги, ибо от этого зависит работа данного скрипта. Если вы добавите ещё заголовков (допустим парочку ‘h2’), то вам необходимо ещё добавить пару элементов в список.
<div id="slider">
<h2>Projects</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. </p>
<h2>Contacts</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. Rapidiously streamline bleeding-edge total linkage after multidisciplinary networks. </p>
<h2>Earnings</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. Rapidiously streamline bleeding-edge total linkage after multidisciplinary networks. Authoritatively create multifunctional methodologies through premier collaboration and idea-sharing. </p>
<h2>To-do</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. Rapidiously streamline bleeding-edge total linkage after multidisciplinary networks. Authoritatively create multifunctional methodologies through premier collaboration and idea-sharing. Phosfluorescently evisculate global manufactured products whereas customized total linkage. Appropriately optimize resource maximizing core competencies via an expanded array of functionalities.</p>
</div>
Так… тут мы закончили? На данный момент всё это действительно должно выглядеть так, как вы это видите. Для того чтобы всё было цивильно, нам необходимо добавить немного CSS.
CSS
Если вы привыкли к особым файлам, которые сбрасывают начальные настройки CSS стилей, то используйте их. Нам же хватит и такого куска кода.
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, tahoma, Sans-serif;
font-size: 13px;
background: url(images/bg.jpg) repeat;
}
Установим внешние и внутренние отступы всех элементов в 0 (используя знак ‘*’), шрифт будет у нас helvetica/tahoma/sans-serif, а его размер будет составлять 13px. Также телу страницы мы присвоим специальный фон. Убедитесь в том, что вы указали ключевое слово repeat, для того, чтобы заданный фон распространялся на всю страницу.
Теперь нам необходимо оформить ссылки, но совсем немного. Хватить только вот этой записи text-decoration: none. Если вы хотите, можете изменить цвет текста и многое другое.
a {
text-decoration: none;
}
Далее мы оформим тег заголовка h2. Тут тоже ничего особенного кроме свойства text-shadow. Первый аргумент - это координаты по оси x, второй - по оси y, третий – насыщенность, четвёртый - цвет.
h2 {
font-family: Helvetica, tahoma, Sans-serif;
font-size: 25px;
font-weight: bold;
text-shadow: 0 1px 1px white;
}
p {
text-shadow: 0 1px 1px white;
}
Далее следует блок навигации. Его ширина будет составлять 650px, а внешние отступы (top, right, bottom, left) 20px, 0, 0 и 40px. Это конечно только лишь моё мнение. Но думаю, что если добавить сюда поддержку жирного шрифта, будет великолепно :)
#navbar {
margin: 20px 0 0 40px;
width: 650px;
font-weight: bold;
}
Все элементы списков должны отображаться как inline block. Позиция элемента ссылки в списке ul li a выставлена как relative. Всё это необходимо отображать как блоки, ширина которых должна составлять 150px, и текст должен располагаться по центру. Если проделать всё, что я только что написал, то мы можем гарантированно заявить, что все элементы списка будут иметь одну и ту же ширину.
ul li{
display: inline-block;
}
ul li a {
position: relative;
display: block;
width: 150px;
text-align: center;
}
Теперь приступим к состояниям ссылок. Первым классом, которым мы займемся, будет класс active. Тут я использую целую кучу новых свойств CSS3, которые будут отображаться только в продвинутых браузерах.
Две вещи, которые я хотел бы отметить: недавно я обнаружил замечательное значение свойства ‘-webkit-background-clip: padding-box’. Тут вы можете поэкспериментировать с шириной границы в радиусе элемента. Мы так же используем Z-index для того, чтобы определить порядок элементов, в котором они должны появляться на странице.
Для того чтобы устранить все отступы, которые возникают при наведении мыши, нам необходимо написать несколько свойств для псевдо класса ‘:focus’.
.active a{
padding: 28px 0 20px 0;
background: -webkit-gradient(linear, left top, left bottom, from(#db0000), to(#9b0000));
background: -moz-linear-gradient(top center, #db0000, #9b0000);
border: 1px solid #8d0000;
text-shadow: 0 1px 1px black;
-webkit-border-radius: 10px 10px 0 0;
-webkit-background-clip: padding-box;
-webkit-box-shadow: inset 0 0 1px #fd0000;
-moz-border-radius: 10px 10px 0 0;
-moz-background-clip: padding-box;
-moz-box-shadow: inset 0 0 1px #fd0000;
margin-left: -5px;
z-index: 2;
color: white;
text-shadow: 0 1px 1px black;
}
.active a:focus {
outline: none;
}
Следующим оформим класс inactive. Как вы уже могли догадаться, он мало чем будет отличаться от класса active. Мы ему зададим чуть меньше внутренние отступы, другой градиент и радиус границы. На этот раз выставим значение z-index в 1, т.к. активная кнопка должна быть выше неактивной. Так же, как и в прошлом случае, добавим несколько стилей для псевдо класса ‘:focus’.
.inactive a:hover {
background: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#ddd));
background: -moz-linear-gradient(top center, #ddd, #eee);
}
.inactive a {
color: #222;
text-shadow: 0 1px 1px white;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background: -moz-linear-gradient(top center, #eee, #ddd);
-webkit-box-shadow: inset 0 0 5px white;
-moz-box-shadow: inset 0 0 5px white;
padding: 20px 0;
-webkit-box-shadow: inset 0 0 5px white;
-moz-box-shadow: inset 0 0 5px white;
border: 1px solid #ccc;
margin-left: -5px;
z-index: 1;
}
.inactive a:focus {
outline: none;
}
Вот почти и всё (ну по крайней мере, со стилями). Теперь нам необходимо оформить блок, где будут располагаться заметки. Будьте уверены, что вы указали свойство min-width в 15px, чтобы соблюсти пропорции элементов на странице, и добавьте margin-left для того, чтобы создать небольшое расстояние между кругом и ссылкой.
span.notification {
position: absolute;
padding: 5px;
margin-top: -6px;
color: white;
min-width: 15px;
text-align: center;
border: 1px solid #000;
background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#222));
background: -moz-linear-gradient(top center, #2a2a2a, #222);
-webkit-box-shadow: inset 0 0 1px #333;
-moz-box-shadow: inset 0 0 1px #333;
text-shadow: 0 -1px 1px black;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
margin-left: 10px;
}
Последнее, что нам осталось оформить, это блок, который будет содержать основной контент. Выставите ему ширину 555px. Если в дальнейшем вы каким-то образом захотите увеличить ширину элементов списка, то вам так необходимо будет затронуть и это значение (555px). Цвет фона я выставил следующим образом ‘rgba(255,255,255,0.3)’. Для кого-то это может быть и ново. Первые три значения (разделённые запятыми) это привычные вам значения RGB (белый -> #fff -> 255,255,255). Последний аргумент - это прозрачность, которая может варьировать от 0 (прозрачный) до 1 (100% виден). Если вам известно hex значение цвета, а RGB нет (или наоборот), то вы можете использовать для этого специальный софт, которого в интернете целая куча.
#slider {
width: 555px;
background: rgba(250,250,250,0.3);
padding: 30px 25px 30px 25px;
line-height: 25px;
margin-left: 35px;
}
jQuery
Теперь наш дизайн должен выглядеть довольно-таки симпатично, за исключением одной детали: попробуйте нажать на ссылку. Она работает? Я думаю, нет. Вот как раз тут нам и надо добавить немного jQuery. В следующем фрагменте нет ничего сложного.
В разделе head, мы импортируем нашу любимую JavaScript библиотеку из хранилища Google. Для этого вам необходимо вставить следующий код.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> </script>
Начнём, традиционно после полной загрузки документа document -> ready -> function.
$(document).ready(function(){
});
Далее нам необходимо создать обработчик, который будет срабатывать при клике. Когда пользователь нажмёт на элемент списка ‘li’, выполнится содержание функции.
$('li').click(function(){
});
Для начала нам необходимо определить переменную ‘number’ и выставить для неё соответствующий индекс. ‘This’ это элемент ‘li’, на который нажал пользователь. По той причине, что у нас нет отдельного класса для каждого элемента списка, мы будем использовать функцию ‘.index()’ для того, чтобы получить порядковый номер элемента.
$('li').click(function(){
var number = $(this).index();
});
Далее следует вот такой код:
$('li').click(function(){
var number = $(this).index();
$('h2').hide().eq(number).show();
$('p').hide().eq(number).show();
});
В этом фрагменте кода нет ничего сложного. Он делает выборку всех элементов ‘h2’ (и параграфов ‘p’) , а потом делает их невидимыми. Элементы, которые нам необходимо отображать мы вычисляем благодаря индексу и функции (eq). Подробное описание данной функции вы можете найти на сайте jQuery.
Далее нам необходимо изменить очерёдность классов active и inactive.
$('li').click(function(){
var number = $(this).index();
$('h2').hide().eq(number).show();
$('p').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('li').not(this).removeClass('active').addClass('inactive');
});
Вот что в итоге у нас вышло:
$(document).ready(function(){
$('li').click(function(){
var number = $(this).index();
$('h2').hide().eq(number).show();
$('p').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('li').not(this).removeClass('active').addClass('inactive');
});
$('h2').not(':first').hide();
$('p').not(':first').hide();
});
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Wi2tI2GY_LA/lessons.php
|
Иногда нам приходится пользоваться специальными объектами, для того чтобы распределить информацию на странице. Различного рода вкладки стали очень популярны, т.к. с ними работать и удобно и приятно. |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.