» »

Новое и стильное меню для сайта uCoz


Новое и стильное меню для сайта uCoz

Очень красивое меню, подойдет для многих сайтов, просто у него такой дизайн тематический. Также вы можете поставить небольшие кнопки под разную тему. Как видим, навигация создана в светлых тонах, под светлые или скажем белые фоны интернет ресурса. Отлично будет смотреться в контейнере в первом блоке, но это как всегда по умолчанию. Но главный плюс, что можно в него залить много интересующейся вас информации.
Установка
Во второй контейнер (или куда душе угодно):
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!--U1CLEFTER1Z--><aside class="left_sidebar">
<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.
14.05.2016 Загрузок: 7 Просмотров: 581 Комментарий: (16)

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

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

Комментарий: 16
Kosten
Kosten 14.05.2016 00:321
+1
Здесь думаю можно применить стили от FontAwesome, статью только не могу найти, как устанавливать иконки.
Scheme
Scheme 14.05.2016 01:032
0
Сейчас больше замечаю, что светлое меню ставят, без всяких блоков, и чтоб иконки в них были.
Сопрано
Сопрано 14.05.2016 01:073
0
Но не пустые делают, все же разметка какая не какая есть, чтоб хоть понять, что кому относится. А меню мне кажется стандартное, чем и понятное.
avatar
1488 14.05.2016 09:394
0
Ребят!!! кто может помочь?! как сделать в персональной странице чтобы указывало возраст правильно-
например: возраст: 15лет, 22 года .. не помню что надо прописывать.Зарание Спасибки!
JoniDen
JoniDen 14.05.2016 10:535
0
В персональной странице смотри, там внизу коды есть на возраст вот:
Код
$_AGE$
avatar
1488 14.05.2016 10:566
0
не в коде дело! он выдает тока цифры этот код, а мне надо чтобы рядом с цифрами писал например: лет, года. сам распознавал.
XemorDio
XemorDio 14.05.2016 11:057
0
Чтобы именно "лет", "года", писалось нужно писать скрипт, а так можно просто ведь "Возраст: 20", всё же понятно и ясно? Никто не спросит , а что это такое?
P.S возможно в инете есть такой скрипт, но надо хорошенько поискать.
avatar
1488 14.05.2016 11:298
0
Вот скрин:

без слов смотреться не будет. надо поискать.
JoniDen
JoniDen 14.05.2016 13:009
0
Причем тут скрин?
avatar
1488 14.05.2016 13:5610
0
XemorDio, сказал типо: так можно просто ведь "Возраст: 20", всё же понятно и ясно?. он даже не понял представление как будет выглядеть. а на скрине показано как должно быть.
XemorDio
XemorDio 14.05.2016 15:1811
0
Оп, а скиньте сайт этот, можете в л.с. Я посмотрю у них как
avatar
1488 14.05.2016 16:1612
0
Скрин давно делал! так-что сайт не помню, ну там нету скрипта, у них тупо код стоит и приписано лет.
Fox1599
Fox1599 15.05.2016 09:1315
0
Это не скрипт а банальные условные операторы.
Вот как это делается
Код
$_AGE$ <?if(substr($_AGE$, -2, 2) = '11' || substr($COMMENTS_NUM$, -2, 2) = '12' || substr($_AGE$, -2, 2) = '13' || substr($_AGE$, -2, 2) = '14')?>лет<?else?><?if(substr($_AGE$, -1, 1) = '1')?>год<?else?><?if(substr($_AGE$, -1, 1) = '2'|| substr($_AGE$, -1, 1) = '3' || substr($_AGE$, -1, 1) = '4')?>года<?else?>лет<?endif?><?endif?><?endif?>
XemorDio
XemorDio 15.05.2016 15:0616
0
Жесть:D
Сам сделал или нашёл?)
Kosten
Kosten 14.05.2016 19:2413
0
Друзья, давайте по теме, по материалу, что представлен, есть вопросы, для этого есть тема на форуме, там можете создать тему, которую нужно.
feliksteg
feliksteg 14.05.2016 20:2614
0
Обычное явление, один написал не понимая где и ему отвечают. Модераторов видать не хватает...
avatar