| Сегодня 17 марта, понедельник |
      |
  
|
  
Какой рейтинг вас больше интересует?
|
Главная /
Каталог блоговCтраница блогера Хаки и Скрипты Next Generation CMS/Записи в блоге |
 |
Хаки и Скрипты Next Generation CMS
Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888 |
Адаптивное навигационное меню
2013-11-07 22:36:54 (читать в оригинале)Адаптивные сайты все больше прорываются в веб ппостранство,и вот я нашел урок по созданию адаптивного меню.
1.Будем использовать HMLT5,за меню у нас отвечает
Код:
<nav>Но вот проблема IE9,так что не забываем подключить скрипт приведенный ниже
</nav>
Код:
<!--[if lt IE 9]>2.Создаем список,само основание менюшки
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Код:
<nav>3.Добавим еще строчку пояснений
<ul>
<li><a href="#">PixelsDaily</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Код:
<nav>4. Теперь добавим стили
<ul>
<li><a href="#">PixelsDaily<br> <small>Go Home</small></a></li>
<li><a href="#">About<br> <small>Meet Us</small></a></li>
<li><a href="#">Clients<br> <small>Meet Our Friends</small></a></li>
<li><a href="#">Work<br> <small>See Our Work</small></a></li>
<li><a href="#">Podcast<br> <small>Hear Us</small></a></li>
<li><a href="#">Downloads<br> <small>Steal Our Stuff</small></a></li>
<li><a href="#">Blog<br> <small>Read About Us</small></a></li>
<li><a href="#">Contact<br> <small>Email Us</small></a></li>
</ul>
</nav>
Код:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
nav li a {
display: block;
float: left;
width: 12.5%;
padding: 10px;
background: #444;
border-right: 1px solid #fff;
color: #fff;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover {
background: #222;
}
nav li:last-child a {
border: none;
}
/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
nav li a {
font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav small {
font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
}
}
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav li:last-child a, nav li:nth-child(4) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
border-bottom: none;
}
}
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: 1px solid #fff;
}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
nav li a {
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
}вот и все
Размеры экранов для адаптивной верстки
2013-11-03 15:53:45 (читать в оригинале)Размеры экранов для адаптивной верстки , в котором расписаны наиболее распространенные размеры дисплеев.
Код:
/* Smartphones (portrait and landscape) ----------- */Если нужно скрыть какие-то блоки на мобильных устройствах:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Код:
@media (max-width: 960px) {
.hideme { display: none; }
}
Простой плагин JQuery Covering-Bad
2013-11-02 15:13:09 (читать в оригинале)Этот плагин использует перекрытие одного изображения другим с помощью ползунка
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам covering-bad-master.zip (567.36 Kb)[/is-logged] , распаковываем и заливаем в папку с шаблоном.
2.подключаем в хеад
Код:
<link href="{tpl_url}/css/coveringBad.css" type="text/css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
<script src="{tpl_url}/js/coveringBad.js" ></script>3.Подключаем туда где хотим видеть наш эффект Код:
<div class="covered">4.Иницилиазируем наш наш блок
<div class="handle"></div>
<div class="changeable"></div>
</div>
Код:
<script type="text/javascript">$(function() {
$('.covered').coveringBad();
});</script>5.Настройки скриптаКод:
marginY : 20, // Handle's distance from top and bottom6.Мульти
marginX : 20, // Handle's distance from left and right
setX : 30, // Defulat location for handle from left
setY : 150, // Defulat location for handle from top
direction : "horizontal" // would be horizontal/vertical
Код:
<div class="covered first">
<div class="handle"></div>
<div class="changeable"></div>
</div>
<div class="covered second">
<div class="handle"></div>
<div class="changeable"></div>
</div>
<div class="covered third">
<div class="handle"></div>
<div class="changeable"></div>
</div>
Код:
$(function() {
$('.first').coveringBad();
$('.second').coveringBad();
$('.third').coveringBad({
marginY : 20 ,
marginX : 400 ,
setX : 400,
setY : 235 ,
direction : "vertical"
});
});вроде все ,кому не очень понятно можете посмотреть исходники,или задать вопрос в комментариях
JQuery анимация кнопок
2013-10-30 16:10:15 (читать в оригинале)Этот простой плагин JQuery оживляет значок на кнопкe .
1.Скачиваем [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам examples.zip (344.4 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном
2.Подключаем стили :
Код:
<link rel="stylesheet" href="{tpl_url}/icomon/style.css" />
<link rel="stylesheet" href="{tpl_url}/css/loda-button.css" />3.Код самой кнопки ставим туда где хотите её видеть:Код:
<a href="#" class="loda-btn">4.Перед /body подключаем скрипты:
<span aria-hidden="true" class="loda-icon icon-mail"></span>
</a>
Код:
<script type="text/javascript" src="{tpl_url}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="{tpl_url}/js/loda-button.js"></script>
<script type="text/javascript">
$('.loda-btn')
.lodaButton()
.click(function(e) {
e.preventDefault();
var _self = $(this);
_self.lodaButton('start');
setTimeout(function() {
_self.lodaButton('stop');
}, 2000);
});
</script>Классы loda-btn и loda-icon использует плагин для применения стиля к кнопке. Опять же, стиль довольно прост и делается в файле loda-button.css . Таблицы стилей могут быть изменены, как вам нравится.
Для создания имени кнопки использовать обычный стиль JQuery:
Код:
var lodaBtn = $('#loda-btn').lodaButton();Для активации кнопки и запустить анимацию значка:
Код:
lodaBtn.lodaButton('start');и остановить анимацию:
Код:
lodaBtn.lodaButton('stop');Анимация создается с помощью CSS3 анимации, переходы и преобразования, которые поддерживаются Chrome, Firefox, Opera и Internet Explorer 10
Калькулятор калорий
2013-10-25 15:00:15 (читать в оригинале)Вот нашел скрипт калькулятора калорий,может кому пригодится.
И так приступим
1.скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам menshealth.zip (63.19 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном
2.подключаем в хеад скрипты и стили
Код:
<script type="text/javascript" src="{tpl_url}/js/jquery-1.6.1.js" ></script>
<link rel="stylesheet" href="{tpl_url}/css/stile.css" type="text/css" />
<script type="text/javascript" src="{tpl_url}/js/calc.js" ></script>
<script>
var crm = new Array();
var crb = new Array();
var crj = new Array();
var cru = new Array();
var crk = new Array();
var pattern = /[^a-zA-Z\s_$]+/;
</script>3.в вот код самого калькулятора [code]