» »

Горизонтальное меню 6 оттенков для uCoz


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

Горизонтальное меню


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

Чтоб быстро выбрать под свой дизайн сайта, сразу будет идти несколько оттенков цвета и думаю не трудно подобрать то что нужно. Просто выставлена гамма, та которая основном применяется в интернет ресурсе.

Меню сайта


Основы этого материала узнали и приступаем к установке.

1) Создаем папку CSS и загружаем в корень сайта, тот оттенок, который вам нужен.
2) Копируем скрипт и ставим там где вам нужно, но как основа идет, это вверх сайта в самый низ.

Скрипт:

Код
<link rel="stylesheet" type="text/css" href="/demo_file/fix_menu/css/reset.css" media="screen" />  
<link rel="stylesheet" type="text/css" href="/demo_file/fix_menu/css/style.css" media="screen" />  
<div id="menu_div">  
<div id="navigation">  
<div id="menu">  
<ul id="nav">  
<li><a href="http://internetempire.ru/">Главная</a></li>  
<li><a href="#">Меню</a>  
<ul>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю - Уровень 2</a>  
<ul>  
<li><a href="#">Подменю 2</a></li>  
<li><a href="#">Подменю 2</a></li>  
<li><a href="#">Подменю - Уровень 3</a>  
<ul>  
<li><a href="#">Подменю 3</a></li>  
<li><a href="#">Подменю 3</a></li>  
</ul>  
</li>  
</ul>  
</li>  
</ul>  
</li>  
<li><a href="#">Меню 2</a>  
<ul>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю - Уровень 2</a>  
<ul>  
<li><a href="#">Подменю 2</a></li>  
<li><a href="#">Подменю 2</a></li>  
</ul>  
</li>  
</ul>  
</li>  
<li><a href="#">Меню 3</a>  
<ul>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю</a></li>  
<li><a href="#">Подменю</a></li>  
</ul>  
</li>  
<li><a href="#">Форум</a></li>  
<li><a href="#">Архив материалов</a></li>  
<li><a href="#">Блог</a></li>  
</ul>  
<!-- Форма Поиска -->  
<form class="searchform" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/">  
<input class="searchfield" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>  
</form>  
<!-- / Форма Поиска -->  
</div>  
</div>  
</div>


Источник: http://internetempire.ru/
06.02.2016 Загрузок: 16 Просмотров: 688 Комментарий: (82)

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

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

Комментарий: 81
YaVi
YaVi 06.02.2016 01:471
+1
Не плохое меню)
tsakonter
tsakonter 06.02.2016 01:492
0
Но они основном идут похожие, здесь как понимаю, не нужно не чего красить а просто выставит тот цвет который нужен. И убрать некоторые под меню, особенно 3 положение.
YaVi
YaVi 06.02.2016 01:515
0
Ну это уже вам решать, что убирать) Меню в вашем распоряжение)
Kosten
Kosten 06.02.2016 01:493
0
Полностью согласен, ты сам такое замутил?
YaVi
YaVi 06.02.2016 01:527
0
Нет, рипнул)
Tergran
Tergran 06.02.2016 01:5610
0
Дайте Demo, если оно есть.
YaVi
YaVi 06.02.2016 01:5813
+1
Снизу можно увидеть
Maryges
Maryges 06.02.2016 01:5914
+1
YaVi, с меня плюс, круто ты его сделал, особенно с поиском, точно эффект есть.
YaVi
YaVi 06.02.2016 02:0015
0
Спасибо)
Kosten
Kosten 06.02.2016 02:1725
0
Но нужно грамотно рипнуть и это также нужно уметь делать.
Kosten
Kosten 06.02.2016 01:514
0
В поиске как видите нет кнопки, так что просто пишем что ищем и жмем Enter и все, то что есть найдет.
Сафрон
Сафрон 06.02.2016 01:526
0
Костен, ты на каждое меню демо ставил, что сейчас не ставишь.
Kosten
Kosten 06.02.2016 01:538
0
Но оно есть, просто забыл, так как YaVi выставил, если что он пропишет здесь.
Tergran
Tergran 06.02.2016 01:559
0
Согласен, что 3 уровня, это перебор, но главное вы сами можете потом поставить как нужно, это не трудно убрать и вообще без под меню сделать.
YaVi
YaVi 06.02.2016 01:5711
+3
С разрешения Администрации, ставлю ссылку на Демо
csretven
csretven 06.02.2016 02:0316
0
Благодарствую, нормально смотрится, вообще мне темный цвет сочетанием желтого всегда нравиться.
YaVi
YaVi 06.02.2016 02:0417
0
Я рад что Вам понравилось)
Сопрано
Сопрано 06.02.2016 02:0718
0
Больше поиск понравился, но само меню сделано стандартно, но когда надо, не когда не найдешь.)
YaVi
YaVi 06.02.2016 02:1121
0
Да, поиск отличный)
AnTron
AnTron 06.02.2016 01:5812
+1
Зайдите на источник и там найдете меню и посмотрите его в работе.
ucozmental
ucozmental 06.02.2016 02:0919
0
Всем спасибо, кто его делал, кто залил на сайт, искал такое примерно, теперь нашел, пошел переставлю.
YaVi
YaVi 06.02.2016 02:1120
0
Спасибо Администрации сайта) Она для Вас работает)
Сафрон
Сафрон 06.02.2016 02:1322
0
Вам также спасибо, он у вас же берет материал, то сейчас бы простые скрипты были, но иногда оригинальные, сегодня просто праздник, что не скрипт, все уникальное.
YaVi
YaVi 06.02.2016 02:1523
0
Пожалуйста) У нас с ним один путь, удивлять Вас материалами)
Kosten
Kosten 06.02.2016 02:1524
0
Сафрон, так же кто не запрещает, если берешь материал, так будь добр установи автора и источник.
Сафрон
Сафрон 06.02.2016 02:2826
0
Да, все правильно, но все же новостные сайты ссылаются на источник, а почему эта тематика, что чем то отличается.
YaVi
YaVi 06.02.2016 02:3727
0
Увы, под мобильные устройства, меню не адаптировано(
Kosten
Kosten 06.02.2016 03:0728
0
А нужно, но пока гугл пугает, но время придет, запустил алгоритмы, что яндекс и гугл, хотя на яшу приходят жалобы и они могут понизить, кино сайт так понизили, из за баннера, который выводил по центру пользователей с группы Vk
avatar
a-(c) 12.02.2016 07:5729
0
КЛАСС*
<link rel="stylesheet" type="text/css" href="/menucss/reset.css" media="screen" />
только ломает шаблон!!! для чего он??? surprised
Kosten
Kosten 12.02.2016 08:4430
0
Он для шаблона, думаю ставит нужно правильно, или с чем то конфликтует, ставил на чистый шаблон, все отлично.
avatar
a-(c) 12.02.2016 08:4731
0
Ну мы убрали этот класс и все шаблон встал на место, без тоже работает!
За что он отвечает??
YaVi
YaVi 12.02.2016 12:1332
0
Эти стили не обязательны, они могут быть уже в ваших стилях, это для тех у кого еще стили чисты
avatar
a-(c) 12.02.2016 12:1733
0
Просто они ломают шаблон сам(
Kosten
Kosten 12.02.2016 12:2934
0
Но уже ответили вам, видать они у вас есть уже такие стили, от этого и трение идет.
korsakfsb
korsakfsb 06.04.2016 18:1635
0
БЛин помогите с этим меню !
У меня страничка расположена по центру,а вокруг фон !
Если не убрать файл RESET то картинка сдвигается вправо, вместе с верхним горизонтальным меню
А если убрать то возвращается на центр, но меню верхнее получается обрезанным.
То есть меню это полоса черная на всю ширину, когда он вылетает на цент то правая часть полосы вырезается !!!!
Как блин сделать норм, запарился ???!!!!! ХЕЛП
Alkapone
Alkapone 06.04.2016 18:3536
0
Скрины хоть бы приложил что - ли. А то не видно всей сути проблемы. Можешь мне в личку дать данные от сайта помогу поправить.
FeStemBer
FeStemBer 06.04.2016 18:4437
0
А зачем, тут все экстрасенсы и победители шоу битва экстрасенсов.
Alkapone
Alkapone 06.04.2016 18:4838
0
Вот Вам как пример всё прекрасно работает ДЕМО МЕНЮ (КЛИКАБЕЛЬНО)
Kosten
Kosten 06.04.2016 19:1951
0
Alkapone, даже на темном фоне очень не плохо смотрится это горизонтальное меню.

Alkapone
Alkapone 06.04.2016 19:2452
0
Да смотрится прекрасно, кстати в этом демо заодно можно и проверить Новые кнопки Like для сайта от uCoz я их так грузом добавил проверить)
Kosten
Kosten 06.04.2016 20:5461
0
Можно, так как место позволяет.
1 2 3 4 »
avatar