Новое и стильное меню для сайта uCoz
 | |
| Очень красивое меню, подойдет для многих сайтов, просто у него такой дизайн тематический. Также вы можете поставить небольшие кнопки под разную тему. Как видим, навигация создана в светлых тонах, под светлые или скажем белые фоны интернет ресурса. Отлично будет смотреться в контейнере в первом блоке, но это как всегда по умолчанию. Но главный плюс, что можно в него залить много интересующейся вас информации. Установка Во второй контейнер (или куда душе угодно): Код <div class="sidebar_bl"> <div class="sidebar_title_bl">Навигация <span>по сайту</span></div> <span class="sidebar_hr"></span> <div class="sidebar_body"> <!-- mega menu --> <ul class="sky-mega-menu sky-mega-menu-pos-left sky-mega-menu-anim-scale"> <li><a href="/" title="Скачать игры торрентом"><i class="fa fa-home"></i>Главная страница</a></li> <!-- switcher --> <li class="switcher"> <a onclick=""><i class="fa fa-bars"></i>Меню</a> </li> <!--/ switcher --> <li aria-haspopup="true"> <a href="/load/" title="Скачать игры"><i class="fa fa-floppy-o"></i>Скачать игры</a> <div class="grid-container3"> <div class="grid-column grid-column3"> <ul> <li><a href="/load/skoro_glavnaja/4-1-0" title="Скачать новые игры">Горячие новинки</a></li> <li><a href="/load/pc/5-1-0" title="Скачать игры для ПК">Игры для ПК</a></li> <li><a href="/load/xbox/6-1-0" title="Скачать игры для XBOX">Игры для XBOX</a></li> <li><a href="/load/playstation/7-1-0" title="Скачать игры для PlayStation">Игры для PlayStation</a></li> <li><a href="/load/igry_dlja_android/10" title="Скачать игры для Android">Игры для Android</a></li> <li><a href="/load/igry_dlja_iphone_ipod_touch/11" title="Скачать игры для iOS">Игры для iOS</a></li> </ul> </div> <div class="grid-column grid-column3"> </div> <div class="grid-column grid-column3"> <ul> </ul> </div> </div> </li> <li aria-haspopup="true"> <a href="/news/" title="Новости"><i class="fa fa-bullhorn"></i>Игровые новости</a> <div class="grid-container3"> <div class="grid-column grid-column3"> <ul> <li><a href="/news/novosti/1-0-8" title="">Игровые новости</a></li> <li><a href="/news/video/1-0-2" title="">Трейлеры, видеообзоры</a></li> </ul> </div> <div class="grid-column grid-column3"> <ul> </ul> </div> </div> </li> <li><a href="/load/data_vykhoda/1"><i class="fa fa-calendar"></i>Скоро на сайте</a></li> <li><a href="/dir/"><i class="fa fa-drupal"></i>Скачать моды</a> <div class="grid-column grid-column3"> <ul> <li><a href="/dir/beamng_drive/91" title="Скачать моды для BeamNG Drive"><img src="http://j-p-g.net/if/2016/02/12/0827342001455298615.png" alt="Скачать моды для BeamNG Drive" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left:35px;"><b>BeamNG Drive</b></p></a></li> <li><a href="/dir/euro_truck_simulator_2/35" title="Скачать моды для Euro Truck Simulator 2"><img src="http://j-p-g.net/if/2016/02/12/0787082001455298633.png" alt="Скачать моды для Euro Truck Simulator 2" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Euro Truck Simulator 2</b></p></a></li> <li><a href="/dir/fallout/93" title="Скачать моды для Fallout 4"><img src="http://j-p-g.net/if/2016/02/12/0923964001455298647.jpg" alt="Скачать моды для Fallout 4" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Fallout 4</b></p></a></li> <li><a href="/dir/farming_simulator_2015/48" title="Скачать моды для Farming Simulator 2015"><img src="http://j-p-g.net/if/2016/02/12/0543873001455298665.png" alt="Скачать моды для Farming Simulator 2015" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Farming Simulator 2015</b></p></a></li> <li><a href="/dir/gta_iv/2" title="Скачать моды для Grand Theft Auto IV"><img src="http://j-p-g.net/if/2016/02/12/0639955001455298679.png" alt="Скачать моды для Grand Theft Auto IV" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Grand Theft Auto IV</b></p></a></li> <li><a href="/dir/gta_v/3" title="Скачать моды для Grand Theft Auto V"><img src="http://j-p-g.net/if/2016/02/12/0590026001455298707.png" alt="Скачать моды для Grand Theft Auto V" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Grand Theft Auto V</b></p></a></li> <li><a href="/dir/gta_san_andreas/1" title="Скачать моды для GTA: San Andreas"><img src="http://j-p-g.net/if/2016/02/12/0558585001455298726.png" alt="Скачать моды для GTA: San Andreas" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>GTA: San Andreas</b></p></a></li> <li><a href="/dir/just_cause_3/119" title="Скачать моды для Just Cause 3"><img src="http://j-p-g.net/if/2016/02/12/0579521001455298740.jpg" alt="Скачать моды для Just Cause 3" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Just Cause 3</b></p></a></li> <li><a href="/dir/minecraft_1_7_2/54" title="Скачать моды для Minecraft"><img src="http://j-p-g.net/if/2016/02/12/0627136001455298751.jpg" alt="Скачать моды для Minecraft" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Minecraft</b></p></a></li> <li><a href="/dir/spintires/37" title="Скачать моды для Spintires"><img src="http://j-p-g.net/if/2016/02/12/0669225001455298765.png" alt="Скачать моды для Spintires" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Spintires</b></p></a></li> <li><a href="/dir/tes_v_skyrim/61" title="Скачать моды для TES V: Skyrim"><img src="http://j-p-g.net/if/2016/02/12/0149522001455298803.png" alt="Скачать моды для TES V: Skyrim" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>TES V: Skyrim</b></p></a></li> <li><a href="/dir/the_witcher_3_wild_hunt/30" title="Скачать моды для The Witcher 3: Wild Hunt"><img src="http://j-p-g.net/if/2016/02/12/0703482001455298820.png" alt="Скачать моды для The Witcher 3: Wild Hunt" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>The Witcher 3: Wild Hunt</b></p></a></li> <li><a href="/dir/drugie_igry/97" title="Скачать моды для игр"><img src="http://j-p-g.net/if/2016/02/12/0730676001455298835.png" alt="Скачать моды для игр" style="padding-right: 5px;margin-bottom:-8px;"><p style="position:absolute;margin-top:-25px; padding-left: 35px;"><b>Другие игры</b></p></a></li> </ul> </div> </li> <li><a href="/blog/stati/1-0-2"><i class="fa fa-list-alt"></i>Статьи</a></li> <li><a href="/blog/obzory_igr/1-0-1"><i class="fa fa-youtube"></i>Обзоры игр</a></li> <li><a href="/board/novyj_kljuch/1-1-0-38"><i class="fa fa-steam"></i><i>Раздача ключей STEAM<b style="position:absolute;font-size:8px;color:#EB0000;margin-top:-5px;margin-left:5px;"> new</b></i></a></li> В страницу сайта, в самом начале после meta прописать вот это: Код <link rel='stylesheet' href='/template/css/sky-mega-menu.css'> Чтоб у нас появились иконки, так как они автоматически проставлены, вам нужно прописать стиль вверх сайта в /head и тогда у вас появится больше функций, что можно ознакомиться здесь, и вы сами можете потом сменить под тематику все кнопки. Код <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> (rip Бармен) - он же JoniDen. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 18 | |
|
| |
