Сегодня 11 августа, понедельник

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Хаки и Скрипты Next Generation CMS / Запись в блоге

	Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

Интересная реализация меню для сайта

2014-02-23 14:50:26 (читать в оригинале)

Сегодня расскажу как установить Multi Leve lPush Menu ,меню отлично подойдет на сайт где надо скрывать его.
Итак приступим
1.Скачиваем исходник [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам basichtml.zip (9.97 Kb)[/is-logged] ,распаковываем и заливаем в папку с вашим шаблоном.
2.В head main.tpl подключаем стили и скрипты отвечающие за вывод иконок
Код:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<link rel="stylesheet" href="{tpl_url}/css/jquery.multilevelpushmenu.css">
<link rel="stylesheet" href="{tpl_url}/css/basichtml.css">
<script type="text/javascript" src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>
3 Код самого меню
Код:
<div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>Все категории</h2>
<ul>
<li>
<a href="#"><i class="fa fa-laptop"></i>девайсы</a>
<h2><i class="fa fa-laptop"></i>девайсы</h2>
<ul>
<li>
<a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
<h2><i class="fa fa-phone"></i>Mobile Phones</h2>
<ul>
<li>
<a href="#">Super Smart Phone</a>
</li>
<li>
<a href="#">Thin Magic Mobile</a>
</li>
<li>
<a href="#">Performance Crusher</a>
</li>
<li>
<a href="#">Futuristic Experience</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i>Televisions</a>
<h2><i class="fa fa-desktop"></i>Televisions</h2>
<ul>
<li>
<a href="#">Flat Super Screen</a>
</li>
<li>
<a href="#">Gigantic LED</a>
</li>
<li>
<a href="#">Power Eater</a>
</li>
<li>
<a href="#">3D Experience</a>
</li>
<li>
<a href="#">Classic Comfort</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
<h2><i class="fa fa-camera-retro"></i>Cameras</h2>
<ul>
<li>
<a href="#">Smart Shot</a>
</li>
<li>
<a href="#">Power Shooter</a>
</li>
<li>
<a href="#">Easy Photo Maker</a>
</li>
<li>
<a href="#">Super Pixel</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Magazines</a>
<h2><i class="fa fa-book"></i>Magazines</h2>
<ul>
<li>
<a href="#">National Geographics</a>
</li>
<li>
<a href="#">The Spectator</a>
</li>
<li>
<a href="#">Rambler</a>
</li>
<li>
<a href="#">Physics World</a>
</li>
<li>
<a href="#">The New Scientist</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
<h2><i class="fa fa-shopping-cart"></i>Store</h2>
<ul>
<li>
<a href="#"><i class="fa fa-tags"></i>Clothes</a>
<h2><i class="fa fa-tags"></i>Clothes</h2>
<ul>
<li>
<a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
<h2><i class="fa fa-female"></i>Women's Clothing</h2>
<ul>
<li>
<a href="#">Tops</a>
</li>
<li>
<a href="#">Dresses</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
<h2><i class="fa fa-male"></i>Men's Clothing</h2>
<ul>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li>
<a href="#">Collections</a>
</li>
<li>
<a href="#">Credits</a>
</li>
</ul>
</nav>
</div>
3.Перед /body подключаем скрипт самого меню и квели
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{tpl_url}/js/jquery.multilevelpushmenu.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/basichtml.js"></script>
Вот и все пользуемся,больше вариантов на сайте источнике,кому что не понятно пишем комментарии,отвечу всем.

Тэги: меню, навигация

Блограйдеров
14516

Блогов
219965
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»

Категория «Дизайнеры»

Взлеты Топ 5


+76	114	zo0m's journal : Немного меня...
+73	99	Александр Никулин
+72	104	Чеширская__кошка
+43	117	Галерея web-дизайна Origin Site \| RSS лента
+4	5	TATARNIKOFF.COM

Падения Топ 5


-3	120	Секреты мастераСекреты мастера
-10	13	fashion-fashion.ru: всё самое модное
-12	4	Дизайн и мебель
-14	9	MisterM
-15	8	PSDTUTS

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.