• 2440
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Футер представлен в двух вариациях: фиксированной длинны и во всю ширину. Построен футер на CSS + JS. javascript используется для усовершенствования футера, как при наведении мыши на элементы или при клике. Это означает, что если в браузере отключен javascript, он будет прекрасно работать во всех браузерах, но без эффектов. Так же присутствуют некоторые CSS3 функции, такие как закругленные углы и тени текста, так, что если пользователь зайдет с какого нибудь Internet Explorer (версий 6, 7 и 8), функциональность футера не будет нарушена.

Установка:
1. Скачать архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2. Залить файлы на сервер в папку шаблона согласно их директориям, в случае замены (ну вряд ли конечно) сделать бекап файлов.
3. Открыть main.tpl и в head вставить:

Код:
<script type="text/javascript" src="{tpl_url}/js/hoverintent.js"></script>
<script type="text/javascript" src="{tpl_url}/js/footer.js"></script>

<script type="text/javascript">
$(document).ready(function($){
$('#footer').stickyFooter({
speed : 'fast',
effect : 'hover_fade',
showhidefooter : 'show',
hide_speed : 1000,
hide_delay : 2000
});
});
</script>
Опции опишу ниже.
4.Вставляем код перед /body
Код:
<ul id="footer" class="footer_fixed">

<li id="footer_home"><a href="https://ngcmshak.ru/">Dark5ider.ru</a></li>
<li id="footer_home"><a href="#"><img src="{tpl_url}/images/footer_home.png" alt="Домой" /></a></li>

<li><a href="#" class="dropup">Большой блок</a><!-- Блок 3: Большой -->


<div class="footer_dropup drop10columns">


<div class="col_10">
<h4>Большой блок</h4>
</div>

<div class="col_5">
<p>Используйте один из любых 6 включенных JQuery эффектов, чтобы показать содержание блока, показываться может как при наведении мыши , так и при щелчке, с 3 различными стилями: fade, slide или toggle.
<p>В правой части находятся <a href="https://ngcmshak.ru/">соц. значки</a> с тултипом (стоит плагин hoverIntent, я бы лично советовал BootStrap)</p>
</div>

<div class="col_5">

<p class="black_box">В футере встроен ряд стилей для вывода информации, такие как: заголовки, списки, абзацы с иконками, (это темное поле), таблицы и изображения! Все эти элементы оформлены в CSS, вы можете использовать соответствующий класс в HTML..
</p>
</div>

<div class="clear"></div>

<div class="col_2">

<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>

</div>

<div class="col_2">

<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>

</div>

<div class="col_3">

<h5>Текст с иконкой</h5>

<p class="calendar">Это параграф с иконкой календаря</p>
<p class="note">Это параграф с иконкой заметки</p>
<p class="archive">Это параграф с иконкой архива</p>
<p class="search">Это параграф с иконкой поиска</p>
<p class="help">Это параграф с иконкой помощи.</p>

</div>

<div class="col_3">

<h5>И еще</h5>

<p class="delete">Это параграф с иконкой удаления</p>
<p class="favorite">Это параграф с иконкой избранного</p>
<p class="lock">Это параграф с иконкой блокировки.</p>
<p class="briefcase">Это параграф с иконкой портфеля.</p>
<p class="user">Это параграф с иконкой пользователя.</p>

</div>


</div>


</li><!-- Конец Блок 3 -->

<li><a href="#" class="dropup">Изображения</a><!-- Блок 4: Изображения -->


<div class="footer_dropup drop6columns">


<div class="col_6">

<h4>Простой параграф с изображением</h4>
<img src="img/asset01.jpg" class="imgshadow img_left" alt="" />
<p>Значение слова Простой по Ожегову:<br />
Не сложный, не трудный, легко доступный пониманию, осуществлению.
Самый обыкновенный не выделяющийся среди других.
Однородный по составу, не составной.
Не лучшего качества, грубый по обработке.
</p>
<p>Как-то случайно, без особого намерения.
Добродушный, простодушный, не церемонный.
Глуповатый, недалекий.
Безыскуственный, незамысловатый.
Без лишних сложностей, без церемоний.
</p>
<hr />
<h4>Еще один параграф с изображением</h4>
<img src="img/asset02.jpg" class="imgshadow img_left" alt="" />
<p>Значение слова Простой по Ожегову:<br />
Не сложный, не трудный, легко доступный пониманию, осуществлению.
Самый обыкновенный не выделяющийся среди других.
Однородный по составу, не составной.
Не лучшего качества, грубый по обработке.
</p>
<p>Как-то случайно, без особого намерения.
Добродушный, простодушный, не церемонный.
Глуповатый, недалекий.
Безыскуственный, незамысловатый.
Без лишних сложностей, без церемоний.
</p>

</div>


</div>


</li><!-- Конец Блок 4 -->

<li><a href="#" class="dropup">Текст, Таблицы и списки</a><!-- Блок 5: Текст, Таблицы и списки -->


<div class="footer_dropup drop8columns">


<div class="col_8">
<h4>Дополнительные списки</h4>
</div>

<div class="col_2">

<ol class="num">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ol>

</div>

<div class="col_2">

<ol class="num2">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ol>

</div>

<div class="col_2">

<ul class="list">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>

</div>

<div class="col_2">

<ul class="list2">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">еще...</a></li>
</ul>

</div>

<div class="col_8">
<hr />
</div>

<div class="col_4">

<p class="dark">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="brown">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="yellow">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="red">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="blue">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="green">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>

</div>

<div class="col_4">

<h4>Таблица</h4>

<p>Темная таблица хорошо сочетается с общим стилем футера.</p>

<table id="table_dark" cellspacing="0">
<tr><th>Заголовок</th><th>Заголовок</th><th>Заголовок</th></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
</table>

</div>


</div>


</li><!-- Конец Блок 5 -->

<li id="social"><!-- Блок 6: Соц сети -->


<ul>

<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/twitter.png' alt="" class="footer_icon" /><span>Twitter</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/rss.png' alt="" class="footer_icon" /><span>RSS</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/flickr.png' alt="" class="footer_icon" /><span>Flickr</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/facebook.png' alt="" class="footer_icon" /><span>Facebook</span></a></li>

</ul>


</li><!-- Конец Блок 6 -->

</ul>

<a id="footer_trigger" class="active" href="#"></a><!-- Кнопка свернуть -->
5. Готово.

Настройка:
speed : ставим насколько быстро "drop ups" показывается. Варианты: slow, normal, fast или значение в миллисекундах, пример: speed : 500
effect : Эффект показа "drop ups": 'hover_fade', 'hover_slide', 'hover_toggle', 'click_fade', 'click_slide' или 'click_toggle'
showhidefooter : Футер может быть скрыт или открыт, когда страница загрузилась, 'show' его покажет, ну и соответственно 'hide' скроет. hide с параметрами:
hide_speed : время (в миллисекундах) за которое футер "скрывается"
hide_delay : время (в миллисекундах) через которое футер "скрывается"

Можешь почитать и вот эту статейку "Мультидоменность - выводим статьи только на одном домене"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element