Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   вопрос по меню (https://javascript.ru/forum/dom-window/69761-vopros-po-menyu.html)

bgraf 17.07.2017 06:21
вопрос по меню
 
Вложений: 1
Здравствуйте.
Подскажите как сделать такое меню?
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 возможно сделать такое меню
Подскажите пожалуйста.
Всем спасибо

bgraf 18.07.2017 05:23
Люди, ну хотя бы скажите глядя на картинку как можно сделать такое меню

j0hnik 18.07.2017 14:50
может вам готовое меню взять раз сделать не можете
http://www.jqueryscript.net/tags.php?/mobile%20menu/

Unreal_man_666 21.07.2017 12:59
Вложений: 2
Здравствуйте. Не знаю туда ли я обращаюсь. Дело такое: есть кнопочный телефон на linux. Имеется встроенный плеер .svg файлов, но задействован он только в меню и подменю. Реализация меню зависит от фантазии - это и список и сетки и спиннеры. Проблема заключается вот в чём: есть два файла для подменю - это режим просмотра(навигация по меню) и режим пересортировки меню. В первом режиме трабла в том, что если переместить курсор вверх(курсор изначально на левом верхнем пункте, так что попадаем сразу вниз сетки), а потом вернуться в исходное положение, то подписи пунктов перемешиваются и не соответствуют иконке. Ну и в дальнейшем в процессе навигации подписи изменяются. Сетка 4х4 и если пунктов в подменю не более 16, т.е. за дисплеем ничего нет, то всё нормально. На 1 скрине изначальное положение - подписи верны. Затем я нажимаю вверх и перемещаюсь вниз сетки(тут подписи всё ещё верны),но после скриншота подписи меняются на такие как вверху, хотя при навигации они должны смениться если я нажму вниз и вернусь в исходную, - тогда вверху сетки подписи будут от пунктов с самого сниза.

Unreal_man_666 21.07.2017 13:09
Вложений: 1
Там в описании я видел js, но я не шарю. Так вот, в сетке пересортировки таких глюков не наблюдается. Помогите, подскажите. Тут структура, навигация, расположение первым делом идёт. Описание скриптов внизу. Может ещё какие нибудь данные нужно предоставить? GridFolder - навигация, GridReorder - сортировка.

Unreal_man_666 06.08.2017 16:19
Видимо собака зарыта где-то здесь:

<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 06.08.2017 16:21
Вот рабочая сетка сортировки, но у неё там 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>

рони 06.08.2017 16:23
Unreal_man_666,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

j0hnik 06.08.2017 18:36
много кода, используйте циклы
например вот это
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;}

Unreal_man_666 08.08.2017 03:52
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 - что за документ, где искать, откуда его принесло? Я в полном смятении.

Саня Кувалда(Берлин) - это я вк если удобно. Подсобите пожалуйста.


Часовой пояс GMT +3, время: 18:46.