» »

Меню категорий для сайта на CSS3


Меню категорий для сайта на CSS3

Вы можете сделать уникальное появление категорий вашего сайта на CSS3 и jQuery. Красивая анимация появление его, по клику кнопки на сайте. Что можно с точностью подчеркнуть, это уникально смотрится на любой тематике интернет ресурса. Вы можете выставить кнопку там где считаете нужным и написать, что это категорий или может разделы, возможно та информация, которую посчитаете нужным поставить. И после нажатие на весь монитор появится темно прозрачный фон и на нем кнопки, где пользователь может прочесть, куда ему перейти. Можно установить на многие порталы, так как кнопка вызова будет по дизайн, который вам нужен и здесь даже можно просто прописью написать.

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

Переходим к установки:

Скачиваем архив с нашего сайта и папку menu_css загружаем в свой Файловый Менеджер.

Подключаем стили меню перед /hеаd

Код
<link rel="stylesheet" href="/menu_css/style.css">  
<script src="/menu_css/modernizr.js"></script>


Перед /body вставляете:

Код
<script src="/menu_css/main.js"></script>


Кнопка вызова меню:

Код
<section class="cd-section">  
<a class="cd-bouncy-nav-trigger" href="javascript://">Открыть меню сайта</a>  
</section>


Само меню вставляете в нижнюю часть сайта:

Код
<div class="cd-bouncy-nav-modal">  
<nav>  
<ul class="cd-bouncy-nav">  
<li><a href="http://zornet.ru/">Навигация 1</a></li>  
<li><a href="http://zornet.ru/">Категория 2</a></li>  
<li><a href="http://zornet.ru/">Навигация 3</a></li>  
<li><a href="http://zornet.ru/">Навигация 4</a></li>  
<li><a href="http://zornet.ru/">Навигация 5</a></li>  
<li><a href="http://zornet.ru/">Категория 6</a></li>  
</ul>  
</nav>  
<a href="javascript://" class="cd-close">Закрыть меню</a>  
</div>


PS - возможно сделать больше и вообще вывести самые главные как разделы или категорий, здесь уже вам больше виднее как задействовать.

Источник: Webmaster-ucoz.ru
27.11.2016 Загрузок: 3 Просмотров: 313 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
tsakonter
tsakonter 28.11.2016 01:061
0
Но это на уникальные дизайн сайта подойдет отлично, а на простой сайт или кино сайт, можно поставить, но лишним будет. А так создано все стильно, где при нажатие кнопки появится можно сказать страница.
Сафрон
Сафрон 28.11.2016 01:112
0
Вот под категорий нормально будет, просто не вижу, чтоб можно больше сделать, здесь все очень понятно.
Kosten
Kosten 28.11.2016 01:183
0
Категорий может больше быть, и значит нужно уменьшать, чтоб все корректно смотрелось.
avatar