Хаки и Скрипты Next Generation CMS : Меню и навигация : Интересная реализация меню для сайта

irbees2008 Опубликовано - 23 - февраля Меню и навигация

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

Сегодня расскажу как установить Multi Leve lPush Menu ,меню отлично подойдет на сайт где надо скрывать его.
Итак приступим
1.Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с вашим шаблоном.
2.В head main.tpl подключаем стили и скрипты отвечающие за вывод иконок

Код:

1<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'>
2        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
3        <link rel="stylesheet" href="{tpl_url}/css/jquery.multilevelpushmenu.css">
4        <link rel="stylesheet" href="{tpl_url}/css/basichtml.css">
5        <script type="text/javascript" src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>

3 Код самого меню

Код:

001<div id="menu">
002            <nav>
003                <h2><i class="fa fa-reorder"></i>Все категории</h2>
004                <ul>
005                    <li>
006                        <a href="#"><i class="fa fa-laptop"></i>девайсы</a>
007                        <h2><i class="fa fa-laptop"></i>девайсы</h2>
008                        <ul>
009                            <li>
010                                <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
011                                <h2><i class="fa fa-phone"></i>Mobile Phones</h2>
012                                <ul>
013                                    <li>
014                                        <a href="#">Super Smart Phone</a>
015                                    </li>
016                                    <li>
017                                        <a href="#">Thin Magic Mobile</a>
018                                    </li>
019                                    <li>
020                                        <a href="#">Performance Crusher</a>
021                                    </li>
022                                    <li>
023                                        <a href="#">Futuristic Experience</a>
024                                    </li>
025                                </ul>
026                            </li>
027                            <li>
028                                <a href="#"><i class="fa fa-desktop"></i>Televisions</a>
029                                <h2><i class="fa fa-desktop"></i>Televisions</h2>
030                                <ul>
031                                    <li>
032                                        <a href="#">Flat Super Screen</a>
033                                    </li>
034                                    <li>
035                                        <a href="#">Gigantic LED</a>
036                                    </li>
037                                    <li>
038                                        <a href="#">Power Eater</a>
039                                    </li>
040                                    <li>
041                                        <a href="#">3D Experience</a>
042                                    </li>
043                                    <li>
044                                        <a href="#">Classic Comfort</a>
045                                    </li>
046                                </ul>
047                            </li>
048                            <li>
049                                <a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
050                                <h2><i class="fa fa-camera-retro"></i>Cameras</h2>
051                                <ul>
052                                    <li>
053                                        <a href="#">Smart Shot</a>
054                                    </li>
055                                    <li>
056                                        <a href="#">Power Shooter</a>
057                                    </li>
058                                    <li>
059                                        <a href="#">Easy Photo Maker</a>
060                                    </li>
061                                    <li>
062                                        <a href="#">Super Pixel</a>
063                                    </li>
064                                </ul>
065                            </li>
066                        </ul>
067                    </li>
068                    <li>
069                        <a href="#"><i class="fa fa-book"></i>Magazines</a>
070                        <h2><i class="fa fa-book"></i>Magazines</h2>
071                        <ul>
072                            <li>
073                                <a href="#">National Geographics</a>
074                            </li>
075                            <li>
076                                <a href="#">The Spectator</a>
077                            </li>
078                            <li>
079                                <a href="#">Rambler</a>
080                            </li>
081                            <li>
082                                <a href="#">Physics World</a>
083                            </li>
084                            <li>
085                                <a href="#">The New Scientist</a>
086                            </li>
087                        </ul>
088                    </li>
089                    <li>
090                        <a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
091                        <h2><i class="fa fa-shopping-cart"></i>Store</h2>
092                        <ul>
093                            <li>
094                                <a href="#"><i class="fa fa-tags"></i>Clothes</a>
095                                <h2><i class="fa fa-tags"></i>Clothes</h2>
096                                <ul>
097                                    <li>
098                                        <a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
099                                        <h2><i class="fa fa-female"></i>Women's Clothing</h2>
100                                        <ul>
101                                            <li>
102                                                <a href="#">Tops</a>
103                                            </li>
104                                            <li>
105                                                <a href="#">Dresses</a>
106                                            </li>
107                                            <li>
108                                                <a href="#">Trousers</a>
109                                            </li>
110                                            <li>
111                                                <a href="#">Shoes</a>
112                                            </li>
113                                            <li>
114                                                <a href="#">Sale</a>
115                                            </li>
116                                        </ul>
117                                    </li>
118                                    <li>
119                                        <a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
120                                        <h2><i class="fa fa-male"></i>Men's Clothing</h2>
121                                        <ul>
122                                            <li>
123                                                <a href="#">Shirts</a>
124                                            </li>
125                                            <li>
126                                                <a href="#">Trousers</a>
127                                            </li>
128                                            <li>
129                                                <a href="#">Shoes</a>
130                                            </li>
131                                            <li>
132                                                <a href="#">Sale</a>
133                                            </li>
134                                        </ul>
135                                    </li>
136                                </ul>
137                            </li>
138                            <li>
139                                <a href="#">Jewelry</a>
140                            </li>
141                            <li>
142                                <a href="#">Music</a>
143                            </li>
144                            <li>
145                                <a href="#">Grocery</a>
146                            </li>
147                        </ul>
148                    </li>
149                    <li>
150                        <a href="#">Collections</a>
151                    </li>
152                    <li>
153                        <a href="#">Credits</a>
154                    </li>
155                </ul>
156            </nav>
157        </div>

3.Перед /body подключаем скрипт самого меню и квели

Код:

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2        <script src="{tpl_url}/js/jquery.multilevelpushmenu.min.js"></script>
3        <script type="text/javascript" src="{tpl_url}/js/basichtml.js"></script>

Вот и все пользуемся,больше вариантов на сайте источнике,кому что не понятно пишем комментарии,отвечу всем.

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

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

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