17.07.2017, 06:21
|
Аспирант
|
|
Регистрация: 16.04.2013
Сообщений: 35
|
|
вопрос по меню
Здравствуйте.
Подскажите как сделать такое меню?
https://javascript.ru/forum/attachme...d=150026117 5
вот есть такой код.
<style>
.side{
width:200px;
direction:rtl;
margin-right:0;
position:relative;
}
.side ul{
list-style: none;
}
.menu_services a {
background-color:#f6f6fa;
display:block;
padding:10px;
border-bottom: 1px solid #e7e7ed;
transition: 0.5s background-color box-shadow;
cursor:pointer;
}
.menu_services a:hover{
background-color:#ffffff;
border-radius: 5px;
box-shadow: 0px 0px 45px -7px #e1e1e1;
color:#0B26F8;
border-bottom: 0;
}
.menu_services a:after{
background-color:#ffffff;
border-radius: 5px;
box-shadow: 0px 0px 45px -7px #e1e1e1;
color:#0B26F8;
border-bottom: 0;
}
.menu_services li:first-child a, .menu_services li .menu__drop li:first-child a{
border-radius: 5px 5px 0 0;
}
.menu_services li:last-child a, .menu_services li .menu__drop li:last-child a{
border-radius: 0 0 5px 5px;
border-bottom: 0;
}
.menu_services li .menu__drop li a{
border-radius: 0;
border-bottom: 1px solid #e7e7ed;
}
.menu__list::after{
.menu__drop{
top:-100000px;
position:absolute;
width:400px;
right:100%;
border-right: 10px solid transparent;
opacity:0;
transition: 0.5s opacity;
}
.menu__list:hover .menu__drop{
top:0;
opacity:1;
}
</style>
<div style="width:1200px;">
<div class="side">
<ul class="menu_services">
<li class="menu__list text_font text_color_black"><a>Пункт 1</a>
<ul class="menu__drop">
<li><a class="text_font text_color_black">Под Пункт 1</a></li>
<li><a class="text_font text_color_black">Под Пункт 2</a></li>
<li><a class="text_font text_color_black">Под Пункт 3</a></li>
<li><a class="text_font text_color_black">Под Пункт 4</a></li>
<li><a class="text_font text_color_black">Под Пункт 5</a></li>
</ul>
</li>
<li class="menu__list text_font text_color_black"><a>Пункт 2</a>
<ul class="menu__drop">
<li><a class="text_font text_color_black">Под Пункт 1</a></li>
<li><a class="text_font text_color_black">Под Пункт 2</a></li>
<li><a class="text_font text_color_black">Под Пункт 3</a></li>
<li><a class="text_font text_color_black">Под Пункт 4</a></li>
<li><a class="text_font text_color_black">Под Пункт 5</a></li>
</ul>
</li>
<li class="menu__list text_font text_color_black"><a>Пункт 3</a>
<ul class="menu__drop">
<li><a class="text_font text_color_black">Под Пункт 1</a></li>
<li><a class="text_font text_color_black">Под Пункт 2</a></li>
<li><a class="text_font text_color_black">Под Пункт 3</a></li>
<li><a class="text_font text_color_black">Под Пункт 4</a></li>
<li><a class="text_font text_color_black">Под Пункт 5</a></li>
</ul>
</li>
<li class="menu__list text_font text_color_black"><a>Пункт 4</a>
<ul class="menu__drop">
<li><a class="text_font text_color_black">Под Пункт 1</a></li>
<li><a class="text_font text_color_black">Под Пункт 2</a></li>
<li><a class="text_font text_color_black">Под Пункт 3</a></li>
<li><a class="text_font text_color_black">Под Пункт 4</a></li>
<li><a class="text_font text_color_black">Под Пункт 5</a></li>
</ul>
</li>
<li class="menu__list text_font text_color_black"><a>Пункт 5</a>
<ul class="menu__drop">
<li><a class="text_font text_color_black">Под Пункт 1</a></li>
<li><a class="text_font text_color_black">Под Пункт 2</a></li>
<li><a class="text_font text_color_black">Под Пункт 3</a></li>
<li><a class="text_font text_color_black">Под Пункт 4</a></li>
<li><a class="text_font text_color_black">Под Пункт 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
Проблема 1 не знаю как открывать под пункт по клику на пункт.
Проблема 2 заключается в том что я не знаю, как можно при переводе мышки на под пункт сделать чтобы пункт оставался выделенным как на картинке и при этом на пункте менялась картинка, картинки не векторные.
И вообще без js только css возможно сделать такое меню
Подскажите пожалуйста.
Всем спасибо
|
|
18.07.2017, 05:23
|
Аспирант
|
|
Регистрация: 16.04.2013
Сообщений: 35
|
|
Люди, ну хотя бы скажите глядя на картинку как можно сделать такое меню
|
|
18.07.2017, 14:50
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
|
21.07.2017, 12:59
|
Новичок на форуме
|
|
Регистрация: 21.07.2017
Сообщений: 5
|
|
Здравствуйте. Не знаю туда ли я обращаюсь. Дело такое: есть кнопочный телефон на linux. Имеется встроенный плеер .svg файлов, но задействован он только в меню и подменю. Реализация меню зависит от фантазии - это и список и сетки и спиннеры. Проблема заключается вот в чём: есть два файла для подменю - это режим просмотра(навигация по меню) и режим пересортировки меню. В первом режиме трабла в том, что если переместить курсор вверх(курсор изначально на левом верхнем пункте, так что попадаем сразу вниз сетки), а потом вернуться в исходное положение, то подписи пунктов перемешиваются и не соответствуют иконке. Ну и в дальнейшем в процессе навигации подписи изменяются. Сетка 4х4 и если пунктов в подменю не более 16, т.е. за дисплеем ничего нет, то всё нормально. На 1 скрине изначальное положение - подписи верны. Затем я нажимаю вверх и перемещаюсь вниз сетки(тут подписи всё ещё верны),но после скриншота подписи меняются на такие как вверху, хотя при навигации они должны смениться если я нажму вниз и вернусь в исходную, - тогда вверху сетки подписи будут от пунктов с самого сниза.
Изображения:
|
1.jpg (15.4 Кб, 5 просмотров) |
|
2.jpg (14.3 Кб, 4 просмотров) |
|
|
21.07.2017, 13:09
|
Новичок на форуме
|
|
Регистрация: 21.07.2017
Сообщений: 5
|
|
Там в описании я видел js, но я не шарю. Так вот, в сетке пересортировки таких глюков не наблюдается. Помогите, подскажите. Тут структура, навигация, расположение первым делом идёт. Описание скриптов внизу. Может ещё какие нибудь данные нужно предоставить? GridFolder - навигация, GridReorder - сортировка.
|
|
06.08.2017, 16:19
|
Новичок на форуме
|
|
Регистрация: 21.07.2017
Сообщений: 5
|
|
Видимо собака зарыта где-то здесь:
<use xlink:href="#iconsDef" x="0" y="0" transform="translate(0,16)"/>
<textArea id="MyLabelOld" visibility="hidden">MotoFan.RU
<set attributeName="visibility" to="visible" begin="MtLo.begin;MtRo.begin" end="MtLo.end;MtRo.end" />
<animateTransform type="translate" id="MtLo"/>
<animateTransform type="translate" id="MtRo"/>
</textArea>
<textArea id="MyLabelFcs" visibility="hidden">MotoFan.RU
<animateTransform type="translate" id="RtMf"/>
<animateTransform type="translate" id="LtMf"/>
</textArea>
<handler type="application/ecmascript" ev:event="focus"><![CDATA[
var nx = 0;
var nx = dm.flow.folderNavLevel;
//document.getElementById("NavLevel").setFloatTrait("x", nx);
if (nx<1) {old=dm.view.tags.MainMenuList.focusedIndex;}
else {old=dm.view.tags.MainMenuFolder.focusedIndex;}
document.getElementById("MyLabelFcs").textContent = ("")+document.getElementById("Label."+old).textContent;
document.getElementById("NavLevel").setFloatTrait("y", old);
]]>
</handler>
<handler type="application/ecmascript" ev:event="scrollbar"><![CDATA[
var prg = evt.progress;
var max = evt.maxvalue;
var min = 0;
var old=document.getElementById("NavLevel").getFloatTrait("y");
document.getElementById("NavLevel").setFloatTrait("y", prg);
var o=document.getElementById("NavLevel").getFloatTrait("rx");
var st=document.getElementById("NavLevel").getFloatTrait("width");
oldst=st;
if (prg<5) {st=0;}
if ((prg>24 && st<5) || (prg<10 && st>=10)) {st=5;}
if ((prg>29 && st<10) || (prg<15 && st>=15)) {st=10;}
if ((prg>34 && st<15) || (prg<20 && st>=20)) {st=15;}
if ((prg>39 && st<20) || (prg<25 && st>=25)) {st=20;}
if ((prg>44 && st<25) || (prg<30 && st>=30)) {st=25;}
if ((prg>49 && st<30) || (prg<35 && st>=35)) {st=30;}
if ((prg>54 && st<35) || (prg<40 && st>=40)) {st=35;}
if ((prg>59 && st<40) || (prg<45 && st>=45)) {st=40;}
if (prg>59) {st=51;}
document.getElementById("NavLevel").setFloatTrait("width",st);
var icn = 0;
for (idx = 0; idx < 25; idx++) {
document.getElementById("icon."+icn).setTrait("visibility", "visible");
document.getElementById("Label."+icn).setTrait("visibility", "visible");
document.getElementById("Label."+icn).setTrait("moto:scroll", "stop");
var ps=(idx+st);
if (ps<0) {ps=(max-5+prg+idx);}
if (ps<0) {ps=0;}
if (ps>max) {
ps=0;
break;}
if (ps==prg) {
f=icn;
document.getElementById("Label."+icn).setTrait("moto:scroll", "start");
}
document.getElementById("icon."+icn).setTrait("xlink:href", "#SmallIcon." + ps);
document.getElementById("Label."+icn).textContent = ("")+document.getElementById("Label."+ps).textContent;
icn=icn+1;
}
for (idx = icn; idx < 25; idx++) {
document.getElementById("icon."+idx).setTrait("visibility", "hidden");
document.getElementById("Label."+idx).setTrait("visibility", "hidden");
}
document.getElementById("ibkg."+o).setTrait("visibility", "hidden");
document.getElementById("any."+o).endElement();
document.getElementById("ibkg."+f).setTrait("visibility", "visible");
document.getElementById("any."+f).beginElement();
document.getElementById("MyLabelOld").textContent = ("")+document.getElementById("Label."+old).textContent;
document.getElementById("MyLabelFcs").textContent = ("")+document.getElementById("Label."+prg).textContent;
if (st<5) {document.getElementById("UpIndicator").setTrait("visibility", "hidden");}
else {document.getElementById("UpIndicator").setTrait("visibility", "visible");}
if (st+11<max) {document.getElementById("DownIndicator").setTrait("visibility", "visible");}
else {document.getElementById("DownIndicator").setTrait("visibility", "hidden");}
var p = max+1;
var pm = (p-(parseInt(p/5))*5);
// UP
u=prg-5;
if (!pm) {
if (prg<5 && prg>0) {u=max+(-5+prg);}
}
else {
if ((pm==1 || pm==2) && prg==0) {u=max;}
if (pm==1 && (prg==1 || prg==2)) {u=max;}
if (pm==2 && prg==1) {u=max-1;}
if (pm==2 && prg==2) {u=max;}
}
if (u<0) {u=max;}
up = "#item." + u+"";
// DOWN
d=prg+5;
if (!pm) {
if (max-prg<5 && max-prg>0) {d=prg-max+5;}
}
else {
if ((pm==1 || pm==2) && max-prg==0) {d=0;}
if (pm==1 && (max-prg==1 || max-prg==2)) {d=max;}
if (pm==2 && max-prg==1) {d=1;}
if (pm==2 && max-prg==2) {d=max;}
}
if (d>max) {d=0;}
down = "#item." + d+"";
// LEFT
l=prg-1;
if (l<0) {l=max;}
left = "#item." + l+"";
// RIGHT
r=prg+1;
if (r>max) {r=0;}
right = "#item." + r+"";
var itemFcs = document.getElementById("item."+prg);
itemFcs.setAttributeNS("","nav-down", down);
itemFcs.setAttributeNS("","nav-up", up);
itemFcs.setAttributeNS("","nav-left", left);
itemFcs.setAttributeNS("","nav-right", right);
document.getElementById("NavLevel").setFloatTrait("rx",f);
]]>
</handler>
Помогите разобраться
Последний раз редактировалось Unreal_man_666, 08.08.2017 в 03:39.
|
|
06.08.2017, 16:21
|
Новичок на форуме
|
|
Регистрация: 21.07.2017
Сообщений: 5
|
|
Вот рабочая сетка сортировки, но у неё там 2 режима - навигации и перетаскивания:
<use id="iconGroup" xlink:href="#iconsDef" x="0" y="12"/>
<handler type="application/ecmascript" ev:event="scrollbar"><![CDATA[
if (dm.flow.folderNavLevel >= 1) {
var old = dm.view.tags.MainMenuReorderList.focusedIndex;
dm.view.tags.MainMenuReorderList.focusedIndex = prg;}
var prg = evt.progress;
var max = evt.maxvalue;
var min = 0;
if (!dm.flow.folderNavLevel) {
var old = dm.mainmenu.focusIndex;
dm.mainmenu.focusIndex = prg;}
var st=document.getElementById("NavLevel").getFloatTrait("y");
if (prg<5) {st=0;}
if ((prg>24 && st<5) || (prg<10 && st>=10)) {st=5;}
if ((prg>29 && st<10) || (prg<15 && st>=15)) {st=10;}
if ((prg>34 && st<15) || (prg<20 && st>=20)) {st=15;}
if ((prg>39 && st<20) || (prg<25 && st>=25)) {st=20;}
if ((prg>44 && st<25) || (prg<30 && st>=30)) {st=25;}
if ((prg>49 && st<30) || (prg<35 && st>=35)) {st=30;}
if ((prg>54 && st<35) || (prg<40 && st>=40)) {st=35;}
if ((prg>59 && st<40) || (prg<45 && st>=45)) {st=40;}
if (prg>59) {st=51;}
document.getElementById("NavLevel").setFloatTrait("y",st);
var icn = 0;
i = max+1;
if (i>24) {i=25;}
for (idx = 0; idx < i; idx++) {
document.getElementById("icon."+icn).setTrait("visibility", "visible");
document.getElementById("Lbl."+icn).setTrait("visibility", "visible");
document.getElementById("icon."+icn).setTrait("opacity", ".8");
document.getElementById("Lbl."+icn).setTrait("moto:scroll", "stop");
document.getElementById("Lbl."+icn).setTrait("fill-opacity", ".8");
document.getElementById("drag."+icn).setTrait("visibility", "hidden");
document.getElementById("grab."+icn).setTrait("visibility", "hidden");
var ps=(idx+st);
if (ps<0) {ps=(max-5+prg+idx);}
if (ps<0) {ps=0;}
if (ps>max) {
document.getElementById("icon."+icn).setTrait("visibility", "hidden");
document.getElementById("Lbl."+icn).setTrait("visibility", "hidden");
ps=0;}
if (ps==old) {oldI=icn;}
if (ps==prg) {
document.getElementById("icon."+icn).setTrait("opacity", "1");
document.getElementById("Lbl."+icn).setTrait("fill-opacity", "1");
document.getElementById("Lbl."+icn).setTrait("moto:scroll", "start");
dragFocus(prg,icn);
}
document.getElementById("icon."+icn).setTrait("xlink:href", "#SmallIcon." + ps);
document.getElementById("Lbl."+icn).textContent = ("")+document.getElementById("Label."+ps).textContent;
if (dm.view.isShiftingMode == 2 && ps==prg) {
document.getElementById("Lbl."+icn).textContent = ("")+document.getElementById("Label."+old).textContent;}
icn=icn+1;}
if (dm.view.isShiftingMode == 2) {
document.getElementById("Lbl."+oldI).textContent = ("")+document.getElementById("Label."+prg).textContent;}
for (idx = max+1; idx < 25; idx++) {
document.getElementById("drag."+idx).setTrait("visibility", "hidden");
document.getElementById("grab."+idx).setTrait("visibility", "hidden");
document.getElementById("Lbl."+idx).setTrait("visibility", "hidden");
}
if (st<5) {document.getElementById("UpIndicator").setTrait("visibility", "hidden");}
else {document.getElementById("UpIndicator").setTrait("visibility", "visible");}
if (st+24<max) {document.getElementById("DownIndicator").setTrait("visibility", "visible");}
else {document.getElementById("DownIndicator").setTrait("visibility", "hidden");}
var itemfps = document.getElementById("item."+prg);
var p = max+1;
var pm = (p-(parseInt(p/5))*5);
// UP
u=prg-5;
if (!pm) {
if (prg<5 && prg>0) {u=max+(-5+prg);}
}
else {
if ((pm==1 || pm==2) && prg==0) {u=max;}
if (pm==1 && (prg==1 || prg==2)) {u=max;}
if (pm==2 && prg==1) {u=max-1;}
if (pm==2 && prg==2) {u=max;}
}
if (u<0) {u=max;}
up = "#item." + u+"";
// DOWN
d=prg+5;
if (!pm) {
if (max-prg<5 && max-prg>0) {d=prg-max+5;}
}
else {
if ((pm==1 || pm==2) && max-prg==0) {d=0;}
if (pm==1 && (max-prg==1 || max-prg==2)) {d=max;}
if (pm==2 && max-prg==1) {d=1;}
if (pm==2 && max-prg==2) {d=max;}
}
if (d>max) {d=0;}
down = "#item." + d+"";
// LEFT
l=prg-1;
if (l<0) {l=max;}
left = "#item." + l+"";
// RIGHT
r=prg+1;
if (r>max) {r=0;}
right = "#item." + r+"";
itemfps.setAttributeNS("","nav-down", down);
itemfps.setAttributeNS("","nav-up", up);
itemfps.setAttributeNS("","nav-left", left);
itemfps.setAttributeNS("","nav-right", right);
]]>
</handler>
<script>
<![CDATA[
function dragFocus(fps,icn) {
if (dm.view.isShiftingMode == 2) {
document.getElementById("drag."+icn).setTrait("visibility", "visible");
document.getElementById("grab."+icn).setTrait("visibility", "hidden");}
else {
document.getElementById("grab."+icn).setTrait("visibility", "visible");
document.getElementById("drag."+icn).setTrait("visibility", "hidden");}
function reorderListener()
{
var listener = this;
this.update=function (index)
{dragFocus(fps,icn);}
}
dm.view.reorderListener = new reorderListener();
}
]]>
</script>
<handler type="application/ecmascript" ev:event="unload">
<![CDATA[
dm.view.reorderListener = null;
]]>
</handler>
Последний раз редактировалось Unreal_man_666, 08.08.2017 в 03:39.
|
|
06.08.2017, 16:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Unreal_man_666,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
06.08.2017, 18:36
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
много кода, используйте циклы
например вот это
if (prg<5) {st=0;}
if ((prg>24 && st<5) || (prg<10 && st>=10)) {st=5;}
if ((prg>29 && st<10) || (prg<15 && st>=15)) {st=10;}
if ((prg>34 && st<15) || (prg<20 && st>=20)) {st=15;}
if ((prg>39 && st<20) || (prg<25 && st>=25)) {st=20;}
if ((prg>44 && st<25) || (prg<30 && st>=30)) {st=25;}
if ((prg>49 && st<30) || (prg<35 && st>=35)) {st=30;}
if ((prg>54 && st<35) || (prg<40 && st>=40)) {st=35;}
if ((prg>59 && st<40) || (prg<45 && st>=45)) {st=40;}
if (prg>59) {st=51;}
эквивалентно
if (prg<5) st=0;
for(var i = 5; i<45 ; i+=5) {
if ((prg>19+i && st<i) || (prg<5+i && st>=5+i)) st=i;
}
if (prg>59) {st=51;}
Последний раз редактировалось j0hnik, 06.08.2017 в 18:46.
|
|
08.08.2017, 03:52
|
Новичок на форуме
|
|
Регистрация: 21.07.2017
Сообщений: 5
|
|
j0hnik, уважаемый, я вообще не понимаю что там написано. Я вывел кусок кода мне не понятный. Если выше, с навигацией, размерами и расположением мне более менее ясно(я только начал учить свг), то всё(почти всё), что ниже <handler> для меня лес дремучий. Внятно, как дебилу можете объяснить где косяк? Вот это:
handler type="application/ecmascript"
document.getElementById
itemfps.setAttributeNS
if (pm==1 && (max-prg==1 || max-prg==2)) {d=max;}
if (dm.flow.folderNavLevel >= 1) {
006
var old = dm.view.tags.MainMenuReorderList.focusedIndex;
007
dm.view.tags.MainMenuReorderList.focusedIndex = prg;}
...и прочие строки я тупо не понимаю, ни что значат, ни откуда взялись. document.getElementById - что за документ, где искать, откуда его принесло? Я в полном смятении.
Саня Кувалда(Берлин) - это я вк если удобно. Подсобите пожалуйста.
|
|
|
|