» »

Изменение стандартного меню для uCoz

Изменение стандартного меню для uCoz

Новое горизонтальное меню с выпадающими подпунктами для uCoz на чистом CSS. Стили модернизируются стандартное меню, которое вызывается с помощью переменной $NMENU_1-...$. Что бы установить данное меню нам потребуется создать его непосредственно в панели управления сайтом со всеми основными пунктами и их подпунктами. Минусом данного меню станет отсутствие адаптивности под различные размеры экранов устройств.

1. Создаем меню в ПУ далее -> Конструктор меню (по ссылке ваш сайт.ru/panel/?a=menus) и создаем горизонтальное меню, если оно у вас уже есть только отредактируйте его пункты и подпункты.
2. Не выходя из Панели Управления переходим в Управление дизайном и открываем Таблицу стилей CSS, туда в самый низ вставляем следующий код:

Код
/* Horizontal menu */  
.sebuganesub {  
position: relative;  
line-height:22px;  
text-align: left;  
margin: 0;  
padding: 0  
}  
.sebuganesub > li {  
display: table-cell;  
margin: 0;  
padding: 0  
}  
.sebuganesub > li > a {  
display: block;  
position: relative;  
padding: 10px 23px;  
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;  
color: #fff;  
font-size: 17px;  
text-decoration: none;  
  background: rgba(29, 28, 28, 0.5);  
-webkit-transition: color .3s ease-in;  
-moz-transition: color .3s ease-in;  
-o-transition: color .3s ease-in;  
-ms-transition: color .3s ease-in  
}  
.sebuganesub > li > a:hover, .suitsoubuganes span, .sebuganesub > li:hover > a {  
color: #0fd0f9  
}  
.sebuganesub > .noubrandm-kentioned > a {  
padding: 10px 30px 10px 20px  
}  
.noubrandm-kentioned > a::after {  
content: "";  
position: absolute;  
top: 38%;  
right: 10px;  
width: 7px;  
height: 7px;  
-webkit-transform: rotate(45deg);  
-ms-transform: rotate(45deg);  
-moz-transform: rotate(45deg);  
-o-transform: rotate(45deg);  
border-bottom: 1px solid #fff;  
border-right: 1px solid #fff  
}  
.noubrandm-kentioned > a:hover::after, .noubrandm-kentioned:hover > a::after {  
border-color: #0fd0f9  
}  
.sebuganesub ul {  
position: absolute;  
margin: 0;  
padding: 0;  
list-style: none;  
display: block  
}  
.sebuganesub ul li {  
position: absolute;  
top: -9999px;  
height: 0px;  
display: block;  
margin: 0;  
padding: 0;  
-webkit-transition: height .2s ease-in;  
-moz-transition: height .2s ease-in;  
-o-transition: height .2s ease-in;  
-ms-transition: height .2s ease-in  
}  
.noubrandm-kentioned:hover > ul > li {  
height: 34px;  
position: relative;  
top: auto  
}  
.sebuganesub ul li a {  
padding: 6px 20px;  
width: 120px;  
display: block;  
position: relative;  
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;  
color: #eee;  
text-decoration: none;  
font-size: 16px;  
background: #00000080;  
-webkit-transition: color .3s ease-in, background .3s ease-in;  
-moz-transition: color .3s ease-in, background .3s ease-in;  
-o-transition: color .3s ease-in, background .3s ease-in;  
-ms-transition: color .3s ease-in, background .3s ease-in  
}  
.sebuganesub ul li:hover > a, .sebuganesub ul li a:hover {  
color: #0fd0f9;  
background: rgba(0, 0, 0, .75)  
}  
.sebuganesub ul .noubrandm-kentioned:hover ul {  
left: 160px;  
top: 0px  
}  
.sebuganesub ul .noubrandm-kentioned a::after {  
width: 6px;  
height: 6px;  
border-bottom: 0;  
border-right: 1px solid #fff;  
border-top: 1px solid #fff;  
top: 12px  
}  
.sebuganesub ul .noubrandm-kentioned:hover > a::after, .sebuganesub ul .noubrandm-kentioned > a:hover::after {  
border-right: 1px solid #0fd0f9;  
border-top: 1px solid #0fd0f9  
}  
/* Horizontal menu end*/

Пару слов о настройке цветов меню:
1. Для изменения цвета текста и фона пунктов меню нужно редактировать параметры color и background класса .uMenuRoot > li > a { ... }.
2. Для изменения цвета текста ссылок при наведении нужно редактировать параметр color класса .uMenuRoot > li > a:hover, .uMenuItemA span, .uMenuRoot > li:hover > a { ... }

Так же представляю HTML каркас меню, что бы вы могли его использовать где вам хочется путем интеграции его на свою html страницу:

Код
<div id="konedveregesa" class="dastimatepos">  
<ul class="sebuganesub">  
<li><a class=" suitsoubuganes" href="/"><span>Главная</span></a></li>  
<li class="noubrandm-kentioned">  
<a href="/news/"><span>Скрипты</span></a>  
  <ul>  
  <li><a href="/"><span>Меню</span></a></li>  
  <li><a href="/"><span>Часы</span></a></li>  
  <li><a href="/"><span>Комар</span></a></li>  
  <li class="noubrandm-kentioned">  
  <a href="/"><span>Муха</span></a>  
  <ul>  
  <li><a href="/"><span>Кувалда</span></a></li>  
  <li><a href="/"><span>Лопух</span></a></li>  
  <li class="noubrandm-kentioned">  
  <a href="/"><span>Под-подпункт</span></a>  
  <ul>  
  <li><a href="/"><span>Под-под-подпункт</span></a></li>  
  <li><a href="/"><span>Под-под-подпункт</span></a></li>  
  <li><a href="/"><span>Под-под-подпункт</span></a></li>  
  </ul>  
  </li>  
  </ul>  
  </li>  
  <li><a href="/"><span>Подгузник</span></a></li>  
  <li><a href="/"><span>Грызун</span></a></li>  
  </ul>  
  </li>  
<li><a href="/"><span>Мода</span></a></li>  
<li><a href="/"><span>Тренды</span></a></li>  
<li><a href="/"><span>Авто</span></a></li>  
<li><a href="/"><span>О нас</span></a></li>  
<li><a href="/"><span>Шаблон</span></a></li>  
</ul>  
</div>

Вот и все, готово! И приятного пользования!
Демонстрация

Источник: wallaby.ucoz.ru
2019-01-29 Загрузок: 3 Просмотров: 4751 Комментарий: (14)

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

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

Комментарий: 14
vasilatiysergo
vasilatiysergo 2019-01-29 17:581
0
Увы выглядит как каменный век. Подходит еще на 2012 год, когда только такие и были проекты.
Kosten
Kosten 2019-01-29 18:022
+1
vasilatiysergo, а можно подключить фантазию, сделать более шире, также поменять шрифт, и смотришь совершенно по другому выглядит. Здесь у каждого свой взгляд на вещи, и где то согласен с вами, что дизайн старый, но явно его можно кардинально изменить.
vasilatiysergo
vasilatiysergo 2019-01-29 18:043
-1
Цитата Kosten ()
vasilatiysergo, а можно подключить фантазию, сделать более шире, также поменять шрифт, и смотришь совершенно по другому выглядит. Здесь у каждого свой взгляд на вещи, и где то согласен с вами, что дизайн старый, но явно его можно кардинально изменить.

Ну это уже другой разговор. Я оставил комментарий данному материалу. По логике вещей можно выложить всякий скрипт и переделать имея фантазию. Но увы много кто не будет этого делать.
Kosten
Kosten 2019-01-29 19:004
0
vasilatiysergo, основном весь дизайн дорабатываю по оформлению. но на демонстраций оставляю как есть, где подчеркивая, что на скринах идет тот код, что в материалах.

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

Здесь материал не загружал, разве только немного шрифт меньше сделал, то вообще сильно выделялся.
wallabu1
wallabu1 2019-01-30 11:525
0
Почему Вы не указали источник? Админ, добавь источник wallaby.ucoz.ru
BLAzER
BLAzER 2019-01-30 12:466
-1
Я не имею никакого отношения в администрированию проекта, но скажу от себя:
Цитата
Ворую? Ваша статья была полностью переписана, если вы имеете лицензию на код, то пожалуйста, пишите в абуз ucoz, он отлично работает. И для начала не рекламируйте свой проект, вы нарушаете правила сайта.
wallabu1
wallabu1 2019-01-30 12:527
0
О какой лицензии говорится? Вы можете привести примеры, где новостные сайты лицензируют код, перед тем как его выложить? Это никто не делает, не нужно вводить в заблуждение.
Новость на моем портале, выставлена исключительно для помощи в начинаниях пользователей. Я потратил время и силы в оформлении и донесении информации, а вы нагло копируете и не указываете источник статьи, при этом говоря: "Ваша статья была полностью переписана", и что? И что что моя статья была переписана? Она остается моей, а не Вашей. Соблюдейте правила и не будут происходить проблемы похожей на эту!
Вы только что сами признались, что переписали мою статью с сайта. На сайте четко написано: "Перепечатка информации возможна только при наличии согласия администрации и активной ссылки на источник".
Вы не придерживаетесь правил сайта и учите меня, вести себя на этом ресурсе? Начните для начала с себя.
Вы понимаете смысл слова "реклама"? Где Вы здесь видите факт рекламирования? Я добавил комментарий, не для того, чтобы прорекламировать свой ресурс, а для того, чтобы соблюдались правила сайта.
Если Вы хотите со мной вступить в дискуссию, можете написать мне на почту или в телеграмм, но если честно, я не вижу никакого конструктива и логики в вашем сообщении для дальнейшего общения.
BLAzER
BLAzER 2019-01-30 13:208
-1
Цитата wallabu1 ()
Если Вы хотите со мной вступить в дискусс...

Если бы... Вы могли решить этот вопрос воспользовавшись кнопкой "ЖАЛОБА НА МАТЕРИАЛ", и там все описать или на крайний случай написать о своей проблеме напрямую амс, а не разводить этот цирк. В данном случае я расцениваю это как реклама.
Цитата wallabu1 ()
О какой лицензии говорится? Вы можете привести примеры, где новостные сайты лицензируют код, перед тем как его выложить? Это никто не делает, не нужно вводить в заблуждение.

Прикопались к словам, ок, если ваш код Защищен лицензией*. Откройте гитхаб и посмотрите проекты, (даже самые маленькие либры) их большинство находятся под разными лицензиями (которые запрещают размещение, использование их для коммерческого использования и т.д.) и по этому вы их не найдете на статейниках.
Цитата wallabu1 ()
Вы только что сами признались, что переписали мою статью с сайта. На сайте четко написано: "Перепечатка информации возможна только при наличии согласия администрации и активной ссылки на источник".

Я сделал рерайт. Прочитайте как работает законодательство, к счастью я не зарегистрирован на вашем проекте из чего следует что пользовательское соглашение я не принимал. Как и писал выше, у вас есть локальный абуз от ucoz`а или арбитраж, никто не мешает вам писать туда. От себя скажу, что вы не найдете таких, подобных, строчек даже на сайтах изданий.
wallabu1
wallabu1 2019-01-30 13:319
0
Цитата
Если бы... Вы могли решить этот вопрос воспользовавшись кнопкой "ЖАЛОБА НА МАТЕРИАЛ", и там все описать или на крайний случай написать о своей проблеме напрямую амс, а не разводить этот цирк. В данном случае я расцениваю это как реклама.

Да ну? А давай с тобой сейчас попробуем вместе это сделать? Такс, нажимаем на кнопку "Жалоба на материал" и... упс. Ошибка. http://joxi.ru/eAOGqzYfx3kd8A
И как же мне по другому дать понять, что новость была украдена?

Цитата
Прикопались к словам, ок, если ваш код Защищен лицензией*. Откройте гитхаб и посмотрите проекты, (даже самые маленькие либры) их большинство находятся под разными лицензиями (которые запрещают размещение, использование их для коммерческого использования и т.д.) и по этому вы их не найдете на статейниках.

При чем здесь github? Ты вообще читал его лицензионное соглашение? Зачем ты вообще его приводишь в пример? Арбитраж, Гаага, ты в своем уме? Хватит себя закапывать. Боже, тебя адекватно попросили следовать правилам и указывать источник.
Ты не администратор данного сайта и нести ответственность не будешь, так что не парся.
Я написал уже жалобу в абуз, пишу сейчас в яндекс и дальше в гугл. И буду делать так каждый раз, когда буду видеть свою новость на этом ресурсе. Но ты не парся, тебе ничего не будет. Пострадает только администратор паблика, но не ты. Тебе ничего не будет.
BLAzER
BLAzER 2019-01-30 13:5010
-1
Цитата wallabu1 ()
Да ну? А давай с тобой сейчас попробуем вместе это сделать? Такс, нажимаем на кнопку "Жалоба на материал" и... упс. Ошибка. http://joxi.ru/eAOGqzYfx3kd8A
И как же мне по другому дать понять, что новость была украдена?

Я писал выше что на крайний случай это можно сделать написав админу в лс.
Цитата wallabu1 ()
При чем здесь github? Ты вообще читал его лицензионное соглашение? Зачем ты вообще его приводишь в пример? Арбитраж, Гаага, ты в своем уме? Хватит себя закапывать.

Я читал GNU лицензии, они обычно прикладываются в репозитории. А что мешает написать на меня допустим жалобу? (имею ввиду арбитраж) Или я прав все таки что оснований нет для удаления статьи. Пол интернета на рерайте держится, и ниче, живем.
Цитата wallabu1 ()
Ты не администратор данного сайта и нести ответственность не будешь, так что не парся.

Нууу, изначально я хотел внести прояснения всего-то 11a но потом ответил
Ниже про паблик опечатка?
wallabu1
wallabu1 2019-01-30 13:5511
0
Цитата
Пол интернета на рерайте держится, и ниче, живем.

Шикарная логика. Если сосед будет еб*ть детей, тогда и я буду. А че, ему же можно.

Такие моменты, где к авторскому праву относятся с уважением и влияют на авторитет ресурса.
wallabu1
wallabu1 2019-01-30 14:0412
0
Цитата
А что мешает написать на меня допустим жалобу? (имею ввиду арбитраж) Или я прав все таки что оснований нет для удаления статьи.

Если ты подойдет к человеку на улице, ударишь его немного и убежишь, имеет ли смысл на тебя писать в арбитраж? Думаю - нет. Стоит научить такого челока элемантарным правилам адекватности, культуры. Научить соблюдать правила общества. Ну или на худой конец - закрыть/забанить, чтобы человек осознал содеянное.
Если ты до сих пор не понял, что ты не прав, боюсь дальнейшее общение не имеет под собой никакого смысла. Твое невежество и глупость я списываю на твой возраст, но это тебе не дает никакого права продолжать нарушать правила.
Надеюсь, что администратор этого ресурса умеет конструктивно мыслить и сделает разумны выводы.
BLAzER
BLAzER 2019-01-30 14:5114
-1
Цитата wallabu1 ()
Шикарная логика. Если сосед будет ***** детей, тогда и я буду. А че, ему же можно.

Пример не вписывающийся в дискуссию, то что в нем описывается это правонарушение. Рерайт в этом плане полностью законен.
Цитата wallabu1 ()
Если ты подойдет к человеку на улице, ударишь его немного и убежишь, имеет ли смысл на тебя писать в арбитраж? Думаю - нет. Стоит научить такого челока элемантарным правилам адекватности, культуры. Научить соблюдать правила общества. Ну или на худой конец - закрыть/забанить, чтобы человек осознал содеянное.

Если я так сделаю, то я буду не адекватом. И кто знает, в современных реалиях может тебе часть людей ответит тем же но уже не чуть-чуть (и никто не дает права воспитывать людей) и уже ты будешь вынужден писать заявление, самосуд в какой форме он бы не был - запрещен.
Цитата wallabu1 ()
Твое невежество и глупость я списываю на твой возраст, но это тебе не дает никакого права продолжать нарушать правила.

Я их не нарушил, почему? -Есть объяснение в комментарии #8. Прошу меня простить но я покину этот диалог, дабы не продолжать это и так как мои комментарии вы задизлайкали, а мне как школоте очень обидно!
1 2 »
avatar