Показаны сообщения с ярлыком jQuery. Показать все сообщения
Показаны сообщения с ярлыком jQuery. Показать все сообщения
февраля 09, 2012
Эффектные слайд-шоу и фото-галереи jQuery
июня 09, 2011
Меню "Аккордеон" на основе jQuery и CSS
Всем, снова здравствуйте.
Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. Меня спрашивают, как сделать меню в стиле "аккордеон" с функцией открытия и закрытия подменю не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе CSS и совсем немного jQuery.
Но для начала, хотелось бы выделить основные преимущества данного меню:
Вопервых, это не большие размеры, а стало быть возможность размещения в боковых панелях сайта.
Вовторых, это многофункциональность вложенных элементов меню.
Третьим и немаловажным фактом является гибкость настройки отображаемых элементов, все ограничивается только фантазией разработчика.
В начале документа html между тегами <head> и </head> размещаете три заветные строчки:
Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться другим дополнительным классом, например "expand".
Теперь наступает самый интересный момент, во всяком случае для меня, это оформление нашего "аккордеона" с помощью таблицы стилей css, а с открывшимися в последнее время новыми возможностями, добиться можно потрясающих результатов, при этом совсем не используя графических фалов в работе.
И так, код стилей меню, кому то может показаться слишком объемным, так что к некоторым пунктам я добавил пояснения:
Оформляя главные пункты меню, добавил функцию градиента для фона, благо с недавних пор практически все современные браузеры поддерживают это свойство CSS3. Ну а для притормаживающего IE понадобился специальный фильтр, с помощью которого градиент отображается более или менее нормально, правда в силу своей испорченности и врожденной ненависти к веб-дизайнерам, этот браузер переносит градиент главных пунктов меню на выпадающие списки подменю. Так что применять функию градиента или нет решать вам, я так думаю, пошел он этот IEшка в жопу...
Изменяя цветовую палитру и экспериментируя с переходами цвета в функции градиента, вы всегда сможете подвести меню под дизайн своего сайта, в примере использованы темные тона и контрастный красный цвет для активных пунктов меню.
Все это конечно очень даже хорошо, но все же не стоит забывать о том, что код CSS не свободен от недостатков ( вдруг я гдето накосячил ) и представлен в ознакомительных целях. Работая над построением меню, проверяйте конечный результат на кроcсбраузерность и тогда все у вас получится.
Всем спасибо и удачи.
HTMLPad 2010 - всеобъемлющий редактор HTML, CSS, JavaScript и XHTML, который на данный момент является выбором тысяч веб-разработчиков и преподавателей более чем в 50-ти странах.
Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. Меня спрашивают, как сделать меню в стиле "аккордеон" с функцией открытия и закрытия подменю не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе CSS и совсем немного jQuery.
Но для начала, хотелось бы выделить основные преимущества данного меню:
Вопервых, это не большие размеры, а стало быть возможность размещения в боковых панелях сайта.
Вовторых, это многофункциональность вложенных элементов меню.
Третьим и немаловажным фактом является гибкость настройки отображаемых элементов, все ограничивается только фантазией разработчика.
Разметка HTML
Как всегда свою работу начнем с разметки непосредственно на странице html. Ничего сверхестественного и навароченного, наше меню будет выглядеть в виде простого списка с определенными классами, необходимыми для последующей доводки и оформления. Исходя из примера код html будет следующим:<ul class="menu collapsible">
<li>
<a href="#">Рубрики</a>
<ul class="acitem">
<li>
<a href="#">Рубрика 1</a>
</li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
<li><a href="#">Рубрика 4</a></li>
<li><a href="#">Рубрика 5</a></li>
<li><a href="#">Рубрика 6</a></li>
</ul>
</li>
<li>
<a href="#">Архивы</a>
<ul class="acitem">
<li><a href="#">Январь (10)</a></li>
<li><a href="#">Февраль (15)</a></li>
<li><a href="#">Март (8)</a></li>
<li><a href="#">Апрель (12)</a></li>
<li><a href="#">Май (9)</a></li>
<li><a href="#">Июнь (4)</a></li>
</ul>
</li>
</ul>
Для полноценной работы нам потребуется подключить JQuery, функцию меню и таблицу стилей, которые найдете в исходниках. Используя эти не хитрые инструменты, можно в последствии изменить внешний вид и настроить параметры работы меню исходя из своих потребностей.<li>
<a href="#">Рубрики</a>
<ul class="acitem">
<li>
<a href="#">Рубрика 1</a>
</li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
<li><a href="#">Рубрика 4</a></li>
<li><a href="#">Рубрика 5</a></li>
<li><a href="#">Рубрика 6</a></li>
</ul>
</li>
<li>
<a href="#">Архивы</a>
<ul class="acitem">
<li><a href="#">Январь (10)</a></li>
<li><a href="#">Февраль (15)</a></li>
<li><a href="#">Март (8)</a></li>
<li><a href="#">Апрель (12)</a></li>
<li><a href="#">Май (9)</a></li>
<li><a href="#">Июнь (4)</a></li>
</ul>
</li>
</ul>
В начале документа html между тегами <head> и </head> размещаете три заветные строчки:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Как вы видите основной элемент в меню это тег UL, который имеет класс "menu" с дополнительным классом "collapsible". В данном и конкретном случае мы получаем раздвижной "аккордеон" с функцией открытия и закрытия непосредственно при нажатии на главный пункт меню.<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться другим дополнительным классом, например "expand".
CSS
Теперь наступает самый интересный момент, во всяком случае для меня, это оформление нашего "аккордеона" с помощью таблицы стилей css, а с открывшимися в последнее время новыми возможностями, добиться можно потрясающих результатов, при этом совсем не используя графических фалов в работе.
И так, код стилей меню, кому то может показаться слишком объемным, так что к некоторым пунктам я добавил пояснения:
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
padding: 0.5em;
/* закругленные углы пунктов меню */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #d7d7d7;
border: solid 1px #333;
background: #333;
/* функция градиента для Webkit - браузеров */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
/* функция градиента для Firefox + */
background: -moz-linear-gradient(top, #666, #000);
/* функция градиента для Opera 11 + */
background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
/* примочка для тупого IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
/* фон и градиент пунктов меню при наведении */
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
background-image: -o-linear-gradient(top, #ed1c24, #aa1317);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
padding: 0.5em;
/* закругленные углы пунктов меню */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #d7d7d7;
border: solid 1px #333;
background: #333;
/* функция градиента для Webkit - браузеров */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
/* функция градиента для Firefox + */
background: -moz-linear-gradient(top, #666, #000);
/* функция градиента для Opera 11 + */
background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
/* примочка для тупого IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
/* фон и градиент пунктов меню при наведении */
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
background-image: -o-linear-gradient(top, #ed1c24, #aa1317);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}
Оформляя главные пункты меню, добавил функцию градиента для фона, благо с недавних пор практически все современные браузеры поддерживают это свойство CSS3. Ну а для притормаживающего IE понадобился специальный фильтр, с помощью которого градиент отображается более или менее нормально, правда в силу своей испорченности и врожденной ненависти к веб-дизайнерам, этот браузер переносит градиент главных пунктов меню на выпадающие списки подменю. Так что применять функию градиента или нет решать вам, я так думаю, пошел он этот IEшка в жопу...
Изменяя цветовую палитру и экспериментируя с переходами цвета в функции градиента, вы всегда сможете подвести меню под дизайн своего сайта, в примере использованы темные тона и контрастный красный цвет для активных пунктов меню.
Все это конечно очень даже хорошо, но все же не стоит забывать о том, что код CSS не свободен от недостатков ( вдруг я гдето накосячил ) и представлен в ознакомительных целях. Работая над построением меню, проверяйте конечный результат на кроcсбраузерность и тогда все у вас получится.
Всем спасибо и удачи.
* * * * *
HTMLPad 2010 - всеобъемлющий редактор HTML, CSS, JavaScript и XHTML, который на данный момент является выбором тысяч веб-разработчиков и преподавателей более чем в 50-ти странах.
мая 20, 2011
Широкоформатный Слайдер для сайта
Всем доброго дня или ночи, это уж кого как вставило.
Сегодня, собравшись с мыслями и отбросив все сомнения, мы вместе с вами уважаемые читатели нашего блога, рассмотрим интересное и популярное решение по выводу изображений на страницах сайта в виде “слайдера”, иначе, доведенного до ума, хорошо всем знакомого, ротатора баннеров.
Достопочтенные буржуины например, давно и плотно используют слайдеры на своих блогах, не только в качестве галерей, но и как способ анонсирования статей на главных страницах. Среди наших блогеров “слайдеры” так же приобретают все большую популярность, все чаще можно увидеть использование шаблонов и тем со встроенными ротаторами изображений. Как все это устроено и работает, мы и попробуем разобраться, без лишней суеты, как говориться: с чувством, с толком, с расстановкой.
Для того что бы слайдер заработал, в первую очередь нам необходимо подключить к документу html дополнительные javascript, а точнее плагины jQuery, которые вы найдете в папке с исходниками, для этого перед тегом /head следует прописать следующее:
Затем нужно определиться с местом где будет выводиться сам слайдер, в моем примере вывод ротатора настроен сразу под шапкой и меню точно посередине, так как в нашем случае слайдер широкоформатный и занимает всю ширину фиксированного шаблона размером 960px. Не стал особо мудрить и заключил наш слайдер в div контейнер, выглядит в html это так:
Вот и все, проделав все вышеописанное, предварительно не забыв скачать архив с исходниками, вы получите в свое распоряжение замечательный, широкоформатный слайдер для изображений с красивым анимированным эффектом перехода от одной картинки к другой и с возможностью вывода анонса статей, а что еще надо страждущему блогеру.
Всем спасибо и удачи.
Отдельное спасибо: Dobrovoimaster
Сегодня, собравшись с мыслями и отбросив все сомнения, мы вместе с вами уважаемые читатели нашего блога, рассмотрим интересное и популярное решение по выводу изображений на страницах сайта в виде “слайдера”, иначе, доведенного до ума, хорошо всем знакомого, ротатора баннеров.
Достопочтенные буржуины например, давно и плотно используют слайдеры на своих блогах, не только в качестве галерей, но и как способ анонсирования статей на главных страницах. Среди наших блогеров “слайдеры” так же приобретают все большую популярность, все чаще можно увидеть использование шаблонов и тем со встроенными ротаторами изображений. Как все это устроено и работает, мы и попробуем разобраться, без лишней суеты, как говориться: с чувством, с толком, с расстановкой.
Установка:
Для того что бы слайдер заработал, в первую очередь нам необходимо подключить к документу html дополнительные javascript, а точнее плагины jQuery, которые вы найдете в папке с исходниками, для этого перед тегом /head следует прописать следующее:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.settings.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.settings.js"></script>
Затем нужно определиться с местом где будет выводиться сам слайдер, в моем примере вывод ротатора настроен сразу под шапкой и меню точно посередине, так как в нашем случае слайдер широкоформатный и занимает всю ширину фиксированного шаблона размером 960px. Не стал особо мудрить и заключил наш слайдер в div контейнер, выглядит в html это так:
<div id="banner">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="banner/banner.jpg" alt="" /></a>
<a href="#"><img src="banner/banner2.jpg" alt="" title="#htmlcaption" /></a>
<a href="#"><img src="banner/banner3.jpg" alt="" /></a>
<a href="#"><img src="banner/banner4.jpg" alt="" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div>
</div>
</div>
Как вы видите ничего сложного и особо навороченного в данном коде нет, все настройки вынесены в отдельный файл стилей style.css, который так же следует подключить к нашему документу:<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="banner/banner.jpg" alt="" /></a>
<a href="#"><img src="banner/banner2.jpg" alt="" title="#htmlcaption" /></a>
<a href="#"><img src="banner/banner3.jpg" alt="" /></a>
<a href="#"><img src="banner/banner4.jpg" alt="" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="css/style.css" title="styles1" />
Соответственно путь к файлу у вас может разниться с указанным в примере, так что будьте внимательны и постарайтесь не лопухнуться, иначе вылезет полнейший косяк. В стилях тоже особо сложных настроек не наблюдается, думаю трудностей не возникнет, если решите поэкспериментировать с параметрами при желании изменить внешний вид слайдера./* Основа ротатора изображений */
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center;}
/* Контейнер */
#container { width:960px; margin: 20px auto; }
#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }
#slider { position:relative; width:960px; height:260px;background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }
.nivo-controlNav { margin:auto;padding:0; position:absolute; bottom:-19px;left:440px;text-align:center; margin:auto; }
.nivo-controlNav a { display:block;width:15px;height:15px;
background:url(../images/bullets.png) no-repeat; text-indent:-9999px;
border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active {font-weight:bold; background-position:0 -22px; }
.nivo-directionNav a { display:block; width:56px; height:50px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px; border:0; position:absolute; top:45%;
z-index:30;cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }
/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }
/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
top:0px; left:0px; width:100%; height:100%;
border:0; padding:0; margin:0; z-index:20; display:none; }
.nivo-slice { display:block; position:absolute;z-index:10;height:100%; }
/* Стили заголовка */
.nivo-caption {position:absolute; left:0px; bottom:0px; font:13px calibri;
padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }
.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline;display:inline !important; }
.nivo-html-caption { display:none; }
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center;}
/* Контейнер */
#container { width:960px; margin: 20px auto; }
#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }
#slider { position:relative; width:960px; height:260px;background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }
.nivo-controlNav { margin:auto;padding:0; position:absolute; bottom:-19px;left:440px;text-align:center; margin:auto; }
.nivo-controlNav a { display:block;width:15px;height:15px;
background:url(../images/bullets.png) no-repeat; text-indent:-9999px;
border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active {font-weight:bold; background-position:0 -22px; }
.nivo-directionNav a { display:block; width:56px; height:50px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px; border:0; position:absolute; top:45%;
z-index:30;cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }
/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }
/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
top:0px; left:0px; width:100%; height:100%;
border:0; padding:0; margin:0; z-index:20; display:none; }
.nivo-slice { display:block; position:absolute;z-index:10;height:100%; }
/* Стили заголовка */
.nivo-caption {position:absolute; left:0px; bottom:0px; font:13px calibri;
padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }
.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline;display:inline !important; }
.nivo-html-caption { display:none; }
Вот и все, проделав все вышеописанное, предварительно не забыв скачать архив с исходниками, вы получите в свое распоряжение замечательный, широкоформатный слайдер для изображений с красивым анимированным эффектом перехода от одной картинки к другой и с возможностью вывода анонса статей, а что еще надо страждущему блогеру.
Всем спасибо и удачи.
Отдельное спасибо: Dobrovoimaster
Подписаться на:
Комментарии (Atom)